江湖数字化平台
登录

项目1：升级学生管理系统的功能

12002

1. 项目任务介绍

上节课中，使用了1table-crud模板生成了学生管理页面，在这个项目里，新建班级表class, 仿照学生管理页面，生成一个班级管理页面，并且可以对班级进行增删改查。

2. 建立班级数据表

用Navicat打开数据库my_project，在新建查询中复制下面的代码：

  1. DROP TABLE IF EXISTS `class`;
  2. CREATE TABLE `class` (
  3.   `id` int(11) NOT NULL AUTO_INCREMENT,
  4.   `classId` varchar(255) DEFAULT NULL COMMENT '班级ID',
  5.   `className` varchar(255) DEFAULT NULL COMMENT '班级名称',
  6.   `classStatus` varchar(255) DEFAULT '正常' COMMENT '班级状态',
  7.   `remark` varchar(255) DEFAULT NULL COMMENT '备注',
  8.   `operation` varchar(255) DEFAULT 'insert' COMMENT '操作; insert, update, jhInsert, jhUpdate, jhDelete jhRestore',
  9.   `operationByUserId` varchar(255) DEFAULT NULL COMMENT '操作者userId',
  10.   `operationByUser` varchar(255) DEFAULT NULL COMMENT '操作者用户名',
  11.   `operationAt` varchar(255) DEFAULT NULL COMMENT '操作时间; E.g: 2021-05-28T10:24:54+08:00 ',
  12.   PRIMARY KEY (`id`) USING BTREE
  13. ) ENGINE=InnoDB AUTO_INCREMENT=132 DEFAULT CHARSET=utf8mb4;
  15. BEGIN;
  16. INSERT INTO `class` (`id`, `classId`, `className`, `classStatus`, `remark`, `operation`, `operationByUserId`, `operationByUser`, `operationAt`) VALUES (1, 'C10001', '武当01班', '正常', '重点班', 'jhUpdate', 'admin', '系统管理员', '2022-09-05T16:57:01+08:00');
  17. INSERT INTO `class` (`id`, `classId`, `className`, `classStatus`, `remark`, `operation`, `operationByUserId`, `operationByUser`, `operationAt`) VALUES (2, 'C10002', '丐帮01班', '正常', NULL, 'jhUpdate', 'admin', '系统管理员', '2022-04-27T19:52:53+08:00');
  18. INSERT INTO `class` (`id`, `classId`, `className`, `classStatus`, `remark`, `operation`, `operationByUserId`, `operationByUser`, `operationAt`) VALUES (3, 'C10003', '丐帮02班', '正常', NULL, 'jhUpdate', 'admin', '系统管理员', '2022-04-27T19:52:53+08:00');
  19. INSERT INTO `class` (`id`, `classId`, `className`, `classStatus`, `remark`, `operation`, `operationByUserId`, `operationByUser`, `operationAt`) VALUES (4, 'C10004', '华山03班', '正常', NULL, 'jhUpdate', 'admin', '系统管理员', '2022-04-27T19:52:53+08:00');
  20. INSERT INTO `class` (`id`, `classId`, `className`, `classStatus`, `remark`, `operation`, `operationByUserId`, `operationByUser`, `operationAt`) VALUES (5, 'C10005', '华山01班', '正常', NULL, 'jhUpdate', 'admin', '系统管理员', '2022-04-27T19:52:53+08:00');
  21. COMMIT;

生成class表：

class表.png

3. 配置页面与数据接口

用Navicat打开数据库my_project的_page表和_resource表，做下面的配置：

page配置.png

resource配置.png

4. 编写前端页面

班级管理classManagement.html和学生管理studentManagemnet.html的网页功能是一样的，只是表的字段和数据不一样，需要把跟学生相关的替换成与班级相关的内容，有以下几个部分需要替换：

  • 模板部分：标题、新增和修改抽屉中表单涉及的变量和名称等逐一进行修改，例如“学生名称”改为”班级名称”，studentStatus改为classStatus。
  • 脚本部分：变量 headers和改为班级相关的变量和名称；jianghuAxios函数里面的pageId改为classManagement，

5. 配置用户权限

用Navicat打开数据库my_project, 通过配置下面的表控制权限：

_user表:

user表.png

_group表:

group表.png

_role表:

role表.png

_user_group_role表：

user_group_role表.png

_user_group_role_page表：

user_group_role_page表.png

6. 班级管理页面

按照上面的步骤配置完成，在项目里会出现班级管理页面，但是因为配置了权限，只有属于wudang组所有成员的和huashan组的boss角色可以访问班级管理页面。

班级管理页面.png