Django-模板系统

zzdshidashuaige

Django 模板系统

Django 模板基本语法

Django 模板系统主要涉及模板变量、过滤器、模板标签等。模板变量形如{{ name }}，name为变量名；过滤器主要是对模板变量进行处理，如改变显示方式；模板标签形如{{% name %}}。

模板文件

Django中的模板文件指的是HTML文件，这些文件中内嵌模板语言代码，Django模板引擎把这些内嵌的模板语言代码按照一定规则进行替换，然后在浏览器显示。

常规情况下我们会在项目根目录下建立一个templates文件夹用来存放我们的模板文件，模板文件写好后要告诉Django其路径，因此需要在settings文件的TEMPLATES代码块下设置模板文件所在路径，DIRS就是设置模板文件路径的地方。

TEMPLATES = [
    {
        # 指定django模板引擎
        \'BACKEND\': \'django.template.backends.django.DjangoTemplates\',
        # 定义一个目录列表，模板引擎按顺序在其中查找模板文件
        \'DIRS\': [os.path.join(BASE_DIR,\'templates\')],
        # 指定Django是否到应用程序目录下的templates文件夹中查找模板文件
        \'APP_DIRS\': True,
        \'OPTIONS\': {
            \'context_processors\': [
                \'django.template.context_processors.debug\',
                \'django.template.context_processors.request\',
                \'django.contrib.auth.context_processors.auth\',
                \'django.contrib.messages.context_processors.messages\',
            ],
        },
    },
]

BASE_DIR保存着项目的根目录路径。

Django按照settings文件中的TEMPLATES代码块的各项设置查找模板文件，查找顺序如下：

  1. 如果APP_DIRS的值为True，首先在应用程序目录下的templates文件夹中寻找模板文件，为False则进行下一步。
  2. 按照DIRS中给定的地址顺序依次查找模板文件。
  3. 以上两步都找不到模板文件就抛出错误。

模板变量

模板变量的格式为{{ name }}，name是变量名。模板变量内嵌在HTML文件中，当Django模板引擎检测到一个模板变量时，它会用变量代表的实际值或内容进行替换。

在模板变量中，有变量名后加点再加字符串的形式，Django模板引擎会根据变量的不同情况进行分析，如果是字典变量则按字典形式查询key值；如果是类变量则按属性或方法查询；如果是列表变量则按索引数字查询。

举例说明，在views中编写以下代码：

