天天看點

python的Web架構,模闆标簽及模闆的繼承

模闆标簽

在傳遞資料的時候,會有大量的資料展示在浏覽器上,而資料會是動态變化的,在html的編寫中,資料也是需要動态的,而不能是寫死的,如果動态展示呢。

給定的例子資料

views傳遞資料給html

1 from django.shortcuts import render
 2 
 3     def index(request):
 4         
 5         students = [
 6             {'id':12, 'name':'張三', 'age':19, 'sex':'男'}
 7             {'id':22, 'name':'李思', 'age':19, 'sex':'女'}
 8             {'id':25, 'name':'王五', 'age':19, 'sex':'男'}
 9             {'id':43, 'name':'趙柳', 'age':19, 'sex':'女'}
10             {'id':88, 'name':'孫奇', 'age':19, 'sex':'男'}
11         ]
12         
13         return render(request,'teacher/index.html',context={
14             'students':students,
15         })      
for循環标簽
1    <body>
 2         <table>
 3             <tr>
 4                 <th>序列</th>
 5                 <th>姓名</th>
 6                 <th>年齡</th>
 7                 <th>性别</th>
 8             </tr>
 9             
10             <!--#for循環寫在{% %} 内-->
11             {% for stu in students %}
12                 <tr>
13                     <!--#把循環疊代的資料,用可以取出值即可-->
14                     <td>{{ stu.id}}</td>
15                     <td>{{ stu.name }}</td>
16                     <td>{{ stu.age }}</td>
17                     <td>{{ stu.sex }}</td>
18                 </tr>
19             <!--#結尾需要end-->
20             {% endfor %}
21         </table>
22     </body>      

輸出的結果為: css樣式有過調整,請忽略樣式 

python的Web架構,模闆标簽及模闆的繼承
forloop:序号排列
1 <body>
 2         <table>
 3             <tr>
 4                 <th>從1開始的正向排序</th>
 5                 <th>從0開始的正向排序</th>
 6                 <th>以1結尾的倒序</th>
 7                 <th>以0結尾的倒序</th>
 8             </tr>
 9             {% for stu in students %}
10                 <tr>
11                     <!--序号排列各式樣式-->
12                     <td>{{ forloop.counter}}</td>
13                     <td>{{ forloop.counter0 }}</td>
14                     <td>{{ forloop.revcounter }}</td>
15                     <td>{{ forloop.revcounter0 }}</td>
16                 </tr>
17             {% endfor %}
18         </table>
19     </body>      

輸出的結果為: 

python的Web架構,模闆标簽及模闆的繼承
if:if判斷
1 <body>
 2         <table>
 3             <tr>
 4                 <th>從1開始的正向排序</th>
 5                 <th>從0開始的正向排序</th>
 6                 <th>以1結尾的倒序</th>
 7                 <th>以0結尾的倒序</th>
 8             </tr>
 9             {% for stu in students %}
10             
11                 <!--if判斷和for循環一樣,也有結尾的endif,條件寫在中間。-->
12                 == 兩頭需要空格
13                 <tr {% if stu.sex == '女' %}style="color:red"{% endif %}>
14                     <td>{{ forloop.counter}}</td>
15                     <td>{{ stu.name }}</td>
16                     <td>{{ stu.age }}</td>
17                     <td>{{ stu.sex }}</td>
18                 </tr>
19             {% endfor %}
20         </table>
21     </body>      

輸出結果為: 

python的Web架構,模闆标簽及模闆的繼承
簡單擷取url

views簡單配置點選id所展示的頁面

1     def st_id(request, pk):
2         return HttpResponse('學生ID為%s的詳情頁' % pk)      

對序号設定點選的跳轉url

1  <body>
 2         <table>
 3             <tr>
 4                 <th>從1開始的正向排序</th>
 5                 <th>從0開始的正向排序</th>
 6                 <th>以1結尾的倒序</th>
 7                 <th>以0結尾的倒序</th>
 8             </tr>
 9             {% for stu in students %}
