前端為什么要使用模板？怎樣創(chuàng)建和調(diào)用模板？

更新時(shí)間:2021-09-14 來(lái)源:黑馬程序員瀏覽量:

IT培訓(xùn)班

如何向請(qǐng)求者返回一個(gè)漂亮的頁(yè)面呢？肯定需要用到html、css，如果想要更炫的效果還要加入js，問(wèn)題來(lái)了，這么一堆字段串全都寫(xiě)到視圖中，作為HttpResponse()的參數(shù)嗎？這樣定義就太麻煩了吧，因?yàn)槎x字符串是不會(huì)出任何效果和錯(cuò)誤的，如果有一個(gè)專(zhuān)門(mén)定義前端頁(yè)面的地方就好了
解決問(wèn)題的技術(shù)來(lái)了：模板。在Django中，將前端的內(nèi)容定義在模板中，然后再把模板交給視圖調(diào)用，各種漂亮、炫酷的效果就出現(xiàn)了

創(chuàng)建模板：
為應(yīng)用booktest下的視圖index創(chuàng)建模板index.html，目錄結(jié)構(gòu)如下圖：

創(chuàng)建和調(diào)用模板

'DIRS': [os.path.join(BASE_DIR, 'templates')],

創(chuàng)建和調(diào)用模板

定義模板

打開(kāi)templtes/booktest/index.html文件，定義代碼如下在模板中輸出變量語(yǔ)法如下，變量可能是從視圖中傳遞過(guò)來(lái)的，也可能是在模板中定義的

{{變量名}}

在模板中編寫(xiě)代碼段語(yǔ)法如下

{%代碼段%}

定義模板內(nèi)容如下

<html>
<head>
    <title>圖書(shū)列表</title>
</head>
<body>
<h1>{{title}}</h1>
{%for i in list%}
{{i}}<br>
{%endfor%}
</body>
</html>

視圖調(diào)用模板

調(diào)用模板分為三步驟：
1.找到模板2.定義上下文3.渲染模板
打開(kāi)booktst/views.py文件，調(diào)用上面定義的模板文件。

#coding:utf-8

from django.http import HttpResponse
from django.template import loader,RequestContext

def index(request):
    # 1.獲取模板
    template=loader.get_template('booktest/index.html')
    # 2.定義上下文
    context=RequestContext(request,{'title':'圖書(shū)列表','list':range(10)})
    # 3.渲染模板
    return HttpResponse(template.render(context))

打開(kāi)瀏覽器刷新頁(yè)面，顯示效果如下圖

創(chuàng)建和調(diào)用模板

視圖調(diào)用模板簡(jiǎn)寫(xiě)

視圖調(diào)用模板都要執(zhí)行以上三部分，于是Django提供了一個(gè)函數(shù)render封裝了以上代碼
方法render包含3個(gè)參數(shù)
第一個(gè)參數(shù)為request對(duì)象
第二個(gè)參數(shù)為模板文件路徑
第三個(gè)參數(shù)為字典，表示向模板中傳遞的上下文數(shù)據(jù)打開(kāi)booktst/views.py文件，調(diào)用render的代碼如下

#coding:utf-8

from django.shortcuts import render

def index(request):
    context={'title':'圖書(shū)列表','list':range(10)}
    return render(request,'booktest/index.html',context)

猜你喜歡：

如何制作HTML模板？[web前端培訓(xùn)]

寫(xiě)出jQuery鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)方法【前端面試題】

textarea控件創(chuàng)建文本輸入框

margin重合問(wèn)題及解決方式

黑馬程序員前端與移動(dòng)開(kāi)發(fā)課程

上一篇：小烏龜svn使用教程【黑馬程序員】 下一篇： flex布局原理是什么？有哪些常見(jiàn)子項(xiàng)屬性？