【020】基于Springboot+Vue的学生成绩教务管理系统（含教师、学生、管理员身份）含源码、数据库、运行教程

文章目录

一.运行结果截图

（详细操作过程见文末，保姆级）

我的运行环境：Jdk1.8 +VSCODE+Mysql+IntelliJ IDEA
前言：
这是一个前后端分离的学生成绩管理系统，前端采用 Vue 开发、后端采用 SpringBoot + Mybatis 开发。这个【020】项目和【006】、【010】两个学生管理系统相比，都有学生管理、教师管理、选课管理、成绩管理等，但【020】功能较简洁，不会太复杂，较适合普通的课设。

技术栈：
Vuex
Router
Axios
Element ui
sessionStorage
项目介绍
采用 vue 2.0 开发，通过调用后端提供的数据接口实现数据的动态渲染。项目默认端口号 8080
使用监视器，得益于 Mybatis 强大的动态 SQL 功能，实现高性能动态搜索功能
使用 router 配置路由，实现不同用户类型导航栏的动态渲染
使用 axios 异步加载后端数据
使用 element ui 实现表单的前端校验功能
使用 sessionStorage 实现登录拦截
分别实现了基于前端和后端的数据分页功能
系统功能
1、admin
实现对教师，学生，课程的 CRUD
实现对教师业务以及学生业务的全方位控制
2、teacher
实现查询我开设的课程，以及选择我课程的学生信息
对学生成绩的登陆
3、student
实现选课退课的功能
实现成绩查询的功能
项目介绍
采用 Restful 风格开发，采用 CrossOrigin 解决跨域问题。采用注解以及 xml 文件配置 SQL 语句，实现动态 SQL 的功能，为前端提供完备的数据接口。

由于 vue 项目占用了 8080 Tomcat 默认端口，所以指定项目启动在 10086 端口, 可以使用 YAML 文件配置，使用 Maven 项目进行打包。
系统功能
实现前端 Ajex 请求的全部数据接口，Get 请求通过 RESTful 风格开发。
在这里插入图片描述

学生管理系统操作界面效果展示：

（1）登录界面（教师、学生、管理员）
在这里插入图片描述
（2）教师登录界面

（3）教师开设课程及开设信息（含模糊查找、精确查找、设置课程学分等）

（4）教师成绩管理（根据学分、学生名、课程名、成绩上限、下限、学期时间等信息模糊查找、精确查找等）、编辑信息
在这里插入图片描述

（5）学生根据工号、教师名、课程名、课程号，对教师或者课程进行模糊查找、精确查找，并选课

（6）我的选课、退课（7）学生查询自己成绩、学生列表、查询学生、编辑学生

（8）管理员登录界面
在这里插入图片描述
（9）教师增删改查

在这里插入图片描述

（10）成绩管理增删改查
（11）开课表管理

（11）管理员对开课表管理、学生成绩增删改查

在这里插入图片描述

二.源码获取方式：

源码、数据库、实验报告获取：
链接：https://pan.baidu.com/s/1rzoNYhM5z2vPXv2JgjKneg
提取码：rl76
链接失效可添加cynm-2233获取，码字不易，还望点赞支持

三.保姆级操作教程:

一.vscode前端运行过程：
1.打开VSCODE，文件-打开文件夹
在这里插入图片描述
2.选择打开文件打开当前目录

3.新建终端：

4.npm i安装依赖

6.npm run serve启动项目

MYSQL数据库操作过程（保姆级）
登录数据库，打开sqlyog,建立好连接后，创建数据库
数据库名称：studentms，基字符集选择utf8（没有则数据库排序规则选择utf8_bin）
在这里插入图片描述
创建数据库后，点击数据库–导入–执行SQL脚本，

在这里插入图片描述
导入成功

IDEA后端连接数据库教程（保姆级）：
(注意：建议使用jdk1.8）

选择对应目录

选择从外部模型导入maven项目

项目加载且右侧出现maven和databse

在右侧连接数据库

分别填入用户名、数据库密码、数据库名称
在这里插入图片描述
显示数据库连接成功