最近写python时用到了Flask做服务器进行前后端的交互，用一个Demo做个简单的总结。
- 用html做个前端的页面
<html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<head>
<title>FlaskDemo</title>
</head>
<body>
<!-- 可以在页面上向后端发送一个文件 -->
<form method="post" action="http://localhost:5000/req" enctype="multipart/form-data">
<input name="file" type="file"></input>
<input type="submit"></input></form>
<p>
一段文本
<b id="text"></b>
</p>
<script type="text/javascript">
// 我们来读取后端传过来的数据
$("document").ready(function () {
$.getJSON("http://localhost:5000/getinfo", (data, status, xhr) => {
// 通过id获取页面元素并赋值
console.log(data.text)
$("#text").text(data.text);
})
});
</script>
</body>
</html>
- 写个简单的后端
import json
def getData():
data = {}
data["text"] = "do.py里的一个文本"
return json.dumps(data)
- 引入Flask框架
from flask import Flask
from flask import request
import webbrowser
import os
from do import getData
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def home():
# 这里获取页面
return open("index.html", "r").read()
@app.route('/req', methods=['post'])
def re():
# 前端上传的文件可以这样接收到
files = request.files['file']
# handle files……
print(files)
return open("index.html", "r").read()
@app.route('/getinfo', methods=['GET'])
def getInfo():
# 获取一个json数据，这里从后端获取
return getData()
if __name__ == '__main__':
app.run()
好了，这个时候在浏览器输入http://127.0.0.1:5000/，就会进入/默认的index.html了。
DONE
网友评论