通用 CRUD 项目操作手册-526互联

前言

本操作手册旨在通过列出通用 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 生成测试数据

后端项目二次开发

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

前端项目二次开发

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

前端二次开发

依赖安装

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 +

登录接口对接

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

// 在登录、获取用户态方法中加入 Cookie 认证
		...
		credentials:'include',
    method:'POST'
		...

页面对接：在 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'},
 ...
```
- 页面对接
  - 全局修改
    - Sample → Entity
    - sample → Entity
  - 配置方法
  - 查看 EntityVO 属性：在 src/services/stateful-backend/typings.d.ts 中查看属性
  - 基于 EntityVO 配置
    - 配置查询结果表格的属性
    - 配置 add 表单的属性
    - 配置 update 表单的属性
    - 配置抽屉的属性