填資料
首先在視圖函數view.py裡需要先寫好自己需要傳到前端的資料(如果你的資料是通過爬蟲擷取的,建議爬蟲函數也寫在view裡)
接下來就是在自己的頁面填入資料了,基本規則就是資料都包含在{{}}内,資料名就是你在view傳過來的那個鍵值對的鍵名,不管它是在标簽裡還是表情外,都是{{ 資料名 }}這種形式直接填入即可
示例如下:
我的view函數傳過去的資料如下:
context={
'SongID':SongID,
'SongInfo':SongInfo
}
return render(request,"searchapp/SongInfo.html",context=context)
我的前端的一個音樂播放器(這是填資料在标簽内的情況)
<iframe style="width: 400px; height: 100px;" class="centerH" frameborder="no" border="0" marginwidth="0" marginheight="0"
src="http://music.163.com/outchain/player?type=2&id={{ SongID }}&auto=1&height=100"></iframe>
音樂評論展示(填資料在标簽外的情況):
{% for nickname,avatar,content in SongInfo %}
<div class="row">
<div class="card mb-3" style="width: 100%;">
<div class="row no-gutters">
<div class="col-2" style="max-width: 70px;">
<img style="max-height: 70px; max-height: 70px;" src="{{ avatar }}" class="card-img">
</div>
<div class="col-md-10" style="max-height: 70px;">
<div class="card-body">
<p class="card-title" style="font-size: 20px; position: absolute; top: 0px;">{{ nickname }}</p>
<p class="card-text" style="font-size: 15px; position: absolute; bottom: 0px;">{{ content }}</p>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
填超連結
<li><a href="{% url 'book' id %}?name={{ book_name }}">源清單</a></li>