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

################## 模板语言 #######################