一，下载flask
pip install flask
使用数据源下载
pip install flask -i 数据源地址
例如：pip install flask -i https://pypi.tuna.tsinghua.edu.cn/simple
清华大学
https://pypi.tuna.tsinghua.edu.cn/simple
阿里云
https://mirrors.aliyun.com/pypi/simple/
豆瓣
https://pypi.douban.com/simple/
华为云
https://mirrors.huaweicloud.com/repository/pypi/simple/
腾讯云
https://mirrors.cloud.tencent.com/pypi/simple/
1.2 flask相关模块下载
pip install flask-cors
Flask-Cors是一个优秀的解决跨域问题的Python库。 Flask-Cors是Flask扩展库中的一员,其主要功能是为Flask应用程序提供轻松解决跨域请求的功能。
pip install flask-sqlalchemy
Flask-SQLAlchemy 是一个为 Flask 应用增加 SQLAlchemy 支持的扩展。它致力于简化在 Flask 中 SQLAlchemy 的使用。
二，前后端代码使用
python代码如下：
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app, resources={r"/test/*": {"origins": "*"}})
@app.route('/test',methods=['GET'])
def hello_world(): # put application's code here
return 'Hello World!'
if __name__ == '__main__':
app.run()
前端代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.css">
</head>
<body class="container">
<button type="button" class="btn btn-outline-primary" id="b">按钮</button>
<script src="jquery/jquery-3.5.1.js"></script>
<script src="jquery/jquery-3.5.1.min.js"></script>
<script src="bootstrap-4.6.2-dist/js/bootstrap.js"></script>
<script src="bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
<script>
$('#b').click(function () {
$.ajax({
url: "http://127.0.0.1:5000/test",
type: "GET",
// data:'{name: ''}',
// contentType:"application/json",
// dataType:json,
success: function(data) {
console.log(data);
}
});
});
</script>
</body>
</html>
前端页面点击按钮即可访问后台flask服务
三，关于跨域
3.1使用CORS函数（全局配置跨域）
3.1.1应用全局配置
# 使用
from flask_cors import CORS
app = Flask(__name__)
#使用CORS函数跨域
cors = CORS(app, resources={r"/api/*": {"origins": "*"}})
@app.route("/api/v1/users")
def list_users():
return "user example"
3.1.2单独Blueprints配置
# 使用
from flask_cors import CORS
#使用CORS函数跨域
api_v1 = Blueprint('API_v1', __name__)
CORS(api_v1)
@api_v1.route("/api/v1/users/")
def list_users():
return "user example"
3.1.3CORS参数说明
- resources：全局配置允许跨域的API接口
- origins：配置允许跨域访问的源，*表示全部允许
- methods：配置跨域支持的请求方式，如：GET、POST
等等.........
3.2使用@cross_origin装饰器（局部跨域）
#使用
from flask_cors import cross_origin
app = Flask(__name__)
@app.route('/test',methods=['GET'])
#使用cross_origin装饰器
@cross_origin()
def hello_world():
return 'Hello World!'
装饰器中的参数与CORS一致。
