【本文導讀】文中部分內容摘自網路，如有侵權行為請及時告知，文中有許多不妥之處，歡迎批評指正。主要內容：用flask建立的web框架，實現前端與後端的通訊；用ngrok建立的http對映通道，實現外網可見。
一、透過flask建立的web框架，實現前端與後端的通訊
（一）用flask框架搭建一個最簡單的python3程式
1、後端：python3程式：
# 匯入模組，pip install flask
from
flask
import
Flask
# 建立一個Flask類的例項app
app
=
Flask
（
__name__
）
# 裝飾器route（），http的根地址（/）被裝載為home函式
@app
。
route
（
“/”
）
# 定義被裝飾的函式home
def
home
（）：
# 將return中的資料返回給http客戶端
return
（
“Hello world！”
）
# 主程式
if
__name__
==
‘__main__’
：
# 執行app
app
。
run
（）
2、前端：在http客戶端輸入
http：//
127。0。0。1：5000/
即可顯示：Hello World！
（1）如果用本地電腦上的python3直譯器，預設host=“127。0。0。1”與port=5000，不用修改，瀏覽器地址如上。
（2）如果用虛擬機器上的python3直譯器，需修改host為“0。0。0。0”，port可以預設，瀏覽器地址如上。
（3）執行結果：啟動app，開啟瀏覽器。
用本地電腦上的python3直譯器，顯示結果如圖所示
用虛擬機器VBox上的python3直譯器，顯示結果如圖所示
3、用模板渲染HTML，搭建一個較完整的python3程式
（1）網站目錄結構：
/app。py
/templates
/index。html
/hello。html
/form。html
/signin-ok。html
（2）較完整的python3程式
# 匯入模組Flask，pip install flask
from
flask
import
Flask
# 匯入模組request
from
flask
import
request
# 匯入模板渲染模組
from
flask
import
render_template
# 建立一個Flask類的例項app
app
=
Flask
（
__name__
）
# 1、一個函式透過一個route（）裝飾器繫結到一個URL上
# 裝飾器route（），http的地址（/index）被裝載為index函式
@app
。
route
（
“/index”
）
# 定義被裝載的函式index
def
index
（）：
# 模板渲染index。html
return
render_template
（
“index。html”
）
# 2、一個帶引數函式透過多個route（）裝飾器繫結到多個URL上
# 裝飾器route（），http的地址（/hello）被裝載為hello函式
@app
。
route
（
“/hello”
）
# 裝飾器route（），http的地址（/hello/
@app
。
route
（
“/hello/
）
# 定義被裝載的函式hello，並帶有name引數
def
hello
（
name
=
None
）：
# 模板渲染hello。html
return
render_template
（
“hello。html”
，
name
=
name
）
# 3、透過request。form接收前端發來的資料
# 裝飾器route（），http的地址（/form）被裝載為signin_form函式
@app
。
route
（
“/form”
，
methods
=
［
“get”
］）
def
signin_form
（）：
return
render_template
（
“form。html”
）
# 裝飾器route（），http的地址（/form）被裝載為form函式
@app
。
route
（
“/form”
，
methods
=
［
“post”
］）
def
form
（）：
# 用request。form讀取前端表單資料：
username
=
request
。
form
［
“username”
］
password
=
request
。
form
［
“password”
］
（
“接收到的使用者名稱：”
，
username
）
（
“接收到的密碼：”
，
password
）
# 判斷使用者名稱（admin），密碼（password）
if
username
==
“admin”
and
password
==
“password”
：
# 判斷正確，登入成功
return
render_template
（
“sign-ok。html”
，
username
=
username
）
else
：
# 判斷錯誤，重新登入
return
render_template
（
“form。html”
，
message
=
“Bad username or password！重新登入”
，
username
=
username
）
# 主程式
if
__name__
==
‘__main__’
：
# 啟動app
app
。
run
（
host
=
‘0。0。0。0’
）
3、執行結果：
一個函式透過一個route（）裝飾器繫結到一個URL上
一個帶引數函式透過多個route（）裝飾器繫結到多個URL上
透過request。form接收前端發來的資料
二、透過ngrok建立的http對映通道，實現內網與外網的互動
1、啟動python程式：以最簡單的python3程式為例
2、啟動ngrok程式
（1）下載ngrok：在
https：//
ngrok。com/download
下載相應的版本，解壓到相應目錄。
（2）建立對映通道，在Windows的cmd命令框輸入：ngrok http 5000，建立埠對映。
3、開啟瀏覽器：在瀏覽器中輸入相應的對映地址，實現外網可見。
4、執行結果：如下圖所示
順序：啟動app，啟動ngrok，開啟瀏覽器
