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

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

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

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

django框架基础-django模板语言-长期维护的更多相关文章

  1. Django框架——基础之模板系统（template文件夹）

    ---恢复内容开始--- 1. 常用语法 需要记住两组特殊符号:{{  }}  和 {%  %}. 在运用到变量的时候使用{{  }},如果是跟逻辑相关的话就使用{%  %}. 在Django模板(t ...

  2. django框架基础-django redis-长期维护-20191220

    ###############   django框架-django redis    ############### # 学习django redis我能得到什么? # 1,项目中广泛使用到redis ...

  3. django框架进阶-auth认证系统-长期维护

    ##################    django的认证系统     ####################### 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要 ...

  4. django框架基础-框架介绍-长期维护

    ###############    MVC架构介绍    ################ # MVC架构 # 一个软件框架有很多的模块,每一个模块有不同的功能 # 模块与模块之间相互配合来完成软件 ...

  5. Django框架简介及模板Template,filter

    Django框架简介 MVC框架和MTV框架 MVC,全名是Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View) ...

  6. Django框架02 /Django下载安装、url路由分发

    Django框架02 /Django下载安装.url路由分发 目录 Django框架02 /Django下载安装.url路由分发 1. django下载安装 2. pycharm创建项目 3. 基于D ...

  7. django基础 -- 4. 模板语言 过滤器 模板继承 FBV 和CBV 装饰器 组件

    一.语法 两种特殊符号(语法): {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 二.变量 1. 可直接用  {{ 变量名 }} (可调用字符串, 数字 ,列表,字典,对象等) ...

  8. Django框架基础知识04-模板标签与模板继承

    1.常用的模板标签 -作用是什么? -常用标签 总结:语法 {% tag %} {% endtag %} {% tag 参数 参数 %} 2.模板的继承与引用 -引用 include标签 -继承 ex ...

  9. Django框架(十一)：模板介绍、模板语言、模板继承、HTML转义

    1. 模板介绍 1.1 模板的功能 产生html,控制页面上展示的内容.模板文件不仅仅是一个html文件. 模板文件包含两部分内容: 静态内容:css.js.html. 动态内容:用于动态去产生一些页 ...

随机推荐

  1. 安装lombok插件IDEA的插件栏加载不出来

    打开 Setting-->Appearance & Behavior -->Syetem Setting -->Updates,将Use secure connection  ...

  2. RNA分类|技术策略|终极目标

    如何在转录水平分类所有RNA分子?可以罗列所有的可能性.技术策略和终极目标. 可能性:见纸 技术策略:RNA单细胞直测技术 终极目标:单细胞水平RNA直测技术决定新的人类RNA组和人类表观组学两个核心 ...

  3. 问：为什么java是单继承，但却是多实现的呢？

    在学习的过程中,我发现了如题的这个有趣的问题. 单继承不必解释,一个类只能有一个直接父类:但是对于接口的实现,一个类却能够实现多个接口. 为什么是这种情况呢?我们来举个简单的栗子看一下: class ...

  4. rpm -qa -qc 查询安装过的软件

    dpkg  -l  | grep ssh        #Ubuntu rpm -qa |grep ssh   #centos 通过ps -e |grep ssh命令查看是否启动.如果只有ssh-ag ...

  5. 编写shell脚本，使用 nohup 让springboot 项目在后台持续运行

    1.将springboot项目打成jar放在linux的某个目录下. 2.新建一个nohup.log文件. 3.使用vi命令新建一个start.sh文件并写下以下内容: #!/bin/sh nohup ...

  6. Django的模板变量

    变量的值来自context中的数据字典, 类似于字典对象的keys到values的映射关系. 变量是被}}和{{括起来的部分 变量看起来就像是这样: {{ variable }}. 当模版引擎遇到一个 ...

  7. linux虚拟机安装oracle全过程（一）

    起源:为方便系统迁移,导致的不必要的重装软件.故在虚拟机中搭建oracle数据库以及weblogic服务器(所有使用软件及资源链接附在结尾处) 1.安装虚拟机: 1.1.安装vmware 11破解版. ...

  8. 谈谈 Act 的依赖注入 和 模板输出 - 回答 drinkjava 同学提问

    1. 背景 依赖注入工具 jBeanBox 的作者 drinkjava 同学最近在 Actframework gitee 项目 的提出了如下评论: 你这个DI工具的出发点可能有问题,一个MVC工具为什 ...

  9. ccf201403-3 记录一个神tmwa了的代码 莫非我没看懂题。。。

    #include <string.h> #include<cstdio> #include<stdio.h> #include <iostream> # ...

  10. JavaSE--对象克隆

    当拷贝一个变量时,原始变量与拷贝变量引用同一个对象,这就是说,改变一个变量所引用的对象将会对另一个变量产生影响. 如果创建一个对象的新的 copy,他的最初状态与 original 一样,但以后将可以 ...