從零開始用 Flask 搭建一個網站（三）

我們從第一行開始來講解一下這個模板，第一句

從字面上可以明白這個模板繼承了 base.html 模板，使用 {% %} 是jinja2模板的語法，表示語句塊，還有一種分隔符 {{ }} ，表示變數，通常用來在模板上顯示。接下來是

可以看到也是比較容易理解的語法，block 後接一個 block name，表示一個塊開始的聲明，結束的時候用 {% end %} 即可。在塊中可以使用普通的 HTML 語法。

{{ super() }} 表示繼承父模板的塊聲明，這裡指繼承 base.html 中聲明的 head 塊。接下來是 css 和 js 文件的引用。此頁面使用了toastr來顯示通知，類似於 Android 中的 Toast，有興趣的可以了解一下它的詳細用法。

接下來是HTML代碼，有一個下拉輸入框和按鈕。

以上代碼就是下拉輸入框中的數據來源，用了一個for循環來遍歷 channels 列表，並且用 li 包裹每個元素，這也是模板常見的用法。channels 是在視圖函數中傳過來的。

auth/views.py

remder_template 的第二個參數表明，渲染這個 post2channel.html 頁面的時候，把以上所有的變數都傳遞到頁面中，這樣就可以使用 {{ }} 模板語法拿到。接下來回到 post2channel.html， 看到部分：

這是創建集成按鈕的邏輯，用 jQuery 的 ajax 發送 post 請求，以 json 格式將輸入框中的 channel 值傳到 url 表明的視圖函數。這裡的 url 是相對路徑。

在 ajax 中有 success 和 error 兩個函數，分別是請求成功和失敗的回調函數。下面看到這個請求的視圖函數，我們來看看視圖函數是如何處理從頁面傳過來的數據。

api_1_0/developers.py

以上代碼創建成功後也返回了一個 json，這樣在 success 的回調函數中就能得到這個數據，用於在跳轉到其他界面的時候做一些初始化操作。即以下代碼：

這裡將參數放到 url 中，調用了對應的視圖函數：

auth/views.py

推薦閱讀：