参考：https://blog.miguelgrinberg.com/post/how-to-create-a-react--flask-project
创建文档树
本项目会首先创建 react 项目，然后以 react 项目为骨干，添加一个放置 flask 相关文件的文件夹 api。
安装及创建 react 项目步奏见以前文章：安装 React 及创建 app。
完成后，手动添加 api 文件夹和 flask 相关文件。
完成后项目结构如下：
/react-app
/api # 放置 flask 相关文件
/venv # python 虚拟环境
/app.py
/node_modules
/public
/src
/index.js
/package.json
/package-lock.json
/README.md
编写 Flask API
# app,py
from flask import Flask
from flask_restful import Resource, Api
app = Flask(__name__)
api = Api(app)
class HelloWorld(Resource):
def get(self):
return {'content': 'hello world'}
api.add_resource(HelloWorld, '/api')
if __name__ == '__main__':
app.run(debug=True)
创建一个最简单的 flask 项目，用 flask_restful 构建一个只返回 {'content': 'hello world'} 的简单 API。
要使它运行，激活虚拟环境再运行即可：
$ venv\Scripts\activate
$ set FLASK_APP=app.py
$ flask run
打开 http://127.0.0.1:5000/api 即可看到该 API。
编写 React 前端代码
我们可以先把 src 文件夹自带的文件清空，新建一个 index.js 文件：
// index.js
import React from 'react';
import ReactDom from 'react-dom';
import axios from 'axios';
class HelloMessage extends React.Component {
state = {};
async componentDidMount() {
const promise = axios.get('/api');
const response = await promise;
this.setState({content: response.data.content});
console.log(response);
}
render() {
return <h1>{this.state.content}</h1>;
}
}
ReactDom.render(
<HelloMessage name="John" />,
document.getElementById('root')
);
这里我选择 axios 库来处理 AJAX；然后按照 react 的套路，拿到 API 的数据，改变 state，渲染成 HTML。
修改 React 配置
用 create-react-app 命令创建的 React 项目会生成一个包含项目配置的package.json 文件，修改配置在这个文件里进行。
因为 flask 项目默认在 5000 端口运行，而 react 项目默认在 3000 端口运行，两者结合后会因为跨域请求的问题而无法使用 AJAX 等。这里我们添加 react 的 proxy 字段来解决这个问题。
// package.json
{
... leave all other configuration options alone ...
"proxy": "http://localhost:5000"
}
启动项目
前后端分离以后我们需要两个命令窗口分别启动 flask 和 react 项目。
后端的启动见上文，前端启动：
$ npm start
如果使用了 yarn：
$ yarn start
网友评论