首页 > 代码库 > Django之模板渲染

Django之模板渲染

2024-10-10 20:00:39   209人阅读

前言

Django的工作流程

1、客户端发送请求到达 URL
2、URL把客户端请求转发给请求函数
3、视图函数 使用原生SQL或者ORM去数据库拿到数据 和模板（HTML文件）二者进行渲染（模板+数据）
4、return 返回给客户端

在使用WEB框架时 把数据库、程序生成 的数据显示在前端，就需要在后台把此类数据填充进HTML中进而return给用户展示；（这种交融行为。。。。被淫王雅称 模板渲染 ）

（模板渲染就 是数据加工，这个工作是在服务端完成后  return给前端的）

 

 

一、模板中的特殊标记：

 

1、数据

{{ 视图函数传入的参数 }} 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>{{args}}</p>
<p>{% url "zhangge" i i1%}</p>
</body>
</html>

 

列表取值：{{列表}}.索引取值

{{users.0}} {{users.1}}

 

字典取值：{{字典}}.键

<td>{{ row.id }}</td>

 

2、Django模板标记，还支持流程控制哦！

 for循环 

{% for row in list %}
       </tr>
          <td>{{ row.id }}</td>
          <td>{{ row.name }}</td>
          <td>{{ row.title }}</td>
          <td><a href="#" onclick="show_modal(this)">添加</a></td>
          <td id="del_s"><a href="#" onclick="modal_del(this)">删除</a> </td>
          <td><a href="#"onclick="modal_edit(this)">编辑</a></td>
         </tr>

     {% endfor %}

if else条件判断

<select name="class_id" id="">
         {% for row in dict %}
             {% if row.id == name1.class_id %}
                <option selected value="{{ row.id }}">{{ row.title}}</option>
             {%else%}
                 <option value="{{ row.id }}">{{ row.title}}</option>
             {%endif%}
         {% endfor %}
     </select>

 

in 成员关系判断

  <p>任教课程：
            <select name="class_id" multiple size="5">
                {% for row in clas %}
                    {% if row.id in cids%}
                            <option selected value={{ row.id}}>{{ row.title}}</option>
                    {%else%}
                             <option value={{ row.id}}>{{ row.title}}</option>
                    {% endif %}
                {% endfor %}
            </select>
         </p>

 

 

二、母版渲染

在母版定义块，子版继承母版的block和子版形成包含的关系;  (原来开发个网站这么 煎蛋，套别写好的母版呗！)

加载时：把母版拿过来替换子版在进行渲染；

 

1、在母版定义内容：

<html lang="en">


<head>
{% block css %}
</head>


<body>
{% block xx %}
</body>

 

{% block js %}
</html>                   酱紫每个子版就可以延伸出自己的 css 、内容、JS；

 

 

2、子版使用母版中定义的 block

技术分享 
{%extends ‘layout.html‘%}

<!DOCTYPE html>
<html lang="en">
<head>
    {%block css %}
    <meta charset="UTF-8">
    <title>多对多</title>
    <script src="/static/zhanggen.js"></script>
    <style>
        .shadow{
            position: fixed;
            left: 0;
            right: 0;
            top:0;
            bottom: 0;
            background-color: black;
            opacity: 0.8;
            z-index: 999;
        }

        .modal2{
            width: 400px;
            height: 300px;
            z-index: 1000;
            margin-left: 420px;
            margin-top: 50px;
            background-color:silver;
        }
     .haid{
         display: none;
     }


    </style>
{% endblock css %}
</head>

<body>
{%block xx %}
<table cellspacing="15">
<th>ID</th><th>老师姓名</th><th>任教班级</th><th colspan="3">操作</th>
{% for row in list %}
    <tr>
         <td>{{ row.tid }}</td>
         <td>{{ row.tname }}</td>
         <td>
         {% for ri in row.titles %}
              {{ri}}
           {% endfor %}
         </td>
         <td><a href="#" onclick="return add(this)">添加</a></td> <td><a href="/modal_edit/?tid={{row.tid }}">
        编辑</a></td> <td><a href="/modal_del/?tid={{ row.tid }}">删除</a>
    </tr>
{% endfor %}
</table>

<div id="1" class="shadow haid ">
    <div class="modal2">
         <p>老师姓名：<input id="tname" type="text"></p>
         <p>任教班级：
            <select id="2" multiple="multiple">
                {% for row in class_list %}
                    <option value="{{ row.id }}">{{ row.title }}</option>
                {% endfor %}
            </select>
         </p>
        <input id="3" type="button" value="提交">
        <input id="4" type="button" value="取消">


    </div>
</div>
{%endblock xx %}
</body>

{% block js %} }
 <script>
    function add(self) {
        $("#1").removeClass("haid")
        $(‘#4‘).click(function () {
            location.reload()
        })
        $(‘#3‘).click(function () {
            class_id=$(‘#2‘).val()
            name=$("#tname").val()
{#            console.log(name=$("#tname").val())#}
            $.ajax({
                url:"/modal_add/",
                type:‘POST‘,
                data:{"cid":class_id,"tname":name},
{#                不加 traditiona jQuery会对列表进行特殊处理#}
                traditional:true,
                dataType:‘JSON‘,
                success:function(data){
                     if (data.status==true){location.reload()}
                     else {alert(data.status);location.reload()}
                }
{#                    if (data==‘OK‘){location.reload()}}#}
            })

        })
        return  false
    }

</script>
{% endblock js %}
</html>
View Code

 

Django之模板渲染


联系
我们