摘要：從零開(kāi)始用搭建一個(gè)網(wǎng)站二介紹了有關(guān)于數(shù)據(jù)庫(kù)的運(yùn)用，接下來(lái)我們?cè)谕晟埔幌聰?shù)據(jù)在前端以及前端到后端之間的交互。在中有和兩個(gè)函數(shù)，分別是請(qǐng)求成功和失敗的回調(diào)函數(shù)。作者極光為極光團(tuán)隊(duì)賬號(hào)，歡迎關(guān)注原文從零開(kāi)始用搭建一個(gè)網(wǎng)站三知乎專(zhuān)欄極光日?qǐng)?bào)

從零開(kāi)始用 Flask 搭建一個(gè)網(wǎng)站（二） 介紹了有關(guān)于數(shù)據(jù)庫(kù)的運(yùn)用，接下來(lái)我們?cè)谕晟埔幌聰?shù)據(jù)在前端以及前端到后端之間的交互。本節(jié)涉及到前端，因此也會(huì)講解一下 jinja2 模板、 jQuery 、 ajax 等用法。

下面我們來(lái)創(chuàng)建兩個(gè)界面，一個(gè)可以新建 channel ，并顯示，另一個(gè)可以創(chuàng)建 integration ，并且可以綁定一個(gè)之前創(chuàng)建的 channel 。

post2channel.html

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

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

{% endblock %}

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

...

我們從第一行開(kāi)始來(lái)講解一下這個(gè)模板，第一句

{% extends "base.html" %}

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

{% block head %}

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

接下來(lái)是 HTML 代碼，有一個(gè)下拉輸入框和按鈕。

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

以上代碼就是下拉輸入框中的數(shù)據(jù)來(lái)源，用了一個(gè) for 循環(huán)來(lái)遍歷 channels 列表，并且用 li 包裹每個(gè)元素，這也是模板常見(jiàn)的用法。 channels 是在視圖函數(shù)中傳過(guò)來(lái)的。

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 的第二個(gè)參數(shù)表明，渲染這個(gè) post2channel.html 頁(yè)面的時(shí)候，把以上所有的變量都傳遞到頁(yè)面中，這樣就可以使用 {{ }} 模板語(yǔ)法拿到。接下來(lái)回到 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("服務(wù)器異常");                
      }            
    },            
      error: function (error) {                
        console.log(error);                
        toastr.error("創(chuàng)建失敗");            
      },            
      dataType: "json"        
    })    
  }
})

這是創(chuàng)建集成按鈕的邏輯，用 jQuery 的 ajax 發(fā)送 post 請(qǐng)求，以 json 格式將輸入框中的 channel 值傳到 url 表明的視圖函數(shù)。這里的 url 是相對(duì)路徑。在 ajax 中有 success 和 error 兩個(gè)函數(shù)，分別是請(qǐng)求成功和失敗的回調(diào)函數(shù)。下面看到這個(gè)請(qǐng)求的視圖函數(shù)，我們來(lái)看看視圖函數(shù)是如何處理從頁(yè)面?zhèn)鬟^(guò)來(lái)的數(shù)據(jù)。

api_1_0/developers.py

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

以上代碼創(chuàng)建成功后也返回了一個(gè) json ，這樣在 success 的回調(diào)函數(shù)中就能得到這個(gè)數(shù)據(jù)，用于在跳轉(zhuǎn)到其他界面的時(shí)候做一些初始化操作。即以下代碼：

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

這里將參數(shù)放到 url 中，調(diào)用了對(duì)應(yīng)的視圖函數(shù)：

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())

可以看到上面的參數(shù)就是從 post2channel 頁(yè)面?zhèn)鬟^(guò)來(lái)的，并且還從數(shù)據(jù)庫(kù)中查詢(xún)到對(duì)應(yīng)的 integration ，然后將相關(guān)數(shù)據(jù)傳到 create.html ，讓后者渲染頁(yè)面。

我們通過(guò)一個(gè)例子看到數(shù)據(jù)在前端和后端、前端之間的交互?？偨Y(jié)一下，無(wú)非就是在前端頁(yè)面中發(fā)送請(qǐng)求，然后在視圖函數(shù)中操作數(shù)據(jù)庫(kù)，并且返回相關(guān)數(shù)據(jù)，回調(diào)到前端頁(yè)面中，最后在回調(diào)中調(diào)用另一個(gè)視圖函數(shù)，在跳轉(zhuǎn)頁(yè)面時(shí)利用得到的數(shù)據(jù)渲染頁(yè)面。一切就是這么簡(jiǎn)單，沒(méi)什么黑魔法！源碼在 github 上。下一節(jié)介紹一下 flask_oauthlib 的用法，學(xué)習(xí)一下如何使用 oath2 第三方授權(quán)登錄以及調(diào)用提供方的相關(guān) API 。

作者： KenChoi - 極光（ JPush 為極光團(tuán)隊(duì)賬號(hào)，歡迎關(guān)注）

原文：從零開(kāi)始用 Flask 搭建一個(gè)網(wǎng)站（三）

知乎專(zhuān)欄：極光日?qǐng)?bào)