基础应用-3table(A-AB-B)

背景说明

背景：假设有test_class、test_student、test_student_class三张表。一个学生可以在多个班，一个班里包含多个学生。也就是最常见的多对多场景(A-AB-B)。
需求：创建对应的管理页来管理这些数据

数据库表如下:

-- 班级表
CREATE TABLE `test_class` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `classId` varchar(255) DEFAULT NULL COMMENT '班级ID',
  `className` varchar(255) DEFAULT NULL COMMENT '班级名称',
  `classStatus` varchar(255) DEFAULT '正常' COMMENT '班级状态',
  `remark` varchar(255) DEFAULT NULL COMMENT '备注',
  `operation` varchar(255) DEFAULT 'insert' COMMENT '操作; insert, update, jhInsert, jhUpdate, jhDelete jhRestore',
  `operationByUserId` varchar(255) DEFAULT NULL COMMENT '操作者userId',
  `operationByUser` varchar(255) DEFAULT NULL COMMENT '操作者用户名',
  `operationAt` varchar(255) DEFAULT NULL COMMENT '操作时间; E.g: 2021-05-28T10:24:54+08:00 ',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8mb4;
-- 学生表
CREATE TABLE `test_student` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `studentId` varchar(255) DEFAULT NULL COMMENT '学生ID',
  `name` varchar(255) DEFAULT NULL COMMENT '学生名字',
  `gender` varchar(255) DEFAULT NULL COMMENT '性别',
  `dateOfBirth` varchar(255) DEFAULT NULL COMMENT '出生日期',
  `level` varchar(255) DEFAULT NULL COMMENT '年级',
  `bodyHeight` varchar(255) DEFAULT NULL COMMENT '身高',
  `studentStatus` varchar(255) DEFAULT NULL COMMENT '学生状态',
  `remark` mediumtext COMMENT '备注',
  `operation` varchar(255) DEFAULT 'insert' COMMENT '操作; insert, update, jhInsert, jhUpdate, jhDelete jhRestore',
  `operationByUserId` varchar(255) DEFAULT NULL COMMENT '操作者userId',
  `operationByUser` varchar(255) DEFAULT NULL COMMENT '操作者用户名',
  `operationAt` varchar(255) DEFAULT NULL COMMENT '操作时间; E.g: 2021-05-28T10:24:54+08:00 ',
  PRIMARY KEY (`id`) USING BTREE,
  KEY `studentId` (`studentId`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=32 DEFAULT CHARSET=utf8mb4;
-- 学生班级表
CREATE TABLE `test_student_class` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `studentId` varchar(255) DEFAULT NULL COMMENT '学生ID',
  `classId` varchar(255) DEFAULT NULL COMMENT '班级ID',
  `remark` varchar(255) DEFAULT NULL COMMENT '备注',
  `operation` varchar(255) DEFAULT 'insert' COMMENT '操作; insert, update, jhInsert, jhUpdate, jhDelete jhRestore',
  `operationByUserId` varchar(255) DEFAULT NULL COMMENT '操作者userId',
  `operationByUser` varchar(255) DEFAULT NULL COMMENT '操作者用户名',
  `operationAt` varchar(255) DEFAULT NULL COMMENT '操作时间; E.g: 2021-05-28T10:24:54+08:00 ',
  PRIMARY KEY (`id`) USING BTREE,
  KEY `studentId` (`studentId`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=51 DEFAULT CHARSET=utf8mb4;

方法1: 使用jianghu-init page 3table-page生成3table页面

$ cd my-project
$ jianghu-init page --type=3table-page
    ✔ 初始化数据库连接成功
    ℹ 开始生成 CRUD
    ? 请选择你要生成 crud 的表（A表） test_class
    ? 请输入 test_class 的名字，如"文章" 班级
    ? 请输入 test_class 表的业务字段 classId
    ? 请选择你要生成 crud 的表（B表） test_student
    ? 请输入 test_student 的名字，如"标签" 学生
    ? 请输入 test_student 表的业务字段 studentId
    ? 请输入两表的第三张关联表 test_student_class
    ✔ init crud is success
    ✔ jianghu init page is success
$ npm run dev
    2023-04-10 19:53:34,850 INFO 75042 [master] agent_worker#1:75046 started (771ms)
    2023-04-10 19:53:35,709 INFO 75042 [master] @jianghujs/jianghu started on http://127.0.0.1:7001 (1631ms)

浏览器访问：http://127.0.0.1:7001

方法2: 使用jianghu-init project --type=3table-crud生成3table项目

3table-crud项目里面将的就是3table的案例，我们可以从这个项目里拷贝代码，然后适配代码 来实现我们的需求。

$ jianghu-init project --type=3table-crud my-3table-crud
    ? project name my-3table-crud
    ? project description 
    ? project author 
    ? cookie security keys 1681128110653_3355
    ? database name my_3table_crud
    ? 数据库IP： 127.0.0.1
    ? 数据库端口： 3306
    ? 数据库账号： root
    ? 数据库密码： 123456
    ✔ 目录切换 my-3table-crud
    ✔ 初始化`数据库基本表和数据`完成
    ✔ usage:
          - cd /xxx/my-3table-crud
          - npm install
          - npm start / npm run dev
    ✔ jianghu init project is success
$ cd my-3table-crud
$ npm i
$ npm run dev
    2023-04-10 19:53:34,850 INFO 75042 [master] agent_worker#1:75046 started (771ms)
    2023-04-10 19:53:35,709 INFO 75042 [master] @jianghujs/jianghu started on http://127.0.0.1:7001 (1631ms)

浏览器访问：http://127.0.0.1:7001 用户名admin密码123456