Day50 of learning python -- 模板

一、模板的定义

　　对于模板，就是读取模板(其中嵌套着模板标签)，然后把模板中的数据读取到新建的html中，再进行渲染，最后把信息返回给用户。

二、模板语言

模板中也有特定的语言，该语言可以实现数据的显示

1）{{ item }}，把render，redirect，中的参数传入到html中

2）for循环

{% for item in item_list %}
    {{ item}}
{% endfor %}

3）if条件判断

{% if ordered_warranty %} 
{% else %}
{% endif %}

4）母版与子版的使用

母版：

{% block title %}
{% endblock %}

子版：

{% extends "base.html" %}

{% block title %}
子版自定义的内容
{% endblock %}

使用：

母版：是各个html共有的模板，通过继承整个母版，子版再在这个母版基础上进行其他的操作(Day65)

母版，通常母版有三个标明的地方，一个是CSS样式，一个是body内容，一个是JS操作，由子版进行添加新的内容进行。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="/static/css/commons.css">
    {% block css %}{% endblock %}       
</head>
<body>
    <div class="pg-header">
        <div class="logo left">老男孩后台管理</div>
        <div class="avatar right" style="position: relative">
            <img src="/static/head.jpg" style="width: 40px;height: 40px">
            <div class="user-info">
                <a>个人资料</a>
                <a>注销</a>
            </div>
        </div>
        <div class="rmenus right">
            <a><i class="fa fa-envelope-o" aria-hidden="true"></i> 邮件</a>
            <a><i class="fa fa-commenting-o" aria-hidden="true"></i> 消息</a>
        </div>

    </div>
    <div class="pg-body">
        <div class="menus">
            <a><i class="fa fa-cubes" aria-hidden="true"></i> 班级管理</a>
            <a><i class="fa fa-male" aria-hidden="true"></i> 学生管理</a>
            <a><i class="fa fa-graduation-cap" aria-hidden="true"></i> 老师管理</a>
        </div>
        <div class="content">
            {% block commons %}{% endblock %}
            <nav aria-label="Page navigation" class="text-center">
              <ul class="pagination">
                <li>
                  <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                  <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              </ul>
            </nav>
        </div>
    </div>


<script src="/static/jQuery-3.3.1.js"></script>
{% block js %}{% endblock %}

</body>
</html>

子版：一个子版仅有一个母版

{% extends 'layout.html' %}

{% block css %}
    <style>
        .hide {
            display: none;
        }
        .shadow {
            position: fixed;
            left:0;
            top:0;
            right:0;
            bottom:0;
            background-color: grey;
            opacity: 0.4;
            z-index: 999;
        }
        .modal1 {
            position: fixed;
            background-color: white;
            height: 300px;
            width: 400px;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -150px;
            z-index: 1000;
        }
    </style>
{% endblock %}


{% block commons %}
    <ol class="breadcrumb">
        <li><a href="#">首页</a></li>
        <li><a href="#">班级管理</a></li>
        <li class="active">添加班级</li>
    </ol>
<div>
    <a href="/add_class/"><button type="button" class="btn btn-success">添加</button></a>
    <a onclick="showModal();"><button type="button" class="btn btn-primary">模态框添加</button></a>
</div>
    <table border="1" class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th>id</th>
            <th>tittle</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
            {% for row in class_list %}
                <tr>
                    <td>{{ row.id }}</td>
                    <td>{{ row.tittle }}</td>
                    <td>
                        <a href="/edit_class/?nid={{ row.id }}"><i class="fa fa-pencil" aria-hidden="true"></i>编辑</a>
                        |
                         <a onclick="modelEdit(this);"><i class="fa fa-pencil-square-o" aria-hidden="true"></i>对话框编辑</a>
                        |
                        <a href="/del_class/?nid={{ row.id }}"><i class="fa fa-trash" aria-hidden="true"></i>删除</a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    <div id="shadow" class="shadow hide"></div>
    <div id="editModal" class="modal1 hide">
        <p>编辑班级：<input id="editTittle" type="text" name="'tittle">
            <input type="text" id="editId" name="id" style="display: none">
        </p>
        <input type="button" value="提交" onclick="editAjaxSend();">
        <input type="button" value="取消" onclick="Cancel();">
        <span style="color: red" id="error_msg"></span>
    </div>

    <div id="modal1" class="modal1 hide">
        <p>添加班级：<input id="tittle" type="text" name="'tittle"></p>
        <input type="button" value="提交" onclick="AjaxSend();">
        <input type="button" value="取消" onclick="Cancel();">
        <span style="color: red" id="error_msg"></span>
    </div>
{% endblock %}

