Flask 學習筆記之:傳入參數與字典,渲染動態網頁

動態網頁非“動感”

值得強調的是,不要將動態網頁和頁面內容是否有動感混爲一談。
所謂“動態”,並不是指放在網頁上的GIF圖片,動態網頁技術有以下幾個特點:

  1. “交互性”,即網頁會根據用戶的要求和選擇而動態改變和響應,將瀏覽器作爲客戶端界面,這將是今後WEB發展的大勢所趨.
  2. “自動更新”,即無須手動地更新HTML文檔,便會自動生成新的頁面,可以大大節省工作量.
  3. “因時因人而變”,即當不同的時間,不同的人訪問同一網址時會產生不同的頁面。

何爲模板

模板其實是一個包含響應文本的文件,其中用佔位符(變量)表示動態部分,告訴模板引擎其具體的值需要從使用的數據中獲取。

使用模板的好處:

  1. 視圖函數只負責業務邏輯和數據處理(業務邏輯方面)
  2. 而模板則取到視圖函數的數據結果進行展示(視圖展示方面)
  3. 代碼結構清晰,耦合度低

光說不見假把式,我們來從代碼裏看看啥是模板,佔位符又在哪裏:
在這裏插入圖片描述
這就是一個模板網頁的一部分,可以看到裏面有幾個{{ }},這些東東括起來幾個變量,這個就是佔位符了,雙花括號中的變量就是渲染是要提供的參數。
(當然不同的動態網頁對於佔位符和變量的要求和錶帶形式不同,這裏我們只瞭解 flask所配套的jinja2渲染引擎)

jinja2渲染引擎

Jinja2是什麼?
Jinja2 是 Python 下一個被廣泛應用的模板引擎,是由Python實現的模板語言,他的設計思想來源於 Django 的模板引擎,並擴展了其語法和一系列強大的功能,其是Flask內置的模板語言。
使用真實值替換變量,再返回最終得到的字符串,這個過程稱爲“渲染”。

jinja2的模板常見用法

在jinja2中,存在三種語法:

控制結構 :{% %}
變量取值: {{ }}
註釋 :{# #}
所有的語法語句都必須按要求套上這些括號和字符,才能被jinja2識別到。
jinja2中的變量替換:

var run_time_c = {{sys_run_time}};

渲染的時候sys_run_time的值將會被換到這裏,
利用了變量替換給js賦初值。

jinja2中的if語句:

{% if page_column == 'welcome' %}
<h1>歡迎</h1>
{% endif %}

在 page_column的值爲’welcome’的時候,if中的部分將會被渲染。

jinja2中的for循環:

用於迭代Python的數據類型,包括列表,元組和字典。
在jinja2中不存在while循環。

迭代列表

<ul>
{% for user in users %}
<li>{{ user.username|title }}</li>
{% endfor %}
</ul>

迭代字典

<dl>
{% for key, value in my_dict.iteritems() %}
<dt>{{ key }}</dt>
<dd>{{ value}}</dd>
{% endfor %}
</dl>

一起來試一試它

在網頁部分,我們已經知道要怎麼做了,那麼在flask中應該如何操作呢?簡單!

第一個例子:
前端:

<div class="login_bottom_left"></div>
		<div class="login_fotter">
      <span class="mac_span" id="sys_run_time"> </span>
			<span class="mac_span" >MAC地址:{{sys_info['mac_addr']}}</span>
			<span class="mac_span">IP地址:{{sys_info['ip_addr']}}</span>
			<span class="software_version_span">系統版本號:{{sys_info['sys_version']}}</span>
	  </div>

後端:

def create_sys_info():
    sys_info_dict = {'sys_version': 'V0.1', 'ip_addr': '', 'mac_addr': '','sys_run_time': '','device_type': 'A1'}
    sys_info_dict['ip_addr']=my_ip_addr
    sys_info_dict['mac_addr']=my_mac_addr
    sys_info_dict['sys_run_time']=str(get_sys_run_sec())
    return sys_info_dict

........
;這裏省略了一些代碼
........
return render_template("login.html",sys_info=create_sys_info())

這裏將create_sys_info函數返回的字典直接傳入,然後由jinja2去負責填充元素
傳入字典這種方法尤其適合傳入數量較多但能夠歸大類的信息(就像我這裏的系統信息)
是十分常用並且有用的。

第二個例子:

前端:

{% if login_status == "PWD_ERR" %}
<script language="JavaScript" type="text/javascript">
	alert("管理員密碼錯誤,請重新輸入");
</script>
{% endif %}

後端:

 return render_template("login.html",sys_info=create_sys_info(),login_status="PWD_ERR")

當用戶輸入了錯誤的密碼,我們可以用這種方式傳回一個一開始就調用了錯誤提示框的網頁回去,可以以這種方式通知用戶,
——————————————————————————
END
歡迎大家關注,點贊哦,您的支持是我加速更新和爲您寫出更好文章的動力!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章