摘要：從零開始用搭建一個網站二介紹了有關于數據庫的運用，接下來我們在完善一下數據在前端以及前端到后端之間的交互。在中有和兩個函數，分別是請求成功和失敗的回調函數。作者極光為極光團隊賬號，歡迎關注原文從零開始用搭建一個網站三知乎專欄極光日報

從零開始用 Flask 搭建一個網站（二） 介紹了有關于數據庫的運用，接下來我們在完善一下數據在前端以及前端到后端之間的交互。本節涉及到前端，因此也會講解一下 jinja2 模板、 jQuery 、 ajax 等用法。

下面我們來創建兩個界面，一個可以新建 channel ，并顯示，另一個可以創建 integration ，并且可以綁定一個之前創建的 channel 。

post2channel.html

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block head %}    
{{ super() }}    
    
    
    
    

{% endblock %}

{% block title %}極光寶盒-創建集成{% endblock %}
{% block navbar %}    
    
{{ super() }}
{% endblock %}

...

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

{% extends "base.html" %}

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

{% block head %}

可以看到也是比較容易理解的語法， block 后接一個 block name ，表示一個塊開始的聲明，結束的時候用 {% end %} 即可。在塊中可以使用普通的 HTML 語法。{{ super() }} 表示繼承父模板的塊聲明，這里指繼承 base.html 中聲明的 head 塊。接下來是 css 和 js 文件的引用。此頁面使用了 toastr 來顯示通知，類似于 Android 中的 Toast ，有興趣的可以了解一下它的詳細用法。

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

    
  {% for channel in channels %}        
    
{{ channel }}
    
  {% endfor %}

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

auth/views.py

@auth.route("/new/post_to_channel", methods=["GET"])
def post_to_channel():    
  developer = get_developer()    
  dev_key = developer.dev_key    
  channels = get_channel_list()    
  return render_template("auth/new/post2channel.html", **locals())

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

$("#create_integration_btn").click(function () {    
  var channel = $("#selected_channel").val();   
  console.log("create integration, channel: " + channel);    
  if (channel != "") {        
    $.ajax({            
    type: "POST",            
    contentType: "application/json; charset=utf-8",            
    url: "../../v1/developers/{{ dev_key }}/integrations",            
    data: JSON.stringify({channel: channel}),            
    success: function (data) {                
      if (data != undefined) {                    
        if (data["token"]) {                       
          window.location.href = "/auth/manage/create_integration/" + data["integration_id"] + "/" + data["token"] + "/" + channel                    
        }                
      } else {                    
        toastr.error("服務器異常");                
      }            
    },            
      error: function (error) {                
        console.log(error);                
        toastr.error("創建失敗");            
      },            
      dataType: "json"        
    })    
  }
})

這是創建集成按鈕的邏輯，用 jQuery 的 ajax 發送 post 請求，以 json 格式將輸入框中的 channel 值傳到 url 表明的視圖函數。這里的 url 是相對路徑。在 ajax 中有 success 和 error 兩個函數，分別是請求成功和失敗的回調函數。下面看到這個請求的視圖函數，我們來看看視圖函數是如何處理從頁面傳過來的數據。

api_1_0/developers.py

# 添加一個集成，并返回 integration_id ，如果 channel 已存在，直接綁定該 channel ， 否則新建一個 channel@api.route("/developers//integrations", methods=["POST"])
def create_integrations(dev_key):
# 先判斷一下傳過來的 json 數據是否符合要求
  if not request.json or not "channel" in request.json:    
    print("request json error")    
    abort(400)
#從數據庫得到 developer
  developer = Developer.query.filter_by(dev_key=dev_key).first()
  if developer is None:    
    print("developer not found")    
    abort(400)
  #以下省略
  ...
  #最后返回相關數據
  return jsonify({"integration_id": new_integration_id,                
                  "token": token.decode("utf-8")}), 201

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

if (data != undefined) { 
  if (data["token"]) { 
    window.location.href = "/auth/manage/create_integration/" + data["integration_id"] + "/" + data["token"] + "/" + channel 
  } 
}

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

auth/views.py

@auth.route("/manage/create_integration///", methods=["GET", "POST"])
def create_integration(integration_id, token, channel):    
  integration = Integration.query.filter_by(integration_id=integration_id).first()    
  channels = get_channel_list()    
  developer = get_developer()    
  dev_key = developer.dev_key    
  return render_template("auth/create.html", **locals())

可以看到上面的參數就是從 post2channel 頁面傳過來的，并且還從數據庫中查詢到對應的 integration ，然后將相關數據傳到 create.html ，讓后者渲染頁面。

我們通過一個例子看到數據在前端和后端、前端之間的交互。總結一下，無非就是在前端頁面中發送請求，然后在視圖函數中操作數據庫，并且返回相關數據，回調到前端頁面中，最后在回調中調用另一個視圖函數，在跳轉頁面時利用得到的數據渲染頁面。一切就是這么簡單，沒什么黑魔法！源碼在 github 上。下一節介紹一下 flask_oauthlib 的用法，學習一下如何使用 oath2 第三方授權登錄以及調用提供方的相關 API 。

作者： KenChoi - 極光（ JPush 為極光團隊賬號，歡迎關注）

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

知乎專欄：極光日報