10                 <tr {% if stu.sex == '女' %}style="color:red"{% endif %}>
11                 
12                     <!--因為要點選url,所有把标簽放在a标簽内,在路徑的配置上,寫上路徑然後把字典中的id做動态比對就會得到需要的id。-->
13                     <td><a href="/teacher/st_id/{{ stu.id }}">{{ forloop.counter}}</a></td>
14                     <td>{{ stu.name }}</td>
15                     <td>{{ stu.age }}</td>
16                     <td>{{ stu.sex }}</td>
17                 </tr>
18             {% endfor %}
19         </table>
20     </body>      

輸出結果: 

python的Web架構,模闆标簽及模闆的繼承

點選序列為1的網址顯示:

python的Web架構,模闆标簽及模闆的繼承
url标簽:動态擷取url,傳回一個命名(views中path裡面的name的值)了的URL的絕對路徑
1 <body>
 2         <table>
 3             <tr>
 4                 <th>從1開始的正向排序</th>
 5                 <th>從0開始的正向排序</th>
 6                 <th>以1結尾的倒序</th>
 7                 <th>以0結尾的倒序</th>
 8             </tr>
 9             {% for stu in students %}
10                 <tr {% if stu.sex == '女' %}style="color:red"{% endif %}>
11                     
12                     通過url标簽,動态生成對應的url網址,此處的'teacher:st_id'
13                     **需要在views中配置其中的path的name,name和此處的value需要一一對應。**
14                     <td><a href="{% url 'teacher:st_id' stu.id %}">{{ forloop.counter}}</a></td>
15                     <td>{{ stu.name }}</td>
16                     <td>{{ stu.age }}</td>
17                     <td>{{ stu.sex }}</td>
18                 </tr>
19             {% endfor %}
20         </table>
21     </body>      
for in empty 判斷空置渲染預設的
1 {% for i in stu%}
2 <!--#如果for循環的渲染失敗,則渲染empty内的條件-->
3 {% empty %}
4     <!--渲染方法-->
5 
6 {% emdfor %}      
with:類似于as

第一種寫法:

1 {% with stu=students.2%}
2     stu就可以拿出來使用了
3 {% endwith %}      

第二種寫法

1 {% with test_name as tn %}
2     1111{{ tn }}
3     2222{{ tn }}
4 {% endwith %}      
autoescape 轉義開關 同過濾器的safe
1 {% autoescape off %}
2     {{ html }} 
3 {% endautoescape %}      

模闆的引入

include 模闆的引入,把寫好的html模闆添加到我們需要的html中,在html代碼中添加

1 <div>
2     {% include 'teacher/ad.html' %}
3 </div>      

輸出結果 

python的Web架構,模闆标簽及模闆的繼承

模闆的繼承

extends繼承标簽:extends代買寫在html的最上面,首行,在此行下面的代碼無效。

被引入的内容寫在block中

1     <!--在html中繼承模闆檔案-->
2     {% extends 'teacher/base.html'%}      
block自定義标簽:在模闆html中挖坑

base模闆檔案.html

1  預設寫css的坑
 2     {% block link%}
 3     {% endblock %}
 4 
 5     <!--預設寫body的地方-->
 6     {% block conrent(自定義名稱) %}
 7     
 8         <!--如果被引入的html,如果沒有寫這個标簽,就預設展示模闆内的資料,如果有,就展示目前html的内容資料。-->
 9         <p>模闆内的資料</p>
10     {% endblock %}
11     
12     <!--預設底部定義寫js的坑-->
13     {% block domready %}
14     {% endblock %}      

被引入的html檔案,css,js,html代碼都是此種方法寫入。對應上面的模闆

1 {% extends 'teacher/base.html'%}
 2     {% load static %}
 3     
 4     {% block link %}
 5     帶入css代碼
 6     <link rel="stylesheet" href="{% static 'teacher/css/login.css' %}">
 7     {% endblock %}
 8     
 9     {% block conrent %}
10         <p>我是被展示的資料</p>
11     {% endblock %}
12     
13     {% block domready %}
14         <script>JS代碼</script>
15     {% endblock %}      

總結:

模闆标簽文法:           
1     {% tag %} {% endtag %} 需要結束收尾的
2     
3     {% tag 參數 參數 %} 例如 url