溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Django如何實現(xiàn)將views.py中的數(shù)據(jù)傳遞到前端html頁面

發(fā)布時間:2021-05-14 10:22:50 來源:億速云 閱讀:257 作者:小新 欄目:開發(fā)技術

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

本文重點在于用實例來說明views和html前臺頁面的傳遞。

1.打開我的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,編寫頁面,內容如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<label for="byear">出生年月</label>
<select name="byear">
  {% for year111 in data %}
  <option value="{{ year111}}">{{ year111 }}</option>
  {% endfor %}
</select>
 
</body>
</html>

4.運行服務器,并在瀏覽器中輸入http://127.0.0.1:8000/app03/testyear/,頁面展示如下:

Django如何實現(xiàn)將views.py中的數(shù)據(jù)傳遞到前端html頁面

點擊后可見在views.py中使用years = range(1997, 2018)生成的列表,頁面效果如下:

Django如何實現(xiàn)將views.py中的數(shù)據(jù)傳遞到前端html頁面

補充知識:Django views.py 和 html 之間參數(shù)傳遞關系

Django中的View部分,就是如何用代碼來與models中定義的字段進行交互。與傳統(tǒng)MVC分層定義略有不同的是,在Django中,View的功能是對頁面請求進行響應和邏輯控制,而頁面內容的表示則由Django的Template模板來完成。我們可以把Django的View理解為實現(xiàn)各種功能的Python函數(shù),View負責接受URL配置文件urls.py中定義的URL轉發(fā)并響應處理,當Django收到請求之后調用相應的View函數(shù)來完成功能,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[&apos;news_object&apos;] = article_list  
  article_dict[&apos;item_count&apos;] = article_list.item_set.count()  
  article_dict[&apos;items_title&apos;] = article_list.title 
  article_dict[&apos;items_complete&apos;] = article_list.item_set.filter(completed=True).count()  
  article_dict[&apos;percent_complete&apos;] = 
    int(float(article_dict[&apos;items_complete&apos;]) / article_dict[&apos;item_count&apos;] * 100)  
  article_listing.append(article_dict)  
 return render_to_response(&apos;news_report.html&apos;, { &apos;article_listing&apos;: article_listing })

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

List.objects.all方法返回news列表中所有的記錄項,Django可以根據(jù)后臺數(shù)據(jù)庫轉換成相應的SQL語句,在后臺數(shù)據(jù)庫中執(zhí)行并返回查詢結果。

每一條article文章都有item_set屬性,代表news新聞條目中的每一個item項。如果需要設置查詢條件,也可以使用item_set.filter方法來返回符合特定要求的item項。

render_to_response函數(shù)返回瀏覽器指定的HTML頁面,頁面為Django的Template模板,負責展示被請求的頁面內容。

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

news_report模板代碼

< html>  
 < head>  
  < meta http-equiv="Content-Type" content="text/html" />  
  < title>新聞統(tǒng)計列表< /title>  
 < /head>  
 < body>  
  < h2>新聞統(tǒng)計列表< /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>

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

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

當Django的View和Template都已經(jīng)準備妥當,下面僅需要幾步配置來告訴Django存儲工程應用的模板位置,這需要對配置文件setting.py中的TEMPLATE_DIRS項進行設置。在本例中加入模板文件"news_report.html"的存儲路徑就可以讓Django把對View進行處理的結果集通過指定模板返回。按照本例應用的結構,TEMPLATE_DIRS參數(shù)的內容設置為:

&apos;./article/templates&apos;,

這里不要忘記Django需要在路徑的最末尾添加一個逗號。接下來僅需要設置訪問article時的URL轉向地址就可以。打開urls.py文件,在admin后臺管理的轉向地址下一行添加如下語句:

(r&apos;^report/$&apos;, &apos;news.article.views.news_report&apos;),

在這里語段的最末尾,也需要有逗號標記段落的結束。在這里可以看到,Django的URL轉發(fā)設計的非常簡潔,在配置文件urls.py中對應于view的轉發(fā)請求都由兩部分組成,第一部分遵循正則表達式指定相匹配的URL地址,第二部分是對應在View里面處理轉發(fā)請求的函數(shù)。

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

在上述整個過程中,對使用Django進行Web開發(fā)進行了初步的介紹。在應用中寫的Python代碼不過幾十行,比較起來其他的開發(fā)語言,Django顯得非常便捷實用,最后再來回顧一下Django都幫助我們做了哪些工作吧:

通過Django的對象關系映射模型建立了存儲新聞分類以及新聞項的兩張數(shù)據(jù)表,并用syncdb命令同步更新到數(shù)據(jù)庫。

借助Django的管理功能在應用中生成了一個漂亮實用的后臺管理界面。

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

以上是“Django如何實現(xiàn)將views.py中的數(shù)據(jù)傳遞到前端html頁面”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內容。

AI