Flask React Boilerplate 项目教程

1. 项目目录结构及介绍

flask-react-boilerplate/
├── server/
│   ├── __init__.py
│   ├── config.py
│   ├── models.py
│   ├── routes.py
│   └── tests/
│       └── test_routes.py
├── src/
│   ├── components/
│   ├── containers/
│   ├── reducers/
│   ├── actions/
│   ├── store.js
│   ├── index.js
│   └── tests/
│       └── test_index.js
├── static/
│   ├── css/
│   ├── images/
│   └── js/
├── templates/
│   └── index.html
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── package.json
├── requirements.txt
├── webpack.config.js
└── yarn.lock

目录结构介绍

• server/: 包含 Flask 后端代码，包括应用初始化、配置、模型、路由和测试。
  • init.py: 应用初始化文件。
  • config.py: 应用配置文件。
  • models.py: 数据库模型定义。
  • routes.py: 应用路由定义。
  • tests/: 包含后端测试文件。
• src/: 包含 React 前端代码，包括组件、容器、Redux 相关文件和测试。
  • components/: 包含 React 组件。
  • containers/: 包含 React 容器组件。
  • reducers/: 包含 Redux reducer 文件。
  • actions/: 包含 Redux action 文件。
  • store.js: Redux store 配置文件。
  • index.js: React 应用入口文件。
  • tests/: 包含前端测试文件。
• static/: 包含静态资源文件，如 CSS、图片和编译后的 JavaScript 文件。
• templates/: 包含 HTML 模板文件。
• .gitignore: Git 忽略文件配置。
• .travis.yml: Travis CI 配置文件。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文件。
• package.json: 前端依赖管理文件。
• requirements.txt: 后端依赖管理文件。
• webpack.config.js: Webpack 配置文件。
• yarn.lock: Yarn 依赖锁定文件。

2. 项目启动文件介绍

后端启动文件

• server/init.py: 该文件包含 create_app 函数，用于创建 Flask 应用实例。启动后端服务时，通常会调用此函数。

前端启动文件

• src/index.js: 该文件是 React 应用的入口文件，负责渲染应用到 HTML 模板中。启动前端服务时，Webpack 会编译此文件并生成最终的 JavaScript 文件。

3. 项目配置文件介绍

后端配置文件

• server/config.py: 该文件包含应用的配置变量，包括开发、测试和生产环境的配置。配置文件中通常会定义数据库连接、密钥等信息。

前端配置文件

• webpack.config.js: 该文件是 Webpack 的配置文件，定义了如何打包前端资源。配置文件中通常会包含入口文件、输出路径、加载器和插件等配置。

• package.json: 该文件包含前端项目的依赖和脚本配置。通过 npm 或 yarn 安装依赖后，可以使用 npm run start 或 yarn start 启动开发服务器。

其他配置文件

• .gitignore: 定义了 Git 忽略的文件和目录。
• .travis.yml: 定义了 Travis CI 的构建和测试配置。
• requirements.txt: 定义了后端项目的依赖。

通过以上配置文件和启动文件，可以快速搭建并运行 Flask 和 React 项目。