基于springboot3.x+vue3.x整合开发学生信息管理系统
基于springboot3.x+vue3.x整合开发学生信息管理系统
开发环境搭建及功能展示
基础项目搭建
- 创建一个名为student-mangement-system的项目
- 编写一个统一返回结果集BaseResult
- 统一异常处理功能实现
- 自定义查询注解
- 编写一个公共实体基类BaseEntity
- 配置跨域
- 创建一个名为student-mangement-system-web的项目
- vue-router4安装和引入
- pinia安装和引入
- 安装element plus
- 安装Axios
- 安装svg组件
- 安装nprogress
- Layout主页面布局
- 侧边栏页面布局
- 顶部导航栏组件布局(一)
- 顶部导航栏组件布局(二)
- 后台首页布局(一)
- 后台首页布局(二)
- 侧边栏收缩和展开
- 面包屑功能实现
- tabs标签页布局功能实现
- 编写一个显示上一个或者下一个tabs标签的函数
- 新增Tabs标签页功能实现
- 关闭当前tabs标签功能实现
- 关闭其他标签功能实现
- 关闭所有标签页功能实现
系统登录功能实现
- 登录页面布局(一)
- 登录页面布局(二)
- 登录前端功能实现
- 编写系统用户实体类SysUser
- 编写持久层类SysUserRepository
- 编写业务接口ISysUserService
- 编写业务接口实现类SysUserServiceImpl
- 编写登录前端控制器LoginController
- 在LoginController类下新增一个登陆方法login
- 登录业务功能实现
- 在SysUserRepository接口下新建一个findByUserName方法
- 在HutoolJWTUtil工具类创建一个createToken方法
- 编写一个MD5加密工具类Md5Util
- 系统登录功能测试
- 前端退出系统功能实现
- 后端退出系统功能实现
系统用户管理模块功能实现
- 创建前端控制器UserController
- 用户管理页面头部布局
- 用户管理页面表格布局
- 用户管理页面分页布局
- 在UserList.vue组件中编写一个响应式state对象
- 在UserList.vue组件中编写一个loadData函数
- 在user.ts文件中编写调用后端接口的getUserListApi函数
- 编写一个查询条件类UserQueryCriteria
- 封装分页查询参数PageVo
- 在UserController类创建一个获取用户列表数据的getList方法
- 获取用户列表数据业务功能实现
- 格式化时间功能实现
- 刷新功能实现
- 搜索功能实现
- 处理分页事件
- 处理用户列表序号
- 添加用户页面的布局
- 添加用户前端功能实现
- 添加用户后端功能实现
- 取消表单功能实现
- 提交表单后关闭表单和刷新表格功能实现
- 校验表单功能实现
- 获取用户详情功能实现
- 更新用户页面的布局
- 更新用户前端功能实现
- 更新用户后端功能实现
- 取消更新表单功能实现
- 提交表单后关闭表单和刷新表格功能实现
- 校验更新用户信息表单功能实现
- 删除用户信息前端功能实现
- 删除用户信息后端功能实现
- 导出用户信息前端功能实现
系统角色管理模块功能实现
- 编写一个系统角色实体类SysRole
- 编写持久层类SysRoleRepository
- 创建系统角色业务接口和实现类
- 创建前端控制器RoleController
- 角色管理页面头部布局
- 角色管理页面表格布局
- 角色管理页面分页布局
- 编写一个加载角色列表数据的loadData函数
- 新建一个名为role.ts的调用后端接口的文件
- 编写一个查询条件类RoleQueryCriteria
- 在RoleController类中创建一个获取角色列表数据的getList方法
- 获取角色列表数据业务功能实现
- 格式化时间功能实现
- 刷新角色列表数据功能实现
- 搜索角色列表数据功能实现
- 处理角色列表分页事件
- 处理角色列表序号
- 添加角色页面的布局(一)
- 添加角色页面的布局(二)
- 添加角色前端功能实现
- 添加角色后端功能实现
- 自动填充操作者ID功能实现
- 取消表单功能实现
- 提交新增角色表单后关闭表单和刷新表格功能实现
- 校验新增角色表单功能实现
- 获取角色详情功能实现
- 更新角色的页面布局
- 更新角色前端功能实现
- 更新角色后端功能实现
- 取消更新角色信息表单功能实现
- 提交表单后关闭表单和刷新表格功能实现
- 校验更新角色信息表单功能实现
- 删除角色信息前端功能实现
- 删除角色信息后端功能实现
- 导出角色信息功能实现
班级管理模块功能实现
- 班级管理模块基础搭建
- 班级管理页面头部布局
- 班级管理页面表格布局
- 班级管理页面分页布局
- 编写一个名为loadData的函数
- 编写一个名为gradeclass.ts的调用后端接口的文件
- 编写一个查询条件类GradeClassQueryCriteria
- 在GradeClassController类中创建一个获取班级列表数据的getList方法
- 获取班级列表数据业务功能实现
- 格式化时间功能实现
- 刷新班级列表数据功能实现
- 搜索班级列表数据功能实现
- 处理班级列表数据分页事件
- 班级列表数据序号功能实现
- 添加班级页面的布局
- 添加班级前端功能实现
- 添加班级后端功能实现
- 取消新增班级表单功能实现
- 提交表单后关闭新增班级表单和刷新班级表格数据功能实现
- 校验新增班级表单功能实现
- 获取班级详情功能实现
- 更新班级信息的页面布局
- 更新班级信息前端功能实现
- 更新班级信息后端功能实现
- 取消更新班级信息表单功能实现
- 提交表单后关闭编辑班级表单和刷新表格功能实现
- 校验编辑班级信息表单功能实现
- 删除班级信息功能实现
- 导出班级信息功能实现
学生管理模块功能实现
- 学生管理模块基础搭建
- 学生管理页面头部布局
- 学生管理页面表格布局
- 学生管理页面分页布局
- 编写一个获取学生列表数据的loadData函数
- 编写一个名为student.ts的调用后端接口的文件
- 编写一个查询条件类StudentQueryCriteria
- 在StudentController类中创建一个获取班级列表数据的getList方法
- 获取学生列表数据业务功能实现
- 格式化时间功能实现
- 刷新学生列表数据功能实现
- 搜索学生列表数据功能实现
- 处理学生列表数据分页事件
- 处理学生列表数据分页序号
- 添加学生页面的布局
- 添加学生信息前端功能实现
- 添加学生信息后端功能实现
- 取消新增学生信息表单功能实现
- 提交表单后关闭添加学生信息表单和刷新表格功能实现
- 校验新增学生信息表单功能实现
- 获取学生详情功能实现
- 更新学生信息的页面布局
- 更新学生信息前端功能实现
- 更新学生信息后端功能实现
- 取消更新学生信息表单功能实现
- 提交表单后关闭编辑学生信息表单和刷新表格功能实现
- 校验编辑学生信息表单功能实现
- 删除学生信息功能实现
- 导出学生信息功能实现
- 统计所有班级学生人数功能实现
课程管理模块功能实现
- 课程管理模块基础搭建
- 课程管理页面头部布局
- 课程管理页面表格布局
- 课程管理页面分页布局
- 编写一个获取课程列表数据的loadData函数
- 编写一个名为course.ts的调用后端接口的文件
- 编写一个查询条件类CourseQueryCriteria
- 在CourseController类中创建一个获取课程列表数据的getList方法
- 获取课程列表数据业务功能实现
- 格式化时间功能实现
- 刷新课程列表数据功能实现
- 搜索课程列表数据功能实现
- 处理课程列表数据分页事件
- 处理课程列表数据分页序号
- 添加课程页面的布局
- 添加课程前端功能实现
- 添加课程后端功能实现
- 取消新增课程表单功能实现
- 提交表单后关闭新增课程信息表单和刷新表格功能实现
- 校验添加课程信息表单功能实现
- 获取课程详情功能实现
- 更新课程的页面布局
- 更新课程前端功能实现
- 更新课程后端功能实现
- 取消更新课程信息表单功能实现
- 提交表单后关闭更新课程表单和刷新表格功能实现
- 校验更新课程表单功能实现
- 删除课程信息功能实现
- 导出课程信息功能实现
教师管理模块功能实现
- 教师管理模块基础搭建
- 教师管理页面头部布局
- 教师管理页面表格布局
- 教师管理页面分页布局
- 编写一个获取教师列表数据的loadData函数
- 编写一个名为teacher.ts的调用后端接口的文件
- 编写一个查询条件类TeacherQueryCriteria
- 在TeacherController类中创建一个获取教师列表数据的getList方法
- 获取教师列表数据业务功能实现
- 格式化教师列表数据时间功能实现
- 刷新教师列表数据功能实现
- 搜索教师列表数据功能实现
- 处理教师列表数据分页功能实现
- 处理教师列表数据分页序号
- 添加教师页面的布局
- 添加教师前端功能实现
- 添加教师信息后端功能实现
- 取消新增教师表单功能实现
- 提交表单后关闭新增教师表单和刷新表格功能实现
- 校验添加教师表单功能实现
- 获取教师详情功能实现
- 更新教师的页面布局
- 更新教师前端功能实现
- 更新教师后端功能实现
- 取消更新教师表单功能实现
- 提交表单后关闭更新教师表单和刷新表格功能实现
- 校验更新教师表单功能实现
- 删除教师信息功能实现
- 导出教师信息功能实现
成绩管理模块功能实现
- 成绩管理模块基础搭建
- 成绩管理页面头部布局
- 成绩管理页面表格布局
- 成绩管理页面分页布局
- 编写一个获取成绩列表数据的loadData函数
- 编写一个名为scores.ts的调用后端接口的文件
- 编写一个查询条件类ScoresQueryCriteria
- 在ScoresController类中创建一个获取成绩列表数据的getList方法
- 获取成绩列表数据业务功能实现
- 格式化成绩列表数据时间功能实现
- 刷新成绩列表数据功能实现
- 搜索成绩列表数据功能实现
- 处理成绩列表数据分页功能实现
- 处理成绩列表数据分页序号
- 登记成绩前端功能实现
- 登记成绩后端功能实现
- 修改ScoresList.vue组件表格布局
- 编辑成绩前端功能实现
- 编辑成绩后端功能实现
- 删除成绩信息前端功能实现
- 删除成绩信息后端功能实现
- 导出成绩信息功能实现
数据统计功能实现
后台首页功能实现
个人信息设置功能实现
系统权限管理功能实现
打包、发布与部署
馈,我们将及时处理!
课时介绍
课程介绍
基于SpringBoot3+Vue3整合开发学生信息管理系统
系统功能结构
本系统主要有两种角色,分别管理员角色和普通用户角色,其中:
管理员角色主要功能有:后台首页展示、个人信息展示和修改、用户管理、角色管理、班级管理、学生管理、课程管理、教师管理、班级科目成绩管理、班级科目成绩统计、班级科目对比统计等功能,如图所示:

普通用户角色主要功能有:后台首页展示、个人信息展示和修改、班级科目成绩管理、班级科目成绩统计、班级科目对比统计等功能,如图所示:

技术栈
-
web框架:SpringBoot3.X
-
数据库框架:Sping Data JPA
-
数据库:MySql
-
项目构建工具:Maven、vite
-
前端框架:Vue3.X、element plus、pina、axios、Vue Router
-
数据图表:ECharts
数据库表
本项目由七张表,分别如下:
1、用户表(sys_user)
2、角色表(sys_role)
3、教师表(s_teacher)
4、班级表(s_grade_class)
5、学生表(s_student)
6、课程表(s_course)
7、学生成绩表(s_student_score)
