所有例子代碼均來(lái)自于Flask的 7fca843b5f 版本
為了學(xué)習(xí)flask框架，我決定開(kāi)始學(xué)習(xí)flask在GitHub上給出的官方example來(lái)熟悉flask的使用方法，在此版本中包含blueprintexample，flaskr，jqueryexample，minitwit這四個(gè)例子，今天分析的是jqueryexample這個(gè)例子。
什么是jqueryexample？
正如名字所說(shuō)，這是一篇jquery和flask結(jié)合使用的說(shuō)明。想必jquery(官網(wǎng), 快速教程)本身是什么我就不用綴述了。
它是javascript世界里赫赫有名的庫(kù)。應(yīng)該是使用最廣的庫(kù)之一（另外一個(gè)有力競(jìng)爭(zhēng)者是prototype），它以對(duì)于DOM的便捷操作而著稱。
開(kāi)始分析
這個(gè)demo展示了一個(gè)非常簡(jiǎn)單的例子，利用簡(jiǎn)單的文本輸入框，實(shí)現(xiàn)一個(gè)正數(shù)加法的簡(jiǎn)單網(wǎng)頁(yè)。
首先，我們來(lái)簡(jiǎn)單看一下這個(gè)例子的文件結(jié)構(gòu)。
jqueryexample/
templates/
index.html
layout.html
jqueryexample.py
算上模板，總共也只有3個(gè)文件。
首先，來(lái)看一下jqueryexample.py這個(gè)文件。
from flask import Flask, jsonify, render_template, request
app = Flask(__name__)
這兩行代碼主要完成了兩個(gè)工作：從flask引入必要項(xiàng)以及在flask上注冊(cè)一個(gè)app實(shí)例。
接下來(lái)，就是路由的定義和處理部分。
@app.route('/_add_numbers')
def add_numbers():
a = request.args.get('a', 0, type=int)
b = request.args.get('b', 0, type=int)
return jsonify(result=a + b)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run()
可以看到這里定義了兩個(gè)路由，一個(gè)指向了根路徑 '/' ，處理機(jī)制很簡(jiǎn)單，直接返回index.html頁(yè)面，另一個(gè)指向了 '/_add_numbers' 路徑，從request請(qǐng)求所帶的參數(shù)里獲取a和b，返回兩者相加的值。
之后，當(dāng)這個(gè)py文件被直接執(zhí)行的時(shí)候，運(yùn)行這個(gè)app。
接下來(lái)，來(lái)看一下index這個(gè)頁(yè)面
這里有兩個(gè)待輸入框，當(dāng)輸入合法的正數(shù)的時(shí)候，等號(hào)后面的問(wèn)號(hào)會(huì)被正確的計(jì)算結(jié)果所替代。需要注意的是，這個(gè)計(jì)算過(guò)程用到的是 jquery 這個(gè)庫(kù)，這也就是這個(gè)demo名字的由來(lái)。
同時(shí)，這個(gè)頁(yè)面應(yīng)該也可以解釋我們的另一個(gè)疑惑：
** '/_add_numbers' 這個(gè)頁(yè)面里的參數(shù)a和b是怎樣獲取的？ **
答案是，在這個(gè)頁(yè)面輸入兩個(gè)數(shù)字，一個(gè)被命名為參數(shù)a，而另一個(gè)則是參數(shù)b，默認(rèn)情況下，頁(yè)面會(huì)立即調(diào)用jquery計(jì)算出結(jié)果，并顯示在頁(yè)面上。然而，當(dāng)你點(diǎn)擊下面那個(gè) calculate server side 的鏈接的時(shí)候，頁(yè)面便請(qǐng)求到 '/_add_numbers' 頁(yè)面，即攜帶兩個(gè)參數(shù)a,b傳參到route handler進(jìn)行計(jì)算，并返回一個(gè)json結(jié)果。
舉個(gè)例子：當(dāng)你在頁(yè)面中分別輸入3和4的時(shí)候，可以看到以下界面：
可以看到，此時(shí)頁(yè)面上出現(xiàn)了正確的計(jì)算結(jié)果，而url始終是 http://localhost:5000/ 所以，這一切計(jì)算過(guò)程均沒(méi)有flask的參與，而都在jquery部分就完成的處理和顯示。
當(dāng)我們點(diǎn)擊藍(lán)色超鏈接部分的時(shí)候，頁(yè)面路由通過(guò)ajax發(fā)送請(qǐng)求到 '/_add_numbers?a=3&b=4'
可以看到根據(jù)GET方法的要求，這里將參數(shù)拼接到了url的尾部，而此時(shí)我們可以手動(dòng)輸入 '/_add_numbers?a=3&b=4' 來(lái)看一下flask返回的結(jié)果是什么樣子:
{
"result": 7
}
可以看到，flask通過(guò)json 格式將計(jì)算結(jié)果返回給jquery，以便其處理顯示。
總結(jié)
我認(rèn)為這個(gè)例子有以下幾個(gè)要點(diǎn)：
- 將部分簡(jiǎn)單計(jì)算任務(wù)轉(zhuǎn)到前端的思想
- flask返回?cái)?shù)據(jù)類型的方法和格式(這里用到的是json )
- GET方法傳參的方法