{% block js %}
<script src="/static/jQuery-3.3.1.js"></script>
<script>
    function showModal() {
        document.getElementById('shadow').classList.remove('hide');
        document.getElementById('modal1').classList.remove('hide');
    }
    function Cancel() {
        document.getElementById('shadow').classList.add('hide');
        document.getElementById('modal1').classList.add('hide');
    }
    function AjaxSend() {
        $.ajax(
            {
                url:'/modal_add_class/',
                type:'POST',
                data:{'tittle':$('#tittle').val()},
                success:function (data) {
                    // 当服务端处理完成后，返回数据时，该函数自动调用
                    //data服务返回的值
                    console.log(data);
                    if(data == 'ok'){
                        location.href="/classes/"    //用js来跳转
                    }else{
                        $('#error_msg').text(data);
                    }

                }
            }
        )

    }

    function modelEdit(ths) {  //点击对话框编辑有什么操作
        document.getElementById('shadow').classList.remove('hide');
        document.getElementById('editModal').classList.remove('hide');
        /*1.获取当前点击标签
          2.当前标签父标签，再找其上方标签
          3.获取当前行班级名称，赋值到编辑对话框中
         */
        var row = $(ths).parent().prevAll();
        //console.log(row)   //w.fn.init(2)
        var content = $(row[0]).text();
        $('#editTittle').val(content);

        var contendId = $(row[1]).text();
        $('#editId').val(contendId);

    }
    function editAjaxSend() {
        var nid = $('#editId').val();
        var content = $('#editTittle').val();

        $.ajax({
            url:'/modal_edit_class/',
            type:'POST',
            data:{'nid':nid,'content':content},
            success:function (arg) {
                //arg字符串类型
                //JSON.parse(字符串) => 对象
                //JSON.stringify(对象) => 字符串
                arg = JSON.parse(arg);
                if(arg.status){
                    //location.href = '/class/'
                    location.reload()
                }else{
                    alert(arg.message)
                }
            }
        })

    }
</script>
{% endblock %}

子版继承母版

5）小组件

{% include 'pub.html' %}

组件pub.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>非常漂亮的小组件</h2>
<div class="title">标题：{{ title }}</div>
<div class="content">内容：{{ msg }}</div>
</body>
</html>

小组件的导入：可以导入多遍

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    {% include 'pub.html' %}
    {% include 'pub.html' %}
    {% include 'pub.html' %}
</body>
</html>

三、自定义函数，filter，和simple_tag

步骤：

a.在app中创建templatetags模块

b.创建任意的.py文件，如simple.py

from django import template    #导入模板

register = template.Library()  #硬性规定，不能掉

@register.filter              #加装饰器
def my_upper(value,arg1):
    return (value+arg1).upper()

@register.filter
def my_bool(value):
    if value == 'alex':
        return True
    else:
        return False

@register.simple_tag()
def add_string(arg1,arg2,arg3,arg4):
    return arg1+arg2+arg3+arg4

c.在使用自定义的html文件中导入之前创建的 simple.py 文件名和使用自定义的函数

{% load simple %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<h2>打印字符串</h2>
{{ msg | my_upper:'+egon'}}   把字体变大写

{% if msg|my_bool %}
    <h4>True</h4>
{% else %}
    <h4>False</h4>
{% endif %}

{% add_string msg ' and' ' egon' ' brother'%}   字符串拼接

</body>
</html>

d.在settings中配置当前app，不然django无法找到自定义的filter，和simple_tag

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app01.apps.App01Config',
]

总结：

-模板自定义函数：
-simple_filter
   -最多两个参数，方式： {{ 第一个参数|函数名称：“第二参数”}}
   -可以做条件判断
-simple_tag
  -无限制：{% 函数 参数1 参数2 参数3 }
  -不能作为件判断

posted on 2019-02-22 20:59 smile大豆芽阅读(92) 评论(0) 收藏举报