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

背景说明

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

数据库表如下:

  1. -- 班级表
  2. CREATE TABLE `test2_class` (
  3. `id` int(11) NOT NULL AUTO_INCREMENT,
  4. `classId` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '班级ID',
  5. `className` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '班级名称',
  6. `classStatus` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '班级状态',
  7. `remark` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '备注',
  8. `operation` varchar(255) COLLATE utf8mb4_bin DEFAULT 'insert' COMMENT '操作; insert, update, jhInsert, jhUpdate, jhDelete jhRestore',
  9. `operationByUserId` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作者userId',
  10. `operationByUser` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作者用户名',
  11. `operationAt` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '操作时间; E.g: 2021-05-28T10:24:54+08:00 ',
  12. PRIMARY KEY (`id`) USING BTREE
  13. ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin;
  14. -- 学生表
  15. CREATE TABLE `test2_student` (
  16. `id` int(11) NOT NULL AUTO_INCREMENT,
  17. `studentId` varchar(255) DEFAULT NULL COMMENT '学生ID',
  18. `name` varchar(255) DEFAULT NULL COMMENT '学生名字',
  19. `gender` varchar(255) DEFAULT NULL COMMENT '性别',
  20. `dateOfBirth` varchar(255) DEFAULT NULL COMMENT '出生日期',
  21. `classId` varchar(255) DEFAULT NULL COMMENT '班级ID',
  22. `level` varchar(255) DEFAULT NULL COMMENT '年级',
  23. `bodyHeight` varchar(255) DEFAULT NULL COMMENT '身高',
  24. `studentStatus` varchar(255) DEFAULT NULL COMMENT '学生状态',
  25. `remarks` mediumtext COMMENT '备注',
  26. `operation` varchar(255) DEFAULT 'insert' COMMENT '操作; insert, update, jhInsert, jhUpdate, jhDelete jhRestore',
  27. `operationByUserId` varchar(255) DEFAULT NULL COMMENT '操作者userId',
  28. `operationByUser` varchar(255) DEFAULT NULL COMMENT '操作者用户名',
  29. `operationAt` varchar(255) DEFAULT NULL COMMENT '操作时间; E.g: 2021-05-28T10:24:54+08:00 ',
  30. PRIMARY KEY (`id`) USING BTREE,
  31. KEY `studentId` (`studentId`) USING BTREE
  32. ) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4;

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

  1. $ cd my-project
  2. $ jianghu-init page --type=2table-page
  3. 初始化数据库连接成功
  4. 开始生成 CRUD
  5. 注意: 仅支持一(A表)对多(B表)
  6. ? 请选择你要生成 crud 的表(A表) test2_class
  7. ? 请输入 test2_class 的名字,如"文章" 班级2
  8. ? 请输入 test2_class 表的业务字段 classId
  9. ? 请选择你要生成 crud 的表(B表) test_student
  10. ? 请输入 test_student 的名字,如"标签" 学生2
  11. ? 请输入 test_student 表的业务字段 studentId
  12. 生成 testStudentManagementOfOneTest2Class vue 文件完成
  13. init crud is success
  14. jianghu init page is success
  15. $ npm run dev
  16. 2023-04-10 19:53:34,850 INFO 75042 [master] agent_worker#1:75046 started (771ms)
  17. 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
2table.png

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

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

  1. $ jianghu-init project --type=2table-crud my-2table-crud
  2. ? project name my-2table-crud
  3. ? project description
  4. ? project author
  5. ? cookie security keys 1681128110653_3355
  6. ? database name my_3table_crud
  7. ? 数据库IP 127.0.0.1
  8. ? 数据库端口: 3306
  9. ? 数据库账号: root
  10. ? 数据库密码: 123456
  11. 目录切换 my-2table-crud
  12. 初始化`数据库基本表和数据`完成
  13. usage:
  14. - cd /xxx/my-2table-crud
  15. - npm install
  16. - npm start / npm run dev
  17. jianghu init project is success
  18. $ cd my-2table-crud
  19. $ npm i
  20. $ npm run dev
  21. 2023-04-10 19:53:34,850 INFO 75042 [master] agent_worker#1:75046 started (771ms)
  22. 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
2table-crud-a.png