################## 常用的模板语言 #######################
# django的模板语言， # # 只需要记两种特殊符号： # # {{ }}和 {% %} # # 变量相关的用{{}}，逻辑相关的用{%%}。 # # ########################## # # 最为常用的模板语言： # # 1，变量 # {{ name }} # # ########################### # # 2，for循环 # {%for i in list %} # {{ forloop.counter }} # {{ forloop.last }} # {{ i }} # {%endfor%} # # ########################### # # 3，if判断 # {%if 10>5%} # ..... # {%else%} # ....... # {%endif%} # # ########################### # # 4 if ... in 判断 # {%if name in name_list%} # ... # {%endif%}
################## 模板语言----过滤器filter 和 tags #######################
html测试页面；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>这是一个模板测试的页面</title> </head> <body> <h1>这是一个模板测试的页面</h1> {{ name }} {{ age }} <hr> <ul> {% for name in name_list %} <li>{{ name }}</li> {% endfor %} </ul> <hr> {{ name_dict }} {{ name_dict.first_name }} {{ name_dict.last_name }} <hr> {{ person1 }} <hr> {{ person1.name }} <hr> {{ person1.drame }} <hr> {{ person2 }} <hr> 过滤器： <hr> {#如果一个字段不存在，默认是不显示在页面的，但是你可以给他设置默认显示的值#} {{ bucunzai|default:'这个字符串不存在' }} <hr> {#显示一个字段的长度#} {{ name_list|length }} <hr> {#file_size = 123456789，可以把文件的大小，格式化为人类可以阅读的格式#} {{ file_size|filesizeformat }} <hr> {#可以对变量进行切片，左包含右不包含，支持负数#} {{ name_list|slice:'2:4' }} {{ name_list|slice:'1:-1' }} {{ name_dict.last_name|slice:'1:-1' }} <hr> {#显示时间格式的时候很有用，#} {{ now|date:'Y-m-d H:i:s' }} <p>{{ a_html|safe }}</p> {#如果你对用户输入的内容不做控制，就会导致用户进行脚本注入攻击，XSS攻击，sql注入，#} {#a_html|safe 为了在Django中关闭HTML的自动转义有两种方式，如果是一个单独的变量我们可以通过过滤器“|safe”的方式告诉Django这段代码是安全的不必转义。#} {#{{ script_html|safe }}#} {{ script_html }} {#内容太多了展示不了这么多的时候，实现在最后加点的形式#} <p>{{ p_html|truncatechars:30 }}</p> <!-- 自定义的filter 1，在APP下面新增一个文件夹：templatetags 2，在文件下，新建一个文件比如myfilter，用来定义自己的自定义的filter 3，在html中加载你的自定义的filter， --> {% load myfilter %} {{ name|addSB }} {{ name|addstr:"123123filter" }} {# tags #} {# for循环 #} <!-- forloop.counter 当前循环的索引值（从1开始） forloop.counter0 当前循环的索引值（从0开始） forloop.revcounter 当前循环的倒序索引值（从1开始） forloop.revcounter0 当前循环的倒序索引值（从0开始） forloop.first 当前循环是不是第一次循环（布尔值） forloop.last 当前循环是不是最后一次循环（布尔值） forloop.parentloop 本层循环的外层循环 --> <p>for循环</p> <ul> {% for name in name_list %} {% if forloop.first %} <li class="dsb">{{ forloop.counter }}-{{ name }}</li> {% else %} <li class="{% if forloop.last %} 'sb' {% endif %}}">{{ forloop.counter }}-{{ name }}</li> {% endif %} {% empty %} <p>暂时没有数据</p> {% endfor %} </ul> <p>for循环取出字典</p> <ul> {% for k,v in name_dict.items %} <li>{{ k }}----{{ v }}</li> {% endfor %} </ul> {#if else #} {#举例说明：#} {% if user_list %} 用户人数：{{ user_list|length }} {% elif black_list %} 黑名单数：{{ black_list|length }} {% else %} 没有用户 {% endif %} {#with语句起别名 语法#} {% with total=business.employees.count %} {{ total }} employee{{ total|pluralize }} {% endwith %} {#第二种方式#} {% with business.employees.count as total %} {{ total }} employee{{ total|pluralize }} {% endwith %} {#自定义simple_tag#} {% load mytags %} {% plus "1" "2" "abc" %} {#自定义inclusion_tag 多用于返回html代码片段 #} {% load mytags %} {% show_results 10 %} </body> </html>
对应的视图：
class Person(object): def __init__(self, name, age): self.name = name self.age = age def drame(self): return '我要学python' def __str__(self): return '<Person object :{}>'.format(self.name) # django模板语言测试， def templates_test(request): name = 'liqian' age = 1212 name_list = None name_list=['xiaohei','xiaobai','xiaoli','xiaoming'] name_dict = {'first_name': 'wangda', 'last_name': 'wangxiao'} p1 = Person('liqian', 12) p2 = Person('xiaoming', 34) file_size = 123456789 from datetime import datetime now = datetime.now() a_html = '"<a href="www.baidu.com">点我</a>"' script_html = '<script>for(var i=0;i<100;i++){alert(123);}</script>' p_html = '【新民晚报·新民网】开幕第一天，虹桥国际经济论坛分论坛“人工智能与创新发展”快结束时，一位外国美眉问：电影《终结者》里的故事会不会成为现实？人工智能会不会失控?看看特斯拉公司的女老板怎样给真人司机和自动驾驶打分。诺贝尔经济学奖得主告诉年轻人，避免被人工智能抢走饭碗，有一个保证灵的办法……精彩内容，尽在虹桥国际经济论坛。' return render(request, 'templates_test.html', { 'name': name, 'age': age, 'name_list': name_list, 'name_dict': name_dict, 'person1': p1, 'person2': p2, 'file_size': file_size, 'now': now, 'a_html': a_html, 'script_html': script_html, 'p_html': p_html } )
对应的自定义的filter
from django import template register = template.Library() """ 自定义filter的步骤 1，引入from django import template 2，定义函数 3，标识这是一个filter，@register.filter(name="cut") 这都是固定的写法，不能随便写 """ @register.filter(name="cut") def cut(value, arg): return value.replace(arg, "") @register.filter(name="addSB") def add_sb(value): return "{} SB".format(value) @register.filter(name="addstr") def add_sb(arg,value): # 第一个arg是过滤器前面的变量，value是自己定义的参数 return "{}{}".format(arg,value)
自定义的tags：
from django import template register = template.Library() @register.simple_tag(name="plus") def plus(a, b, c): return "{} + {} + {}".format(a, b, c) @register.inclusion_tag('result.html') def show_results(n): n = 1 if n < 1 else int(n) data = ["第{}项".format(i) for i in range(1, n+1)] return {"data": data}
################## 模板语言----母版继承 #######################
母版：
<!DOCTYPE html> <!-- saved from url=(0042)https://v3.bootcss.com/examples/dashboard/ --> <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标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="https://v3.bootcss.com/favicon.ico"> <title>图书管理系统</title> <!-- Bootstrap core CSS --> {# <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">#} {% load static %} {# 这一句就是把static路径拿到了，然后在下面拼接起来，#} <link href={% static "bootstrap/css/bootstrap.min.css" %} rel="stylesheet"> <!-- Custom styles for this template --> <link href={% static "dashboard.css" %} rel="stylesheet"> <link rel="stylesheet" href={% static "fontawesome/css/font-awesome.min.css"%}> </head> <body> {% include 'nav.html' %} <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li {% if publisher_list %} class="active" {% endif %} ><a href="/publisher_list/">出版社列表页</a></li> <li {% if all_book %} class="active" {% endif %} ><a href="/book_list/">书籍列表</a></li> {#class="active",会把颜色变为深蓝色#} <li {% if author_list %} class="active" {% endif %} ><a href="/author_list/">作者列表</a></li> </ul> </div> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> {# 这里是不同的部分#} {% block page-main %} {% endblock %} </div> </div> </div> <div class="modal fade" tabindex="-1" role="dialog" id="myModal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> </button> <h4 class="modal-title">用户信息</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary">保存</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src={% static "jquery-3.3.1.js" %}></script> <script src={% static "bootstrap/js/bootstrap.min.js" %}></script> </body> </html>
子页面：
{#继承母版#}
{% extends 'base.html' %}
{#把自己页面的内容，放入母版相应的位置，#}
{% block page-main %}
<h1 class="page-header">书籍管理页面</h1>
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">出版社列表 <i class="fa fa-thumb-tack pull-right"></i></div>
<div class="panel-body">
<div class="row" style="margin-bottom: 15px">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">搜索</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-md-4 -->
<div class="col-md-3 pull-right">
<a href="/add_book/" class="btn btn-success">新页面添加</a>
<button class="btn btn-success" data-toggle="modal" data-target="#myModal">新增</button>
</div>
</div><!-- /.row -->
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>id</th>
<th>书名</th>
<th>出版社</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for i in all_book %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ i.id }}</td>
<td>{{ i.title }}</td>
<td>{{ i.publisher.name }}</td>
{# 这一步很重要，i.publishe是取到的一个对象，i.publishe_id才是一个id#}
<td>
<a class="btn btn-danger" href="/delete_book/?id={{ i.id }}">删除</a>
<a class="btn btn-info" href="/edit_book/?id={{ i.id }}">编辑</a>
</td>
</tr>
{% empty %}
<tr>
<td colspan="5" class="text-center">暂时没有数据哦~~~~~</td>
</tr>
{% endfor %}
</tbody>
</table>
<nav aria-label="Page navigation" class="text-right">
<ul class="pagination">
{{ page_html|safe }}
</ul>
</nav>
</div>
</div>
{% endblock %}
组件：
<nav class="navbar navbar-inverse navbar-fixed-top"> {# 这个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" href="https://v3.bootcss.com/examples/dashboard/#">BMS-图书管理系统</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="https://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li> <li><a href="https://v3.bootcss.com/examples/dashboard/#">Settings</a></li> <li><a href="https://v3.bootcss.com/examples/dashboard/#">Profile</a></li> <li><a href="https://v3.bootcss.com/examples/dashboard/#">Help</a></li> </ul> <form class="navbar-form navbar-right"> <input type="text" class="form-control" placeholder="Search..."> </form> </div> </div> </nav>
总结：
母版 为什么使用母版？ 每一个页面页头和左侧的菜单都是基本一样的，可以使用母版的方式减少代码量，可以提取出来，作为复用，作为一个母版，其他的只需要继承母版，来实现，母版就是很多个页面都共用的部分， 使用的步骤： 1，将公用的提取出来，放入文件中， 2，在base.html中通过定义block，把每一个页面的不同部分区分出来， 3，在具体页面继承模板 4，把内容写在block块中， 5，注意右侧的菜单，选中是深色，如何能实现动态，可以通过对菜单进行判断是否存在该页面的字段为判断，来看是否需要选中， 但是这种有问题，如果没有数据就还是选不中，也可以使用代码块的替换方式，但是要在每一个页面都要添加一遍， 所以可以定义多个代码块 没有可以加 有可以判断，是否显示， 所以使用过程中，可以在header部分添加代码块，js部分添加代码块，主体部分添加代码块，都是可以的， 使用母版的注意事项 1，{% extends 'base.html' %} 母版文件一定要引号，并且必须放在第一行， 2，可以定义很多个block，通常都会定义的就是一个css代码框和js代码块， 3，但是记住，母版只有一个母版，没有第二个， 组件 可以将常用的页面内容如导航条，页尾信息等组件保存在单独的文件中，然后在需要使用的地方按如下语法导入即可。 {% include 'navbar.html' %} 这个语句分为两种情况： 1，如果这个页面有继承母版，就一定要写到块里面，因为每一个块都在母版中有对应的替换位置，但是不写在块内就无法替换，就不会生效了， 2，如果这个页面是独立的，没有继承母版，就可以把这个写入页面代码就可以了， 静态文件 包括css，和js文件， 如果把所有的静态文件的路径写死了，一旦路径发生变化，所有的地方都要改，这是不行的，有什么好办法？？？ {% load static %} {# 这一句就是把static路径拿到了，然后在下面拼接起来，#} <link href={% static "bootstrap/css/bootstrap.min.css" %} rel="stylesheet"> 这个比较鸡肋，因为没有人会改动这个static文件名，但是django提供了这个方法，理解这种思路是非常重要的，
################## 模板语言 #######################
################## 模板语言 #######################