5.通用 CRUD 项目操作手册2023-11-17

6.基于正则表达式的批量文本替换操作手册2023-11-21 7.自动生成接口文档操作手册2023-11-25

前言

本操作手册旨在通过列出通用 CRUD 项目的复用流程的待办清单的形式，方便后续实现复用

操作手册

通用 CRUD 项目复用流程

预备工作

项目拉取

cd ~/Project
mkdir xxx-backend
git init
git pull https://github.com/Ba11ooner/stateful-backend.git
git checkout -b xxx-backend

cd ../
mkdir xxx-backend-frontend
git init
git pull https://github.com/Ba11ooner/stateful-backend-frontend.git
git checkout -b xxx-backend-frontend

数据库初始化
- 建库
- 建表
  注意事项：受技术栈限制，如果不采用以下的额外约束，可能会出现奇怪 Bug
  - 为每一个表都单独增加一个 id 自增主键，方便删除
  - 通过业务控制而非外键控制数据库表之间的属性约束
    即保证 Navicat 生成的 ER 图中所有表都是独立的
  - 用户中心数据库表初始化：导入 user.sql
  - Entity 数据库表初始化：导入 entity.sql
- 测试数据生成：利用 Navicat 生成测试数据

后端项目二次开发

前提：完成数据库表的初始化工作

后端二次开发
- 数据库对接：修改 application.yaml 中的数据库名称
- 项目启动
  - 功能测试：查询用户列表
- 模板修改
  - MyBatisX Generator 生成数据库对齐的一组 Entity、Service、Mapper
  - 将这组对象集成到现有项目目录中
  - 针对所有Entity，执行以下操作
    - 创建 dto\entity
      - 复制三份 Entity 到 dto\entity
        
        重命名为 EntityAddRequest
        
        AddRequest
        
        重命名为EntityQueryRequest
        
        QueryRequest
        
        重命名为 EntityUpdateRequest
        
        UpdateRequest
      - 在 EntityQueryRequest 中加上 extends PageRequest
        
        extends PageRequest
    - 在 vo 文件夹中
      - 复制 Entity，重命名为 EntityVO
    - 基于 SampleController 创建 Controller
      - 全局修改：Sample → Entity
        
        Sample
      - 全局修改：sample → entity
        
        sample
    - 功能测试：查询 Entity

前端项目二次开发

前提：完成后端的二次开发

前端二次开发

依赖安装

yarn install  --production=false # 参数为必选项，否则会有奇怪 Bug

项目启动
接口文件生成：基于 Knife4j 提供的接口信息，生成前端的接口文件，包括后端调用方法和数据类型
```
yarn openapi
```
接口路径补充
- 配置获取 URL 的公共方法：配置 src/services/url.ts 中的后端接口地址（非必需）
```
export function getUrl() {
  // 在此处配置后端接口地址
  // 如果后端没有进行修改，则此处不用额外修改
  const url = 'http://localhost:8080'
  console.log("当前后端 URL：" + url)
  return url
}
```
- 配置路径：针对 src/services/stateful-backend 中的每一个 EntityController.ts 进行配置
  - url 获取
```
import {getUrl} from "@/services/url";
const url = getUrl()
```
  - url 配置：为请求增加后端 url，使得原本通过 mock 获取的数据转变为通过后端获取
    - 全局替换：>( → >( url +
```
>(
```
```
>( url +
```

登录接口对接

方法补充：在 src/services/stateful-backend/userController.ts 中完善方法

// 在登录、获取用户态方法中加入 Cookie 认证，目录级别与 method 同级
		...
		credentials:'include',
    method:'xxx'
		...

credentials:'include',

页面对接：在 src/pages/user/Login/index.tsx 中配置登录和获取用户态的方法（非必需）

// 与 openapi 自动生成的机制有关，不一定需要这一步，不报错就不用
// 如果生成的方法就是 getLoginUserUsingGet 和 userLoginUsingPost，就不用再做修改
// 根据实际经验，有可能会出现生成方法名称是 getLoginUserUsingGET 和 userLoginUsingPOST		这种名字不同的情况下，名字不同就需要这一步

// 将 as 前面的方法修改为 "@/services/stateful-backend/userController" 中生成的方法
import {
  getLoginUserUsingGet as getLoginUser,
  userLoginUsingPost as login
} from "@/services/stateful-backend/userController";

登出接口对接

页面对接：在 src/components/RightContent/AvatarDropdown.tsx 中配置登出方法

// 与 openapi 自动生成的机制有关，不一定需要这一步，与登入接口的方法配置同理
import {userLogoutUsingGet as outLogin} from "@/services/stateful-backend/userController";

CRUD 接口对接：针对每一个 EntityController 执行对接
- 页面创建：在 src/pages 目录下复制 TableList 文件夹，并将其修改为 EntityList
- 路由配置：在 config/routes.ts 文件中配置创建的页面
```
 ...
 {name: '查询表格', icon: 'table', path: '/list', component: './TableList'},
 {name: 'Entity 表格', icon: 'table', path: '/list', component: './EntityList'},
 ...
```
```
 {name: 'Entity 表格', icon: 'table', path: '/list', component: './EntityList'},
```
- 页面对接
  - 全局修改
    - Sample → Entity
```
Sample
```
    - sample → entity
```
sample
```
  - 配置方法
  - 查看 EntityVO 属性：在 src/services/stateful-backend/typings.d.ts 中查看属性
  - 基于 EntityVO 配置
    - 配置查询结果表格的属性
    - 配置 add 表单的属性
    - 配置 update 表单的属性
    - 配置抽屉的属性