通用 CRUD 项目操作手册

前言

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

相关项目文档

项目总结 通用 CRUD 后端项目 stateful-backend

项目总结 通用 CRUD 前端项目 stateful-backend-frontend

相关项目源码

后端项目源码

前端项目源码

操作手册

通用 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
          • 重命名为EntityQueryRequest
          • 重命名为 EntityUpdateRequest
        • 在 EntityQueryRequest 中加上 extends PageRequest
      • 在 vo 文件夹中
        • 复制 Entity，重命名为 EntityVO
      • 基于 SampleController 创建 Controller
        • 全局修改：Sample → Entity
        • 全局修改：sample → entity
      • 功能测试：查询 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 +

  • 登录接口对接

    • 方法补充：在 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 表单的属性
        • 配置抽屉的属性