SpringBoot + vue 管理系统

SpringBoot vue 管理系统* *#### 文章目录* *SpringBoot vue 管理系统 * * 1、成品效果展示 * 2、项目准备 * 3、项目开发 * * 3.1、部门管理 * * 3.1.1、前端核心代码 * 3.1.2、后端代码实现 * 3.2、员工管理 * * 3.2.1、前端核心代码 * 3.2.2、后端代码实现 * 3.3、班级管理 * * 3.3.1、前端核心代码 * 3.3.2、后端代码实现 * 3.4、学生管理 * * 3.4.1、前端核心代码 * 3.4.2、后端代码实现 * 3.5、数据统计 * * 3.5.1、前端核心代码 * 3.5.2、后端代码实现 * 3.6、登录功能 * * 3.6.1、前端核心代码 * 3.6.2、后端代码实现##### 1、成品效果展示SpringBoot vue 管理系统##### 2、项目准备 环境准备步骤1. 准备数据库表2. 创建springboot工程引入对应的起步依赖web、mybatis、mysql驱动、lombok3. 配置文件application.properties中引入mybatis的配置信息准备对应的实体类4. 准备对应的Mapper、Service(接口、实现类)、Controller基础结构 – 部门管理 create table dept( id int unsigned primary key auto_increment comment ‘主键ID’, name varchar(10) not null unique comment ‘部门名称’, create_time datetime not null comment ‘创建时间’, update_time datetime not null comment ‘修改时间’ ) comment ‘部门表’; insert into dept (id, name, create_time, update_time) values(1,‘学工部’,now(),now()), (2,‘教研部’,now(),now()), (3,‘咨询部’,now(),now()), (4,‘就业部’,now(),now()), (5,‘人事部’,now(),now()); – 员工管理(带约束) create table emp ( id int unsigned primary key auto_increment comment ‘ID’, username varchar(20) not null unique comment ‘用户名’, password varchar(32) default ‘123456’ comment ‘密码’, name varchar(10) not null comment ‘姓名’, gender tinyint unsigned not null comment ‘性别, 说明: 1 男, 2 女’, image varchar(300) comment ‘图像’, job tinyint unsigned comment ‘职位, 说明: 1 班主任,2 讲师, 3 学工主管, 4 教研主管, 5 咨询师’, entrydate date comment ‘入职时间’, dept_id int unsigned comment ‘部门ID’, create_time datetime not null comment ‘创建时间’, update_time datetime not null comment ‘修改时间’ ) comment ‘员工表’; INSERT INTO emp (id, username, password, name, gender, image, job, entrydate,dept_id, create_time, update_time) VALUES (1,‘jinyong’,‘123456’,‘金庸’,1,‘1.jpg’,4,‘2000-01-01’,2,now(),now()), (2,‘zhangwuji’,‘123456’,‘张无忌’,1,‘2.jpg’,2,‘2015-01-01’,2,now(),now()), (3,‘yangxiao’,‘123456’,‘杨逍’,1,‘3.jpg’,2,‘2008-05-01’,2,now(),now()), (4,‘weiyixiao’,‘123456’,‘韦一笑’,1,‘4.jpg’,2,‘2007-01-01’,2,now(),now()), (5,‘changyuchun’,‘123456’,‘常遇春’,1,‘5.jpg’,2,‘2012-12-05’,2,now(),now()), (6,‘xiaozhao’,‘123456’,‘小昭’,2,‘6.jpg’,3,‘2013-09-05’,1,now(),now()), (7,‘jixiaofu’,‘123456’,‘纪晓芙’,2,‘7.jpg’,1,‘2005-08-01’,1,now(),now()), (8,‘zhouzhiruo’,‘123456’,‘周芷若’,2,‘8.jpg’,1,‘2014-11-09’,1,now(),now()), (9,‘dingminjun’,‘123456’,‘丁敏君’,2,‘9.jpg’,1,‘2011-03-11’,1,now(),now()), (10,‘zhaomin’,‘123456’,‘赵敏’,2,‘10.jpg’,1,‘2013-09-05’,1,now(),now()), (11,‘luzhangke’,‘123456’,‘鹿杖客’,1,‘11.jpg’,5,‘2007-02-01’,3,now(),now()), (12,‘hebiweng’,‘123456’,‘鹤笔翁’,1,‘12.jpg’,5,‘2008-08-18’,3,now(),now()), (13,‘fangdongbai’,‘123456’,‘方东白’,1,‘13.jpg’,5,‘2012-11-01’,3,now(),now()), (14,‘zhangsanfeng’,‘123456’,‘张三丰’,1,‘14.jpg’,2,‘2002-08-01’,2,now(),now()), (15,‘yulianzhou’,‘123456’,‘俞莲舟’,1,‘15.jpg’,2,‘2011-05-01’,2,now(),now()), (16,‘songyuanqiao’,‘123456’,‘宋远桥’,1,‘16.jpg’,2,‘2007-01-01’,2,now(),now()), (17,‘chenyouliang’,‘123456’,‘陈友谅’,1,‘17.jpg’,NULL,‘2015-03-21’,NULL,now(),now()); CREATE TABLE clazz ( id int unsigned NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT ‘ID,主键’, name varchar(30) NOT NULL UNIQUE COMMENT ‘班级名称’, room varchar(20) DEFAULT NULL COMMENT ‘班级教室’, begin_date date NOT NULL COMMENT ‘开课时间’, end_date date NOT NULL COMMENT ‘结课时间’, master_id int unsigned NOT NULL COMMENT ‘班主任ID, 关联员工表ID’, create_time datetime NOT NULL COMMENT ‘创建时间’, update_time datetime NOT NULL COMMENT ‘修改时间’ ) COMMENT ‘班级表’; INSERT INTO clazz VALUES (1,‘黄埔班一期’,‘212’,‘2023-04-30’,‘2023-06-29’,10,‘2023-06-01 17:08:23’,‘2023-06-01 17:39:58’), (2,‘黄埔班二期’,‘211’,‘2023-06-25’,‘2023-12-31’,1,‘2023-06-01 17:34:16’,‘2023-06-01 17:43:43’), (3,‘黄埔班三期’,‘210’,‘2023-07-10’,‘2024-01-20’,3,‘2023-06-01 17:45:12’,‘2023-06-01 17:45:12’), (4,‘JavaEE就业165期’,‘108’,‘2023-06-15’,‘2023-12-25’,6,‘2023-06-01 17:45:40’,‘2023-06-01 17:45:40’), (5,‘JavaEE就业166期’,‘105’,‘2023-07-20’,‘2024-02-20’,20,‘2023-06-01 17:46:10’,‘2023-06-01 17:46:10’), (6,‘黄埔四期’,‘209’,‘2023-08-01’,‘2024-02-15’,7,‘2023-06-01 17:51:21’,‘2023-06-01 17:51:21’); CREATE TABLE student ( id int unsigned NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT ‘ID,主键’, name varchar(10) NOT NULL COMMENT ‘姓名’, no char(10) NOT NULL UNIQUE COMMENT ‘学号’, gender tinyint unsigned NOT NULL COMMENT ‘性别, 1: 男, 2: 女’, phone varchar(11) NOT NULL UNIQUE COMMENT ‘手机号’, degree tinyint unsigned DEFAULT NULL COMMENT ‘最高学历, 1:初中, 2:高中, 3:大专, 4:本科, 5:硕士, 6:博士’, violation_count tinyint unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘违纪次数’, violation_score tinyint unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘违纪扣分’, clazz_id int unsigned NOT NULL COMMENT ‘班级ID, 关联班级表ID’, create_time datetime NOT NULL COMMENT ‘创建时间’, update_time datetime NOT NULL COMMENT ‘修改时间’ ) COMMENT ‘学生表’; INSERT INTO student VALUES (1,‘Tom’,‘2023001001’,1,‘18909091212’,4,0,0,1,‘2023-06-01 18:28:58’,‘2023-06-01 18:28:58’), (2,‘Cat’,‘2023001002’,2,‘18909092345’,3,0,0,1,‘2023-06-01 18:34:57’,‘2023-06-01 18:34:57’), (3,‘Lily’,‘2023001003’,2,‘13309230912’,4,2,5,1,‘2023-06-01 18:35:23’,‘2023-06-01 19:37:42’), (4,‘Jerry’,‘2023001004’,1,‘15309232323’,4,1,2,1,‘2023-06-01 18:35:48’,‘2023-06-01 19:37:35’), (6,‘Nacos’,‘2023002001’,1,‘18809091212’,1,3,10,2,‘2023-06-01 18:57:32’,‘2023-06-01 19:37:29’); 生成的pom.xml文件 ?xml version1.0 encodingUTF-8? 4.0.0 com.tlias web-tlias 0.0.1-SNAPSHOT web-tlias web-tlias java.version1.8/java.version project.build.sourceEncodingUTF-8/project.build.sourceEncoding project.reporting.outputEncodingUTF-8/project.reporting.outputEncoding spring-boot.version2.7.6/spring-boot.version org.springframework.boot spring-boot-starter-web org.mybatis.spring.boot mybatis-spring-boot-starter 2.3.0 com.mysql mysql-connector-j runtime org.projectlombok lombok true org.springframework.boot spring-boot-starter-test test com.github.pagehelper pagehelper-spring-boot-starter 1.4.2 com.aliyun.oss aliyun-sdk-oss 3.15.2 io.jsonwebtoken jjwt 0.9.1 com.alibaba fastjson 1.2.76 org.springframework.boot spring-boot-starter-aop org.springframework.boot spring-boot-dependenciess p r i n g − b o o t . v e r s i o n / v e r s i o n t y p e p o m / t y p e s c o p e i m p o r t / s c o p e / d e p e n d e n c y / d e p e n d e n c i e s / d e p e n d e n c y M a n a g e m e n t b u i l d p l u g i n s p l u g i n g r o u p I d o r g . a p a c h e . m a v e n . p l u g i n s / g r o u p I d a r t i f a c t I d m a v e n − c o m p i l e r − p l u g i n / a r t i f a c t I d v e r s i o n 3.8.1 / v e r s i o n c o n f i g u r a t i o n s o u r c e 1.8 / s o u r c e t a r g e t 1.8 / t a r g e t e n c o d i n g U T F − 8 / e n c o d i n g / c o n f i g u r a t i o n / p l u g i n p l u g i n g r o u p I d o r g . s p r i n g f r a m e w o r k . b o o t / g r o u p I d a r t i f a c t I d s p r i n g − b o o t − m a v e n − p l u g i n / a r t i f a c t I d v e r s i o n {spring-boot.version}/version typepom/type scopeimport/scope /dependency /dependencies /dependencyManagement build plugins plugin groupIdorg.apache.maven.plugins/groupId artifactIdmaven-compiler-plugin/artifactId version3.8.1/version configuration source1.8/source target1.8/target encodingUTF-8/encoding /configuration /plugin plugin groupIdorg.springframework.boot/groupId artifactIdspring-boot-maven-plugin/artifactId versionspring−boot.version/versiontypepom/typescopeimport/scope/dependency/dependencies/dependencyManagementbuildpluginsplugingroupIdorg.apache.maven.plugins/groupIdartifactIdmaven−compiler−plugin/artifactIdversion3.8.1/versionconfigurationsource1.8/sourcetarget1.8/targetencodingUTF−8/encoding/configuration/pluginplugingroupIdorg.springframework.boot/groupIdartifactIdspring−boot−maven−plugin/artifactIdversion{spring-boot.version} com.tlias.WebTliasApplication true repackage repackage 创建项目工程目录结构配置文件application.yml server: port: 8080 mybatis: mapper-locations: classpath:mappers/xml type-aliases-package: com.tlias.entity configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl map-underscore-to-camel-case: true spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/tlias username: root password: 123456 servlet: multipart: max-file-size: 10MB max-request-size: 100MB pagehelper: reasonable: true aliyun: oss: endpoint: https://oss-cn-beijing.aliyuncs.com accessKeyId: you_acesskey accessKeySecret: you_accessKeySecret bucketName: tlias-lwj 设置统一返回数据 Data AllArgsConstructor NoArgsConstructor public class Result { private int code; private String msg; private Object data; public static Result success() { return new Result(1, “success”, null); } public static Result success(Object data) { return new Result(1, “success”, data); } public static Result error(String msg) { return new Result(0,msg,null); } } 构建一个vue项目##### 3、项目开发功能模块分为六部分班级管理、学员管理、部门管理、员工管理、员工信息统计、学员信息统计###### 3.1、部门管理开发的部门管理功能包含1. 查询部门2. 删除部门3. 新增部门4. 更新部门###### 3.1.1、前端核心代码el-button style“float: right” type“primary” click“dialogFormVisible true; dept{}” 新增部门{{scope.row.updateTime ? scope.row.updateTime.replace(‘T’,’ ‘):’}} el-button size“mini” type“primary” plain click“selectById(scope.row.id)” 编辑 el-button size“mini” type“danger” plain click“deleteById(scope.row.id)” 删除