這篇文章主要介紹Django如何實(shí)現(xiàn)將views.py中的數(shù)據(jù)傳遞到前端html頁(yè)面，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站專注于通川網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供通川營(yíng)銷型網(wǎng)站建設(shè)，通川網(wǎng)站制作、通川網(wǎng)頁(yè)設(shè)計(jì)、通川網(wǎng)站官網(wǎng)定制、微信小程序開(kāi)發(fā)服務(wù)，打造通川網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供通川網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

本文重點(diǎn)在于用實(shí)例來(lái)說(shuō)明views和html前臺(tái)頁(yè)面的傳遞。

1.打開(kāi)我的app，song03apptest下的views.py編寫views.py文件，代碼如下：

from django.shortcuts import render
 
# Create your views here.
def year(request):
  years = range(1997, 2018)
  return render(request, 'year_test.html', {"data":years})

2.配置urls.py，其中song03apptest為我的app名稱代碼如下：

from django.urls import path
from song03apptest import views
 
urlpatterns = [
  path('testyear/', views.year),
]

3.在templates下創(chuàng)建year_test.html，編寫頁(yè)面，內(nèi)容如下：

  
  


出生年月

  {% for year111 in data %}
  {{ year111 }}
  {% endfor %}

 

4.運(yùn)行服務(wù)器，并在瀏覽器中輸入http://127.0.0.1:8000/app03/testyear/，頁(yè)面展示如下：

點(diǎn)擊后可見(jiàn)在views.py中使用years = range(1997, 2018)生成的列表，頁(yè)面效果如下：

補(bǔ)充知識(shí)：Django views.py 和 html 之間參數(shù)傳遞關(guān)系

Django中的View部分，就是如何用代碼來(lái)與models中定義的字段進(jìn)行交互。與傳統(tǒng)MVC分層定義略有不同的是，在Django中，View的功能是對(duì)頁(yè)面請(qǐng)求進(jìn)行響應(yīng)和邏輯控制，而頁(yè)面內(nèi)容的表示則由Django的Template模板來(lái)完成。我們可以把Django的View理解為實(shí)現(xiàn)各種功能的Python函數(shù)，View負(fù)責(zé)接受URL配置文件urls.py中定義的URL轉(zhuǎn)發(fā)并響應(yīng)處理，當(dāng)Django收到請(qǐng)求之后調(diào)用相應(yīng)的View函數(shù)來(lái)完成功能，article模塊中的views.py文件代碼定義如下：

views.py代碼定義

from django.shortcuts import render_to_response  
from news.article.models import List  
 
def news_report(request):  
 article_listing = []  
 for article_list in List.objects.all():  
  article_dict = {}  
  article_dict['news_object'] = article_list  
  article_dict['item_count'] = article_list.item_set.count()  
  article_dict['items_title'] = article_list.title 
  article_dict['items_complete'] = article_list.item_set.filter(completed=True).count()  
  article_dict['percent_complete'] = 
    int(float(article_dict['items_complete']) / article_dict['item_count'] * 100)  
  article_listing.append(article_dict)  
 return render_to_response('news_report.html', { 'article_listing': article_listing })

這是一段簡(jiǎn)潔的Python代碼，讓我們看看在這段代碼里面Django的函數(shù)做了哪些工作吧：

List.objects.all方法返回news列表中所有的記錄項(xiàng)，Django可以根據(jù)后臺(tái)數(shù)據(jù)庫(kù)轉(zhuǎn)換成相應(yīng)的SQL語(yǔ)句，在后臺(tái)數(shù)據(jù)庫(kù)中執(zhí)行并返回查詢結(jié)果。

每一條article文章都有item_set屬性，代表news新聞條目中的每一個(gè)item項(xiàng)。如果需要設(shè)置查詢條件，也可以使用item_set.filter方法來(lái)返回符合特定要求的item項(xiàng)。

render_to_response函數(shù)返回瀏覽器指定的HTML頁(yè)面，頁(yè)面為Django的Template模板，負(fù)責(zé)展示被請(qǐng)求的頁(yè)面內(nèi)容。

在view部分的代碼中，已經(jīng)指定了頁(yè)面顯示模板為news_report.html。其實(shí)，在Django工程中創(chuàng)建模板是一件非常方便的事情，下面要在article目錄內(nèi)創(chuàng)建這個(gè)模板頁(yè)面，首先新建一個(gè)名為templates的文件夾，然后在這個(gè)模板目錄里創(chuàng)建所需的news_report.html模板文件，模板的代碼如下：

news_report模板代碼

< html>  
 < head>  
  < meta http-equiv="Content-Type" content="text/html" />  
  < title>新聞統(tǒng)計(jì)列表< /title>  
 < /head>  
 < body>  
  < h2>新聞統(tǒng)計(jì)列表< /h2>  
{% for list_dict in article_listing %}  
  < ul>  
   < li>新聞的分類: {{ list_dict.items_title }}< /li>  
   < li>新聞的數(shù)目: {{ list_dict.item_count }}< /li>  
   < li>已發(fā)布的新聞數(shù)目:  
      {{ list_dict.items_complete }} ({{ list_dict.percent_complete }}%)< /li>  
  < /ul>  
{% endfor %}  
 < /body>  
