# 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

## 框架与模块

> 正在更新中... 🎁