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>
{% load myfilter %}
{{ name|addSB }}
{{ name|addstr:"123123filter" }}{# tags #}{# for循环 #}
<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 "" "" "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>

<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">

<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="https://v3.bootcss.com/favicon.ico"> <title>图书管理系统</title>

{# <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">#}
{% load static %}
{# 这一句就是把static路径拿到了，然后在下面拼接起来，#}
<link href={% static "bootstrap/css/bootstrap.min.css" %} rel="stylesheet"> 
<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>
</div>
</div>

<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">

<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>
</div>
<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> <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="" 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提供了这个方法，理解这种思路是非常重要的，