首頁技術(shù)文章正文

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

更新時間:2021-09-14 來源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

如何向請求者返回一個漂亮的頁面呢？肯定需要用到html、css，如果想要更炫的效果還要加入js，問題來了，這么一堆字段串全都寫到視圖中，作為HttpResponse()的參數(shù)嗎？這樣定義就太麻煩了吧，因為定義字符串是不會出任何效果和錯誤的，如果有一個專門定義前端頁面的地方就好了
解決問題的技術(shù)來了：模板。在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)用模板

定義模板

打開templtes/booktest/index.html文件，定義代碼如下在模板中輸出變量語法如下，變量可能是從視圖中傳遞過來的，也可能是在模板中定義的

{{變量名}}

在模板中編寫代碼段語法如下

{%代碼段%}

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

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

視圖調(diào)用模板

調(diào)用模板分為三步驟：
1.找到模板2.定義上下文3.渲染模板
打開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':'圖書列表','list':range(10)})
    # 3.渲染模板
    return HttpResponse(template.render(context))

打開瀏覽器刷新頁面，顯示效果如下圖

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

視圖調(diào)用模板簡寫

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

#coding:utf-8

from django.shortcuts import render

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







猜你喜歡：

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

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

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

margin重合問題及解決方式

黑馬程序員前端與移動開發(fā)課程

分享到：
在線咨詢 我要報名
和我們在線交談！