# 在视图函数中列举各种类型的变量，主要演示它们作为模板变量时在模板文件中显示的形式
def template_test(request):
    # 列表变量
    v_list = [\'程序员\',\'产品经理\',\'销售\',\'架构师\']
    # 字典变量，key一定要包含在引号中
    v_dic = {\'name\':\'张三\',\'age\':\'16\',\'love\':\'编程\'}
    # 定义一个类，这个类有属性name、language、hair，方法hope()
    class coder(object):
        # 类的初始化方法，为三个属性赋值
        def __init__(self,name,language,hair):
            self.name = name
            self.language = language
            self.hair = hair
        # 类的方法
        def hope(self):
            return \'{}的希望是程序少出bug\'.format(self.name)
    # 实例化类，生成类对象
    zhang = coder(\'张三\',\'python\',\'多\')
    li = coder(\'李四\',\'php\',\'不多不少\')
    wang = coder(\'王五\',\'c#\',\'不多不少\')
    coders = [zhang,li,wang]
    return render(request,\'test_template.html\',{\'v_list\':v_list},\'v_dic\':v_dic,\'coders\':coders)

test_template.html代码：

<body>
    {{ v_list }} <br>
    列表类型变量提取第一个列表项
    {{ v_list.0 }} <br>
    字典类型变量，提取键名为name的值
    {{ v_dict.name }} <br>
    列表类型，提取第二个列表项，这个项是类的实例对象，再提取它的name属性
    {{ coders.1.name}} <br>
    列表类型，提取第二个列表项，这个项是类的实例对象，再提取它的hope方法
    {{ coders.1.hope}} <br>
</body>

为了测试结果，在urls中加入路径，在终端启动程序。

模板注释

模板语言中也可以使用注释，形如{{# xxx #}}，模板注释不在页面展示。

多行注释要使用注释标签：

{% comment %}
一
二
三
{% endcomment %}

过滤器

Django模板语言可以通过过滤器对模板变量进行再加工来改变模板变量的形式或内容。过滤器语法格式为{{ name|filter_name:参数 }}，管道符右边就是过滤器名字，过滤器可以传递参数。管道符前面的变量和冒号后面的参数都将作为参数传给过滤器处理。过滤器分内置过滤器和自定义过滤器。

内置过滤器

  1. default，格式为{{ name|default:\'默认值\' }},如果模板变量的值为空或false就显示默认值。

  2. length，格式为{{ name|length }}，显示模板变量的长度。

  3. truncatechars，格式为{{ name|truncatechars:6 }}，适用于模板变量是字符串的情况，显示指定的字符个数，后面以省略号...结尾，算3个字符。

  4. upper和lower，{{ name|upper }}将字符串转换为全部大写的形式。

  5. slice，格式为{{ name|slice:":2" }}，用于模板变量是列表或字符串的情况，显示其中的一部分，也就是切片。

  6. date，格式为{{ name|date:"Y-m-d H:i:s" }}，用于模板变量是日期或时间的情况，提供格式化输出。

  7. safe，格式为{{ name|safe }}，为了安全，Django的模板会对HTML标签和JS代码等语法进行自动转义(转成纯文本字符串)，过滤器safe则会关闭自动转义功能：

    # 这句代码写在views中，并传给某个HTML文件
a_href=\'<a href=\'add.html\'>增加</a>\'
...
<!-- 以下是写在HTML文件中的代码 -->
<!-- 下面语句会显示一个字符串 -->
{{ a_href }}
<!-- 下面语句会显示一个链接，而不是一个字符串 -->
{{ a_href |safe }}

自定义过滤器

按Django的规则，编写自定义过滤器的文件要放在固定的目录下。按照这个要求，我们在应用程序目录下新建一个文件夹templatetags（必须使用这个名字），在其下建立一个文件test_filter.py，编写自定义代码。

# 导入模板模块
from django import template
# 取出注册库，固定写法
register = template.Library()
# 注册过滤器的名字为coderstatus
@register.filter(name=\'coderstatus\')
def coder_status(value,arg):
    if value == \'morehair\':
        return "{}是“菜鸟”程序员".format(arg)
    if value == \'middlehair\':
        return "{}是“中级”程序员".format(arg)
    if value == \'fewhair\':
        return "{}是“高级”程序员".format(arg)

自定义过滤器的逻辑代码通过函数实现，在函数前面用@register.filter(name=\'coderstatus\')进行注册后，这个函数就成为过滤器函数，并且过滤器被命名为coderstatus。

在views中编写函数test_filter():

def test_filter(request):
    vhair = \'fewhair\'
    return render(request,\'test_filter.html\',{\'hair\':vhair})

在test_filter.html中，模板变量形式如下：

<!-- 要想使用自定义过滤器，应先把定义自定义过滤器的文件导入-->
{% load test_filter %}
...
<!-- 模板变量是hair，过滤器是coderstatus，参数是王老五-->
<!-- 将显示：王老五是高级程序员-->
{{ hair|coderstatus:"王老五" }}

{% load test_filter %}是为了导入test_filter文件来查找过滤器。

{{ hair|coderstatus:"王老五" }}中的hair、王老五会被传递到coder_status(value,arg)。

模板标签

模板标签的形式为{% tagname %}，模板标签与业务逻辑相关，有些标签名在形式上和程序代码相似，模板标签可以让HTML文件中的内容按照业务逻辑或流程控制进行显示。模板标签分内置模板标签和自定义模板标签。

内置模板标签

  1. if，用于判断

    {% if num>8 %}
	num数值大于8
{% elif num<8 %}
    num数值小于8
{% else %}
    num等于8
{% endif %}

  2. ifqual和ifnotequal，也用于判断，判断两个值是否相等。

    <!-- 比较age是否等于80 -->
{% ifequal age 80 %}
<h3>等于就显示</h3>
{% endifequal %}

  3. for，{% for %}用于循环可迭代变量，每次循环时显示{% for %}和{% endfor %}之间的内容。

    for循环存在内置参数，他们都是为了取得for循环的索引值，具体说明如下：

    • forloop.counter：从1开始返回当前循环的索引值。
    • forloop.counter0：从0开始返回当前循环的索引值。
    • forloop.revcounter：返回当前循环的倒序索引值，从最大索引值起始，最后到值1。
    • forloop.revcounter0：返回当前循环的倒序索引值，从最大索引值起始，最后到值0。
    • forloop.first：返回布尔值，表示当前是不是第一次循环。
    • forloop.last：返回布尔值，表示当前是不是最后一次循环。
    • forloop.parentloop：本层循环的外层循环(父循环)。

    举例说明，在views中定义一个函数test_for()：

    def test_for(request):
    v_list = [\'程序员\',\'经理\',\'销售\',\'架构师\',\'老板\',\'员工\']
    return render(request,\'test_for.html\',{\'v_list\':v_list})

    编写test_for.html代码：

    {% for name in vlist %}
	{% if forloop.first %}
		第一条记录：{{ name }}
		<hr>
	{% endif %}
	<!-- forloop.counter 用法例子-->
	从1开始计数：{{ forloop.counter }}--{{ name }}
	<br>
	<!-- forloop.revcounter 用法例子-->
	反向计数：{{ forloop.revcounter }}--{{ name }}
	<hr>
	<!-- 判断循环的最后一条记录 -->
	{% if forloop.last %}
		最后一条记录：{{ name }}
		<hr>
	{% endif %}
	{% endfor %}

  4. with，主要用于给一个变量起别名，多用于复杂的变量。

自定义模板标签

按Django的规则，编写自定义模板标签的文件要放在固定的目录下。按照这个要求，我们在应用程序目录下新建一个文件夹templatetags（必须使用这个名字），在其下建立一个文件test_tag.py，编写自定义代码。自定义模板标签分两种：simple_tag和inclusion_tag。

  1. simple_tag自定义模板标签，在test_tag中定义：

    # 导入template模块
from django import template
# 定义register变量，固定写法
register = template.Library()
# 函数注册为simple_tag模板标签并命名
@register.simple_tag(name="test_simpletag")
def test_simpletag(arg1,arg2,arg3):
    return "这是一个simpletag示例，它接收的参数分别是：{}、{}、{}".format(arg1,arg2,arg3)

    在views中定义函数test_tag()调用test_tag.html文件来测试：

    def test_tag(request):
    return render(request,\'test_tag.html\')

    test_tag.html文件的主要代码：

    {% load test_tag %}
...
<body>
    测试simple_tag
    <hr>
    {% test_simpletag "参数一" "参数二" "参数3" %}  # 参数会传递给test_tag.py中定义的函数。
</body>

  2. inclusion_tag自定义模板标签

    与simple_tag不同的是，它需要与HTML代码片段配合。通过一个定义函数，把函数代码生成的变量传递给这个代码片段，形成一个新的HTML代码供模板文件调用：

    # 函数注册为inclusion_tag模板标签并指明HTML代码片段所在文件的名称
# 函数将会把生成的变量传递给这个html文件
@register.inclusion_tag(\'inclusion_tag_html.html\')
def test_inclusiontag(name):
    name1 = "{}的经历如下：".format(name)
    data = ["初级程序员","中级","高级"]
    # 这些变量会传递给inclusion_tag_html.html
    return {"name":name1,"data":data}

    新建inclusion_tag_html.html文件：

    {{ name }}
<hr>
<ul>
    {% for item in data %}
    <li>{{ item }}</li>
    {% endfor %}
</ul>

    inclusion_tag_html文件把自定义模板标签test_inclusiontag传递过来的name、data变量按照一定的格式进行放置。

    在views中定义test_inclusion_tag()，其通过render函数调用inclusion_tag_html文件：

    def test_inclusion_tag(request):
    return render(request,\'test_inclusion_tag.html\')

    test_inclusion_tag.html文件如下：

    <body>
    {% load test_tag %}
    {% test_inclusiontag "小明" %}
</body>

    {% test_inclusiontag "小明" %}将小明作为参数值传递给test_inclusiontag自定义模板标签，然后这个标签把接收的变量和自己的变量data传到inclusion_tag_html.html做模板变量，最后将这段HTML代码片段放到test_inclusion_tag.html相应的位置，也就是{% test_inclusiontag "小明" %}所在的位置。

母版和继承

母版

在web开发中，一个网站系统往往要求风格统一、样式一致，所以把网站系统中页面的相同部分抽取出来，放在文件中形成一个母版。

在项目根目录的templates文件夹下建立一个base.html文件，以这个文件为母版，其他HTML都继承于它：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible">
    <meta name="viewport" content="width=device-width,initial-scale=1">
{#    上述标签必须放在最前面#}
    <title>母版样例</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>这是母版标题
            <small>--母版样例</small>
        </h1>
    </div>
{#    代码块#}
    {% block main %}
    
    {% endblock %}
    <div>
        <h3>这是母版底部
            <small>--母版样例</small>
        </h3>
    </div>
</div>
</body>
</html>

继承

页面继承母版后，页面的样式会与母版相似，只有block块（{% block 块名 %}）部分用继承页面的内容替换母版内容。下面是页面/templates/inhert_base.html文件的代码，它是一个继承母版base的页面。

{% extends \'base.html\' %}
{% block main %}
<div class="panel panel-default">
    <div class="panel-body">
        这是一个继承页面，这个块的内容替换母版该块的内容
    </div>
</div>
{% endblock %}

说明：

  1. 第一行表明要继承的母版，必须放在第一行。
  2. 继承页面HTML文件相关的代码必须写在block中，不能写在外面。如以上必须写在{% block main %}和{% endblock %}之间，而且写在块中的代码才显示与母版不一样的内容，其他部分与母版一样。

组件

这里的组件指的是一个HTML文件，就是把HTML文件中一些相对固定的部分分离出来，存放到不同的HTML文件中，这些文件可以被模板文件引用到相应位置。

在templates文件夹下建立一个组件nav.html，文件建立了一个导航条。

<ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="#">主页</a></li>
    <li role="presentation"><a href="#">配置</a></li>
    <li role="presentation"><a href="#">信息</a></li>
</ul>

通过{% include \'nav.html\' %}引入即可。

样例5：模板开发

前面章节中的项目test_orm下有employee应用，实现了数据库表的增删改查，但是其页面不够美观，这里对其改进来介绍模板的实际应用。

准备工作

Bootstrap是一个简洁、直观、功能强大的前端开发框架，用它来进行美化：

  1. 在test_orm项目根目录下新建static文件夹。
  2. 打开Bootstrap网站下载后将css、font、js这三个文件夹复制到static文件夹下。
  3. 在static下新建文件夹fontawesom，打开Font Awesome网站下载fontawesome压缩包，解压后将fonts、css文件夹复制到/static/fontawesome/下。
  4. 下载JQuery复制到静态文件夹下。
  5. 我们将对Bootstrap中的样例dashboard进行改造以生成模板。首先在/test_orm/templates/下面新建一个base.html并清空内容，然后打开Bootstrap中文网站的起步页面，单击控制台处的缩略图，打开dashboard页面，在页面中查看源代码，把源代码复制到base.html。
  6. 在static文件夹新建dashboard.css，然后打开网页源代码找出dashboard.css，复制过去。

Bootstrap用法简介

前面介绍了Bootstrap框架的下载，下载完成后要引用它的CSS、JavaScript文件，如下：

<link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../static/jquery-3.4.1.min.js"></script>
<script src="../static/bootstrap/js/bootstrap.min.js"></script>

Bootstrap的所有JS插件都依赖JQuery，所以引用JQuery要放在js前面。

拿来即用。在Bootstrap的网站中的全局CSS样式、组件、JavaScript插件这三个类别找到所需样式组件并复制代码即可。

举例说明，我们想在网页上加一个带标题的面板，只需要在组件中找到面板组件，复制代码：

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

我们将其放到文件中的合适位置并做修改：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="../static/jquery-3.4.1.min.js"></script>
    <script src="../static/bootstrap/js/bootstrap.min.js"></script>
    <title>Title</title>
</head>
<body>
<br>
<!--Bootstrap栅格系统格式，row是行参数 //-->
<div class="row">
<!--    Bootstrap栅格系统格式,col-md-offset-3 col-md-6是栅格参数-->
        <div class="col-md-offset-3 col-md-6" >
            <h2>面板组件样例</h2>
            <hr>
            <!--面板代码开始-->
            <div class="panel panel-default">
                <div class="panel-heading">面板标题</div>
                <div class="panel-body">
                    你好，<br>
                    傻逼，<br>
                    吃屎。
                </div>
            </div>  <!--面板代码结束-->
        </div>
</div>
</body>
</html>

Font Awesome用法简介

它是一套图标字体库和CSS框架。

引用方法：

<link href="../static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../static/jquery-3.4.1.min.js"></script>
<script src="../static/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../static/fontawesome/css/font-awesome.min.css">

在Font Awesome中文网站的图标库中找到需要的图标复制代码即可。

<button class="btn btn-primary"><i class="fa fa-heart" aria-hidden="true">憨憨</i> </button>

生成母版base.html

对base.html文件进行精简，形成我们需要的代码：

{% load static %}
<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html" ; charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
	<!--上述3个标签必须放在最前面-->
	<meta name="description" content="">
	<meta name="author" content="">
    <title>母版样例</title>
	<!--Bootstrap core css-->
	<link rel="icon" href="{% static \'favicon.ico\' %}">
	<link rel="stylesheet" href="{% static \'bootstrap/css/bootstrap.min.css\' %}">
	<!--Custom styles  for this template-->
	<link rel="stylesheet" href="{% static \'dashboard.css\' %">
	<link rel="stylesheet" href="{% static \'fontawesome/css/font-awesome.min.">
</head>
<body>
<!--引入了header.html组件-->
{% include \'header.html\' %}
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-3 col-md-2 sidebar">
			<ul class="nav nav-sidebar">
<!--				employeecls块，可以在中间写样式代码-->
				<li class="{% block employeecls %}{% endblock %}"><a href="/list_employee/">人员修改信息</a></li>
<!--				depcls块，可以在中间写样式代码-->
				<li class="{% block depcls %}{% endblock %}"><a href="/list_dep/">部门列表</a></li>
<!--				groupcls块，可以在中间写样式代码-->
				<li class="{% block groupcls %}{% endblock %}"><a href="/list_group/">团体列表</a></li>
<!--				employeeinfocls块，可以在中间写样式代码-->
				<li class="{% block employeeinfocls %}{% endblock %}"><a href="/list_employeeinfo/">人员补充信息</a></li>
			</ul>
		</div>
		<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main ">
<!--			block块page_content写继承页面特有的内容，即不同于母版的内容-->
			{% block page_content %}
			{% endblock %}
		</div>
	</div>
</div>
<script src="{% static \'jquery-3.4.1.min.js\' %}"></script>
<script src="{% static\'bootstrap/js/bootstrap.min.js %}"></script>
</body>
</html>

说明：

  1. 首先要加载静态文件的相关设置然后引入框架和文件等。

  2. 代码引用Bootstrap栅格系统，通过一系列的行和列的组合来创建页面左右布局的样式，左边为菜单，右边为主要信息内容显示。

  3. 代码定义了4个与样式有关的block块，供继承页面对菜单样式进行定制。

  4. 代码还定义block块page_content，继承页面可以在其中写页面的特有内容。

  5. {% include \'header.html\' %}在相应位置引入了head.html组件，这个组件包含页面头部内容，引用Bootstrap中的导航条组件并修改，代码如下：

    <nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container-fluid">
        <div class=\'navbar-header\'>
            <button type=\'button\' class=\'navbar-toggle collapsed\' data-toggle="collapse" data-target="#navbar" aria-expanded=\'false\' aria-controls=\'navbar\'>
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand">Django Template</a>
        </div>
    </div></nav>

编写index.html页面

主页面index.html主要显示一些欢迎信息，可以把模板的菜单样式、页面头部等内容原样继承过来，所以只需要在page_content块进行编写，在templates文件夹下的test_orm下新建index.html：

{% extends \'test_orm/base.html\' %}
{% block page_content %}
<div class="jumbotron">    # 巨幕组件
    <h1>你好，朋友!</h1>
    <p>这是Djnago Template模板样例的首页index.html，它继承于母板base.html</p>
    <p>本样例对test_orm项目中网页进行美化，也就是利用Djnago模板相关功能进行改造</p>
    <p></p>
    <p></p>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">确定</a></p>
</div>
{% endblock %}

编写完测试，一级url配置：path(\'test_orm/\',include(\'employee.urls\')),

二级url配置：path(\'index\',index),

定义视图函数：

def index(request):
    return render(request,\'index.html\')

终端开启django，输入地址访问。

员工相关页面优化

员工列表页面

员工列表页面也继承于base.html，只需编写block块的内容。这里主要修改了page_content、employeecls两个块。

{% extends \'test_orm/base.html\' %}
{% block page_content %}
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">员工列表</h3> <!--这里加标题 //-->
    </div>
    <div class="panel-body"> <!--将表格放在这个<div class="panel-body">的标签中 //-->
        <div class="row">
            <div class="col-md-3 pull-right" style="margin-bottom:15px ">
                <div><a href="/test_orm/add_employee/" class="btn btn-primary pull-right"><i class="fa fa-user-plus fa-fw"></i>&nbsp;增加记录</a><!--给增加记录按钮加bootstrap样式、fontawesome图标 //-->
                </div>
            </div>
        </div>
        <table class="table table-bordered table-condensed table-striped table-hover"> <!--给表格增加bootstrap样式 //-->
            <thead>
            <tr>
                <th>姓名</th>
                <th>邮件</th>
                <th>薪水</th>
                <th>地址</th>
                <th>部门</th>
                <th>团队</th>
                <th colspan="2">操作</th>
            </tr>
            </thead>
            <tbody>
            {% for emp in emp_list %}
            <tr>
                <td>{{ emp.name }}</td>
                <td>{{ emp.email }}</td>
                <td>{{ emp.salary }}</td>
                <td>{{ emp.info.address }}</td>
                <td>{{ emp.dep.dep_name }}</td>
                <td>
                    {% for gp in emp.group.all %}
                    {% if forloop.last %}
                    {{ gp.group_name }}
                    {% else %}
                    {{ gp.group_name }},
                    {% endif %}
                    {% endfor %}
                </td>
                <td><a href="/test_orm/del_employee/{{ emp.id }}/" class="btn btn-danger"><i class="fa fa-trash-o fa-fw"
                                                                                    aria-hidden="true"></i>&nbsp;删除</a></td>
                <td><a href="/test_orm/edit_employee/{{ emp.id }}/" class="btn btn-info"><i class="fa fa-pencil-square-o"
                                                                                   aria-hidden="true"></i>&nbsp;修改</a></td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="7">无相关记录！</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>

    </div>
</div>
{% endblock %}
<!-- 以下block块给样式类赋值，class="active"//-->
{% block employeecls %}
active
{% endblock %}

说明：

  1. 代码在页面上设置了Bootstrap面板组件，方法是直接复制官网的代码并修改。
  2. 在面板内部放置表格，<div class="panel-body">...</div>之间是面板的内部，把原页面表格内容复制到面板内部。
  3. 增加记录按钮通过class=“btn btn-primary pull-right”设置成蓝底向右浮动的样式，并通过嵌入<i class="fa fa-user-plus fa-fw"></i>增加了一个图标，其中fa-fw设置图标在一个固定宽度内，主要用于不同宽度图标无法对齐的情况，尤其是在列表或导航时。
  4. 表格通过class="table table-bordered table-condensed table-striped table-hover"设置表格为带边框、紧缩、条纹状、对鼠标指针悬停做出响应等样式。
  5. class="btn btn-danger"把删除按钮底色设置为红色，class="btn btn-info"把修改按钮底色设置为浅蓝色。
  6. 在employeecls块中加入active就可以把人员信息修改菜单设置为class=“active”，这样该菜单显示为激活状态。

员工增加页面

add_employee.html文件也继承于base.html，页面只有page_content、employeecls两个块。

{% extends \'test_orm/base.html\' %}
{% block page_content %}

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">增加员工</h3> <!--这里加标题 //-->
    </div>
    <div class="panel-body"> <!--将表格放在这个<div class="panel-body">的标签中 //-->
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <!--通过class="form-horizontal"设置form为bootstrap form样式-->
                <form action="/test_orm/add_employee/" method="post" class="form-horizontal">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="name" class="col-md-4 control-label">姓名：</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" id="name" name="name" placeholder="请录入姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-md-4 control-label">邮箱：</label>
                        <div class="col-md-8">
                            <input type="email" class="form-control" id="email" name="email" placeholder="请录入邮箱地址">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="salary" class="col-md-4 control-label">工资：</label>
                        <div class="col-md-8">
                            <input type="number" class="form-control" id="salary" name="salary" placeholder="请录入工资">

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="info" class="col-md-4 control-label">电话地址：</label>
                        <div class="col-md-8">
                            <select class="form-control" name="info" id="info">
                                {% for info in info_list %}
                                <option value="{{ info.id}}"> {{ info.phone }}||{{ info.address }}</option>
                                {% endfor %}
                            </select> 　
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="dep" class="col-md-4 control-label">部门：</label>
                        <div class="col-md-8">
                            <select class="form-control" name="dep" id="dep">
                                {% for dep in dep_list %}
                                <option value="{{ dep.id}}"> {{ dep.dep_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="group" class="col-md-4 control-label">团体：</label>
                        <div class="col-md-8">
                            <select class="form-control" name="group" id="group" multiple="true">
                                {% for group in group_list %}
                                <option value="{{ group.id}}"> {{ group.group_name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        　
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-4 col-md-8">
                            <input type="submit" class="btn btn-primary" value="增加">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}
<!-- 以下block块给样式类赋值，class="active"//-->
{% block employeecls %}
active
{% endblock %}

员工修改页面

edit_employee.html文件也继承于母版base.html：

{% extends \'test_orm/base.html\' %}
{% block page_content %}

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">修改员工信息</h3> <!--这里加标题 //-->
    </div>
    <div class="panel-body"> <!--将表格放在这个<div class="panel-body">的标签中 //-->
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <!--通过class="form-horizontal"设置form为bootstrap form样式-->
                <form action="" method="post" class="form-horizontal">
                    {% csrf_token %}
                    <input type="hidden" name=\'id\' id=\'id\' value={{ emp.id }}>
                    <div class="form-group">
                        <label for="name" class="col-md-4 control-label">姓名：</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" id="name" name="name" placeholder="请录入姓名" value={{ emp.name }}>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-md-4 control-label">邮箱：</label>
                        <div class="col-md-8">
                            <input type="email" class="form-control" id="email" name="email" placeholder="请录入邮箱地址"
                                   value={{ emp.email }}>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="salary" class="col-md-4 control-label">工资：</label>
                        <div class="col-md-8">
                            <input type="number" class="form-control" id="salary" name="salary" placeholder="请录入工资"
                                   value={{ emp.salary }}>

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="info" class="col-md-4 control-label">电话地址：</label>
                        <div class="col-md-8">
                            <select class="form-control" name="info" id="info">
                                {% for info in info_list %}
                                {% if emp.info_id == info.id %}
                                <option value="{{ info.id}}" selected> {{ info.phone }}||{{ info.address }}</option>
                                {% else %}
                                <option value="{{ info.id}}"> {{ info.phone }}||{{ info.address }}</option>
                                {% endif %}
                                {% endfor %}
                            </select> 　
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="dep" class="col-md-4 control-label">部门：</label>
                        <div class="col-md-8">
                            <select class="form-control" name="dep" id="dep">
                                {% for dep in dep_list %}
                                {% if emp.dep_id == dep.id %}
                                <option value="{{ dep.id}}" selected> {{ dep.dep_name }}</option>
                                {% else %}
                                <option value="{{ dep.id}}"> {{ dep.dep_name }}</option>
                                {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="group" class="col-md-4 control-label">团体：</label>
                        <div class="col-md-8">
                            <select class="form-control" name="group" id="group" multiple="true">
                                {% for group in group_list %}
                                {% if group in emp.group.all %}
                                <option value="{{ group.id}}" selected> {{ group.group_name }}</option>
                                {% else %}
                                <option value="{{ group.id}}"> {{ group.group_name }}</option>
                                {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        　
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-4 col-md-8">
                            <input type="submit" class="btn btn-primary" value="保存">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

<!-- 以下block块给样式类赋值，class="active"//-->
{% block employeecls %}
active
{% endblock %}

分类：

技术点：

相关文章：

  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-07-22
  • 2022-02-13
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode