基础应用-2table(A-B)

背景说明

背景：假设有test2_class、test2_student两张表。一个班里包含多个学生，一个学生只能在一个班。也就是我们常说的一对多。
需求：创建对应的管理页来管理这些数据

数据库表如下:

-- 班级表
CREATE TABLE `test2_class` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `classId` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '班级ID',
  `className` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '班级名称',
  `classStatus` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '班级状态',
  `remark` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '备注',
  `operation` varchar(255) COLLATE utf8mb4_bin DEFAULT 'insert' COMMENT '操作; insert, update, jhInsert, jhUpdate, jhDelete jhRestore',
  `operationByUserId` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作者userId',
  `operationByUser` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作者用户名',
  `operationAt` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作时间; E.g: 2021-05-28T10:24:54+08:00 ',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;
-- 学生表
CREATE TABLE `test2_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 '出生日期',
  `classId` varchar(255) DEFAULT NULL COMMENT '班级ID',
  `level` varchar(255) DEFAULT NULL COMMENT '年级',
  `bodyHeight` varchar(255) DEFAULT NULL COMMENT '身高',
  `studentStatus` varchar(255) DEFAULT NULL COMMENT '学生状态',
  `remarks` 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=6 DEFAULT CHARSET=utf8mb4;

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

$ cd my-project
$ jianghu-init page --type=2table-page
    ✔ 初始化数据库连接成功
    ℹ 开始生成 CRUD
    注意: 仅支持一(A表)对多(B表)
    ? 请选择你要生成 crud 的表（A表） test2_class
    ? 请输入 test2_class 的名字，如"文章" 班级2
    ? 请输入 test2_class 表的业务字段 classId
    ? 请选择你要生成 crud 的表（B表） test_student
    ? 请输入 test_student 的名字，如"标签" 学生2
    ? 请输入 test_student 表的业务字段 studentId
    ✔ 生成 testStudentManagementOfOneTest2Class 的 vue 文件完成
    ✔ 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 2table-crud生成2table项目

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

$ jianghu-init project --type=2table-crud my-2table-crud
    ? project name my-2table-crud
    ? project description 
    ? project author 
    ? cookie security keys 1681128110653_3355
    ? database name my_3table_crud
    ? 数据库IP： 127.0.0.1
    ? 数据库端口： 3306
    ? 数据库账号： root
    ? 数据库密码： 123456
    ✔ 目录切换 my-2table-crud
    ✔ 初始化`数据库基本表和数据`完成
    ✔ usage:
          - cd /xxx/my-2table-crud
          - npm install
          - npm start / npm run dev
    ✔ jianghu init project is success
$ cd my-2table-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