最近寫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>
<!-- 可以在頁面上向后端發(fā)送一個文件 -->
<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">
// 我們來讀取后端傳過來的數(shù)據(jù)
$("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數(shù)據(jù)，這里從后端獲取
return getData()
if __name__ == '__main__':
app.run()
好了，這個時候在瀏覽器輸入http://127.0.0.1:5000/，就會進入/默認的index.html了。
DONE