< /html>

一般來(lái)說(shuō)，Django的模板代碼和普通的HTML代碼看上去沒(méi)有太大差別，只是添加了Django特定的模板標(biāo)記，這些標(biāo)記允許開(kāi)發(fā)者為Django模板添加頁(yè)面邏輯，比方說(shuō)將views.py中render_to_response函數(shù)返回的數(shù)據(jù)庫(kù)結(jié)果集顯示在頁(yè)面中，Django特有的標(biāo)簽在模板頁(yè)里以“{%”作為開(kāi)始并以“%}”作為結(jié)束。嵌入Django模板的變量則以“{{”作為開(kāi)始并以“}}”結(jié)束。

在上面的模板代碼里面，用到了標(biāo)記{% for news_dict in article_listing %}以及{% endfor %}。這樣的標(biāo)記告訴Django模板處理機(jī)制循環(huán)取出news中的item項(xiàng)輸出在頁(yè)面中，在for循環(huán)內(nèi)部，通過(guò)article_listing的屬性得到View中對(duì)應(yīng)的數(shù)據(jù)項(xiàng)字段的值并顯示每個(gè)news項(xiàng)的Title標(biāo)題以及news中的item項(xiàng)數(shù)目。

當(dāng)Django的View和Template都已經(jīng)準(zhǔn)備妥當(dāng)，下面僅需要幾步配置來(lái)告訴Django存儲(chǔ)工程應(yīng)用的模板位置，這需要對(duì)配置文件setting.py中的TEMPLATE_DIRS項(xiàng)進(jìn)行設(shè)置。在本例中加入模板文件"news_report.html"的存儲(chǔ)路徑就可以讓Django把對(duì)View進(jìn)行處理的結(jié)果集通過(guò)指定模板返回。按照本例應(yīng)用的結(jié)構(gòu)，TEMPLATE_DIRS參數(shù)的內(nèi)容設(shè)置為：

'./article/templates',

這里不要忘記Django需要在路徑的最末尾添加一個(gè)逗號(hào)。接下來(lái)僅需要設(shè)置訪問(wèn)article時(shí)的URL轉(zhuǎn)向地址就可以。打開(kāi)urls.py文件，在admin后臺(tái)管理的轉(zhuǎn)向地址下一行添加如下語(yǔ)句：

(r'^report/$', 'news.article.views.news_report'),

在這里語(yǔ)段的最末尾，也需要有逗號(hào)標(biāo)記段落的結(jié)束。在這里可以看到，Django的URL轉(zhuǎn)發(fā)設(shè)計(jì)的非常簡(jiǎn)潔，在配置文件urls.py中對(duì)應(yīng)于view的轉(zhuǎn)發(fā)請(qǐng)求都由兩部分組成，第一部分遵循正則表達(dá)式指定相匹配的URL地址，第二部分是對(duì)應(yīng)在View里面處理轉(zhuǎn)發(fā)請(qǐng)求的函數(shù)。

完成了這些步驟，就可以在命令提示符下再次啟動(dòng)Django服務(wù)器，看一下上述努力的成果了，在瀏覽器中打開(kāi)鏈接http://127.0.0.1:8000/report/，將會(huì)看到新聞列表的返回界面。頁(yè)面中顯示了數(shù)據(jù)庫(kù)中已添加所有新聞的分類統(tǒng)計(jì)信息。值得一提的是，Django模板支持多層嵌套，并且每一層都可以使用DIV+CSS方式完成布局，可以方便的讓站點(diǎn)頁(yè)面遵循統(tǒng)一風(fēng)格，看起來(lái)美觀大方。

在上述整個(gè)過(guò)程中，對(duì)使用Django進(jìn)行Web開(kāi)發(fā)進(jìn)行了初步的介紹。在應(yīng)用中寫的Python代碼不過(guò)幾十行，比較起來(lái)其他的開(kāi)發(fā)語(yǔ)言，Django顯得非常便捷實(shí)用，最后再來(lái)回顧一下Django都幫助我們做了哪些工作吧：

通過(guò)Django的對(duì)象關(guān)系映射模型建立了存儲(chǔ)新聞分類以及新聞項(xiàng)的兩張數(shù)據(jù)表，并用syncdb命令同步更新到數(shù)據(jù)庫(kù)。

借助Django的管理功能在應(yīng)用中生成了一個(gè)漂亮實(shí)用的后臺(tái)管理界面。

利用Django函數(shù)和標(biāo)簽編寫了view功能模塊以及顯示數(shù)據(jù)結(jié)果的Template模板。

以上是“Django如何實(shí)現(xiàn)將views.py中的數(shù)據(jù)傳遞到前端html頁(yè)面”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章名稱：Django如何實(shí)現(xiàn)將views.py中的數(shù)據(jù)傳遞到前端html頁(yè)面-創(chuàng)新互聯(lián)
鏈接地址：http://weahome.cn/article/dchhig.html