模闆标簽
在傳遞資料的時候,會有大量的資料展示在浏覽器上,而資料會是動态變化的,在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樣式有過調整,請忽略樣式
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>
輸出的結果為:
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>
輸出結果為:
簡單擷取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>
輸出結果:
點選序列為1的網址顯示:
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>
輸出結果
模闆的繼承
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