python进阶:flaskweb框架实现前后端传送信息及ngrok实现外网可见

498 阅读3分钟
原文链接: zhuanlan.zhihu.com

【本文导读】文中部分内容摘自网络,如有侵权行为请及时告知,文中有许多不妥之处,欢迎批评指正。主要内容:用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/<name>)被装载为hello函数
@app.route("/hello/<name>")
# 定义被装载的函数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"]
    print("接收到的用户名:",username)
    print("接收到的密码:",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,打开浏览器