寫在前面：

這篇文章，寫的比較倉促，先在此致歉。具體情況，可以直接看總結部分。

Flask是一個基於Python開發，依賴jinja2模板和Werkzeug WSGI服務的一個微型框架。Werkzeug用來處理Socket服務，其在Flask中被用於接受和處理http請求；Jinja2被用來對模板進行處理，將模板和資料進行渲染，返回給使用者的瀏覽器。

Bootstrap是由Twitter推出的一個用於前端開發的開源工具包，給予HTML、CSS、JavaScriot，提供簡潔、直觀、強悍的前端開發框架，是目前最受環境的前端框架。

前面一篇文章已經講到了，如何通過flask結合Bootstrap框架構建我們想要的html前端頁面。

那麼下面我們來講講，如何實現html頁面與後臺應用程式的聯動，這包括以下三個部分：

1. 前臺資料如何提交到後臺

2. 後臺資料如何在前端顯示

3. 按鈕功能對應後臺程式功能實現的一些方法

由於博主不是專門做這個的，所以下面的內容只是博主的一些理解和實際使用過程中的一些方法，並不能保證完全正確。

開始動手

1.如何將前臺頁面提交的資料傳遞到後臺

也就是說我們希望實現在html頁面中填寫的資料被後臺flask程式所獲取到

在這裡，我們使用的是在前臺通過表單提交資料，後臺獲取資料的方法來實現該功能

前臺HTML頁面如下：

{% extends "bootstrap/base.html" %}
{%- block head %}
<title>表單測試頁</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
{%- block styles %}
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
<!-- Bootstrap core CSS -->
<link href="static/css/bootstrap.min.css" rel="stylesheet">
{%- endblock styles %}
{%- endblock head %}
{% block body -%}
<form role="form" method="POST">
<div class="form-group">
<label for="name">名稱</label>
<input type="text" id="name" name="name" placeholder="請輸入名稱">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
{%- endblock body %}
 

實現頁面如下：

後臺程式如下：

@app.route('/form',methods = ['GET','POST'])
def hello_form():
if request.method == 'POST':
name=request.form.get('name')
print(name)
return render_template('form.html')
else:
return render_template('form.html')

這段程式實現的功能是，一開始瀏覽器請求/form這個相對URL時，採用的request method為get，此時返回form.html模板。

當在前臺頁面，點選提交按鈕時，觸發按鈕submit，進而觸發form定義的post提交資料的方法，這樣瀏覽器再次request /form這個相對URL時，採用的request method為POST，採用request.form.get()方法獲取與html文字中name欄位對應的值。此時我們可以看到在python程式的輸出中，name這個變數當前的值被列印了出來。   

WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [18/Nov/2018 01:11:16] "GET /form HTTP/1.1" 200 -
self_ip
127.0.0.1 - - [18/Nov/2018 01:11:19] "POST /form HTTP/1.1" 200 -
bbtest
127.0.0.1 - - [18/Nov/2018 01:16:39] "POST /form HTTP/1.1" 200 -

2.後臺資料如何在前端顯示

這個功能，也就是要求我們能夠將flask主程式，或其他python程式中，執行的變數，顯示在前臺的html頁面中

我們對之前的頁面，稍加修改

前臺程式碼如下：

修改後臺程式

@app.route('/form',methods = ['GET','POST'])
def hello_form():
if request.method == 'POST':
name=request.form.get('name')
print(name)
return render_template('form.html',name=name)
else:
return render_template('form.html')

讓我們嘗試一下，當我們在名稱的輸入欄中輸入bb時，頁面返回

可見，我們從前臺提交的資料，在被後臺獲取後，又通過前臺顯示了出來。實現了將後臺資料前臺展示的功能。

3.按鈕功能對應後臺程式功能實現的一些方法

我們繼續對我們的程式進行修改，修改如下：

def run():
print('Run!!!')

@app.route('/form',methods = ['GET','POST'])
def hello_form():
if request.method == 'POST':
name=request.form.get('name')
print(name)
return render_template('form.html',name=name,run=run())
else:
return render_template('form.html')

修改前臺頁面，增加一個執行按鈕：

前臺頁面呈現如下：

我們點選執行試一下，看一下flask輸出的結果：

* Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
* Debug mode: off
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [18/Nov/2018 01:37:23] "GET /form HTTP/1.1" 200 -

Run!!!

127.0.0.1 - - [18/Nov/2018 01:37:25] "POST /form HTTP/1.1" 200 -

可見，通過點選“執行”按鈕，實現了後臺對應程式的執行，滿足我們提出的要求。

總結

這篇文章，算是匆匆交差，一來是對每週一篇技術類博文更新這個承諾的兌現，二來也是給這一系列《flask結合bootstrap快速搭建web應用》文章的一個首尾。

最近博主在自主開發一個專案，在專案開發的過程中，越來越感覺到個人前臺相關技術能力的缺失。應付自己的需求尚不能滿足，要想滿足其他人的需求更是十分困難。一些功能雖然能夠勉強實現，但始終不是最優的解決方案。一些明明是可以在前臺就完成的功能，卻需要到後臺來，通過重新請求頁面來完成。尤其是Ajax，JavaScript等技術能力的確實，這對我理解一些問題的解決辦法時造成了很大的障礙。

由於以上種種原因，《flask結合bootstrap快速搭建web應用》文章暫時不再更新了，再更新下去也難免誤人子弟。

博主會爭取抽出時間，沉下心來學習前端所需的相關知識。等真的完全具備前端開發的能力，再來和大家講講~