# midway-full-react **Repository Path**: pro_chen_y/midway-full-react ## Basic Information - **Project Name**: midway-full-react - **Description**: 基于 Midwayjs + Vite + Vike + React + Antd 的全栈开发实践 - **Primary Language**: NodeJS - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 15 - **Forks**: 0 - **Created**: 2023-12-16 - **Last Updated**: 2025-02-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: midwayjs, vite, Vike, React, Ant-Design ## README # Midway Full React > MidwayFull 是一个基于 Midwayjs + Vite + Vike + React + Antd 试验性的全栈项目,主要工作将围绕如何简化开发流程,快速开发一个B端应用而展开。 > MidwayFull 项目的灵感来自于 [Midway Hooks](https://midwayjs.org/docs/hooks/builtin-hooks), 通过 Midway Hooks 可动态生成前端可用的 API 模块, 有效缓解前后端对接中出现的协同问题,但美中不足的是, Midwayjs 没有提供成熟的前后端融合方案,例如在现有框架中引入 react 或 vue 等当下流行的前端架构,包括使用 development 与 production 两种模式。[Vite server-middlewaremode](https://cn.vitejs.dev/config/server-options.html#server-middlewaremode) 的出现,有效地解决了 node web 容器中(koa)启动前端框架的问题。 除此之外,[Vike][vike] 提供的基于 [Vite SSR](https://cn.vitejs.dev/guide/ssr.html) 方案能消除 SPA 的一些痛点,例如加载性能与 SEO,甚至是应用的响应速度。此外,得益于前后端融合,应用中可以更好地使用 Midway Security 组件来加固应用的安全性,例如 XSS 与 CSRF 防护。 > 当然也不能无限制地夸大全栈开发的好处,学习成本与无法分解的工作量,将使开发者感受到很大的工作压力。由于前后端的耦合,也大大降低了后端接口的可复用性,使得应用的横向拆分变得相对复杂。 > MidwayFull 在重新编译时会根据后端接口代码自动生成客户端调用代码(需要使用[Midwayjs Swagger组件](https://midwayjs.org/docs/extensions/swagger)),输出目录默认设置为 `web/.api` 与 `web/apis`。生成结果则基于 [OpenAPI 3.0](https://openapi.apifox.cn),[openapi-generator-cli 生成工具](https://github.com/OpenAPITools/openapi-generator-cli)。 ## 快速入门 如需进一步了解,参见以下链接: * [Midway 文档][midway] * [Midway ESModule使用指南][midway_esm] * [Vite 文档][vite] * [Vike 文档][vike] * [React18 文档][react18] * [Ant Design 5.0][antd5] ### 开发环境 * 不可缺省的安装 + 安装 Nodejs (>= 18.0) + 安装 typescript 与 ts-node, 可参考[typescript和ts-node的安装](https://www.jianshu.com/p/060d319cfe11) + 安装 MySQL, 详细内容参见 [mysql8_usage.zh-CN.md](./docs/mysql8_usage.zh-CN.md) + 安装 typeorm-model-generator, `npm i -g typeorm-model-generator` + 安装 openapi-generator-cli, 详细内容参见 [openapi_generator_usage.zh-CN.md](./docs/openapi_generator_usage.zh-CN.md) * 推荐安装 + 包管理工具推荐使用 pnpm (8.12.1) + IDE 推荐使用 Visual Studio Code (version 1.85.1) + 安装 vscode 插件: ESlint, Prettier ### 本地开发 ```bash # 安装依赖 建议使用 pnpm 安装 $ pnpm install ## 全栈开发模式 (存在缺陷) # 全栈开发可能存在前后端编译器冲突, 运行一段时间后,编辑代码时 tsc 进程会出现重复多次编译的情况 $ npm run dev ## 前端开发模式 # 后端以生产模式启动,前端则为开发模式,如果仅开发前端,请使用此命令 $ npm run dev:front # 默认地址 $ open http://localhost:7001/ ``` ### 部署 ```bash # 编译前后端代码 $ npm run build # 生产模式启动 $ npm start ``` ### 内置指令 - 使用 `npm run lint` 来做代码风格检查。 - 使用 `npm test` 来执行单元测试。 [midway]: https://midwayjs.org/docs/intro [midway_esm]: https://midwayjs.org/docs/esm [vite]: https://cn.vitejs.dev/guide/ [vike]: https://vike.dev/ [react18]: https://zh-hans.react.dev/ [antd5]: https://ant-design.antgroup.com/index-cn ## 框架与模块 > 正在更新中... 🎁