Django之模板渲染
阿新 • • 發佈：2017-06-23
web spa django stat 原生 oda alert 數據顯示 splay 
前言
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之模板渲染