react + flask web应用开发-前后端结合

react部分

在react项目目录中执行npm run build，进行源码编译，会在当前目录生成build目录，

build目录结构如下：

flask部分

需要在flask项目的工作目录增加两个目录static template，mkdir static template

前后端结合

1、将demo目录中生成的build的目录下的index.html 拷贝到website目录的template目录下
cp demo/build/index.html website/template/
2、将demo目录中生成的build的目录下的所有文件 拷贝到website目录的static目录下
cp -rf demo/build/* website/static/
3、修改website中的hello.py 增加网页相关信息，修改后内容如下：

import os
from flask import Flask, render_template
os.chdir(os.getcwd())
app = Flask(__name__, template_folder="./template", static_folder="./static/static")

@app.route('/hi')
def hello_world():
    return 'Hello, World!'

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == "__main__":
    app.run(host='127.0.0.1', port=8080)

参数解释
Flask(name, template_folder=“./template”, static_folder=“./static/static”)
name：应用包的名字
template_folder：相对当前文件的template目录路径
static_folder：相对当前文件的包含css文件的static目录路径

修改后website目录结构如下

demo运行

启动flask应用，python3 hello.py
浏览器打开地址，可以查看到如下网页，应用启动成功。