前端模組總結

技術：flask框架、sse和gevent

下面的示意圖可以看出客戶端，伺服器，wsgi，程式之間的關係。

gevent.pywsgi.wsgiserver() 初始化函式：

socket使用教程：

flask 的教程：

1、render_template

不僅能渲染靜態的html檔案，也能傳遞引數給html，使乙個html模板根據引數的不同顯示不同的內容，這是因為flask使用了jinja2這個模板引擎。要使用模板，在render_template引數中以key=value形式傳入變數，在html中使用}來顯示傳入的變數，例如：

# 檢視函式
def index():
return render_template('index.html', contents='this is index page')
# html

瀏覽器顯示的結果與上文是一樣的。我們還可以直接把乙個類的例項傳遞過去，並在模板中訪問類的屬性，例如假設乙個類物件obj有a和b屬性，關鍵部分的**如下：

# 檢視函式中
return render_template('index.html', object=obj)
...# html中
a: }
b: }

傳入乙個字典也可以，並且在模板中既可以用dict[key]，也可以用dict.key。

使用過濾器，可以在html中對傳入的變數進行處理，其格式是}，例如將前文的}修改為}，瀏覽器顯示的內容就變成了：

所以我們可以很容易就理解，過濾器其實就是以變數為引數的函式，返回處理後的結果，在後端一樣可以先用字串物件的upper()函式處理好再傳遞給模板，效果是完全一樣的。jinja2自帶了一些過濾器，例如length/reverse/lower等等，並且我們也可以自己按照需求自定義過濾器，模板還支援}這樣的操作。想要深入了解的話，可以搜尋jinja2過濾器去進一步學習。

模板中還可以使用if else和for in控制語句，與變數使用}不同，控制語句要放在裡，例如前文的contents傳入乙個list：

contents=[i for i in range(10)]

html中**如下：

使用for遍歷contents的內容，並用}顯示出來，同時還用加了乙個注釋，還要注意需要使用來提示迴圈區域的結束，因為html不像python那樣通過縮進來判斷迴圈的區域，if也是同理。瀏覽器顯示結果：

最後for和if結合使用：

}是偶數
}是奇數

結果如下（只是演示一下，不要吐槽排版和美觀）：

前端模組總結

前端模組化方案總結

前端模組化的一些總結

前端程式設計題模組

前端模組總結

前端模組化方案總結

前端模組化的一些總結

前端程式設計題 模組

相關推薦

前端程式設計題模組