django框架基础-django模板语言-长期维护

时间：2024-09-23 11:03:44

##################     常用的模板语言       #######################

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

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

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

相关文章