准备工作
简介
- React - 用于构建用户界面的 JavaScript 库。
- Flask - 一个使用 Python 编写的轻量级 Web 应用框架。
环境
- Windows10
- Python3.9.7
- pip21.2.4
- npm6.14.8
- VSCode
项目结构
├── app.py
├── env
| ├── Include
| ├── Lib
| ├── LICENSE.txt
| ├── Scripts
| └── tcl
├── frontend
| ├── build
| ├── node_modules
| ├── package-lock.json
| ├── package.json
| ├── public
| ├── README.md
| └── src
├── static
| └── js
└── templates
| └── index.html
└── requirements.txt
后端——Flask
项目开发依赖使用 virtualenv+pip
管理。
# 1、安装virtualenv
pip install virtualenv
# 2、为项目(Flask_React)创建虚拟环境->env
virtualenv env
# 3、激活虚拟环境env
./env/Scripts/activate
# 4、安装项目依赖
pip install -r requirements.txt
# 5、创建好templates和static目录,用于存放React打包好的渲染模板和静态文件
mkdir templates
mkdir static
requirements.txt
Flask==2.0.2
后端服务的基础环境好了,写个路由,看下能不能跑通。
# app.py
from flask import Flask
app = Flask(__name__)
@app.route('/')
def index():
return "<h1>Hello React+Flask!</h1>"
if __name__ == '__main__':
app.run('127.0.0.1', port=5000, debug=True)
前端——React
前端 React 应用的开发环境使用官方提供的脚手架
create-react-app
搭建。
# 1、安装脚手架
npm install -g create-react-app
# 2、为Flask_React项目创建React App->frontend
create-react-app frontend
前端开发环境已经搭建完成,清理掉 src
目录下的所有文件,自己写个组件,如下:
cd frontend/src
del *
创建 index.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
render() {
return (
<p>Hello World!!!</p>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'))
npm start
预览效果。
build
方法一
create-react-app
封装好了 Babel
和 webpack
,我们可以直接使用 npm run build
打包写好的 App 到 frontend/build
目录中。然后手动将生成的文件分别挪到 Flask 的 templates
和 static
目录中即可。
当然,我们可以使用 CLI 自动完成。npm 允许我们在 package.json
文件里面,使用 scripts
字段自定义脚本命令。更舒服的是 npm script
提供了 pre
和 post
钩子。我们可以给 build
脚本命令提供两个钩子 prebuild
和 postbuild
。编辑后的 package.json
文件的 Script 命令如下:
"scripts": {
"start": "react-scripts start",
"prebuild": "del ..\\templates\\index.html && rmdir /s ..\\static",
"build": "react-scripts build",
"postbuild": "move build\\index.html ..\\templates\\ && move build\\static ..",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
这时候,我们执行 npm run build
命令时,会自动按照下面的顺序执行
del ..\\templates\\index.html && rmdir /s ..\\static
react-scripts build
move build\\index.html ..\\templates\\ && move build\\static ..
最后,修改下 app.py
:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html') # 渲染打包好的React App的页面
if __name__ == '__main__':
app.run('127.0.0.1', port=5000, debug=True)
方法二
直接修改 app.py
如下:
from flask import Flask
app = Flask(__name__, static_folder='my-app/build', static_url_path='/')
@app.route('/')
def index():
return app.send_static_file('index.html')
static_folder
告诉 Flask 静态文件夹在哪里。默认情况下,这是一个静态目录,位于应用程序所在的同一目录中。我们可以将其更改为指向build
。static_url_path
告诉 Flask 所有静态文件的 URL 前缀是什么。默认情况下这是/static
。我们可以将其更改为根 URL,这样我们就不需要在每个静态文件前面加上/static
。
创建文件 .flaskenv
FLASK_APP=app.py
FLASK_ENV=development
pip
安装 python-dotenv
pip install python-dotenv
运行 npm run build
和 flask run
npm run build
flask run
参考
- React+Flask打造前后端分离项目开发环境 - 2020-07-06
- 如何部署 React + Flask 项目 - 2020-3-29