基础应用-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