django框架基础-django模板语言-长期维护
################## 常用的模板语言 #######################
# 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提供了这个方法,理解这种思路是非常重要的,
################## 模板语言 #######################
################## 模板语言 #######################
技术改变命运