当前位置: 首页 > news >正文

【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
链接失效可评论区留言~

三.保姆级操作教程:

一.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
在这里插入图片描述
在右侧连接数据库
在这里插入图片描述
分别填入用户名、数据库密码、数据库名称
在这里插入图片描述
显示数据库连接成功
在这里插入图片描述

记得修改application.yml配置文件的密码为自己数据库的密码。
在这里插入图片描述在这里插入图片描述
运行成功

以上操作配置完,便可以打开

http://localhost:8080/#/login

运行啦

相关文章:

  • 基于KubeEdge的边缘节点分组管理设计与实现
  • Docker(精简版)
  • 猿创征文|Apache ShenYu网关插件介绍
  • 全志V853开发板开发进阶——GPADC
  • 表单(非常非常重要)
  • 【JavaScript】一文了解JS的闭包
  • 2022前端vue面试题
  • docker相关试题
  • python 之名称空间与作用域
  • python之面向过程编程思想与匿名函数及其应用
  • docker 之Dockerfile
  • python之logging 模块(简洁版)
  • Docker 搭建 Redis Cluster 集群环境
  • Docker 容器编排利器 Docker Compose
  • Docker Swarm 集群环境搭建及弹性服务部署
  • 【跃迁之路】【669天】程序员高效学习方法论探索系列(实验阶段426-2018.12.13)...
  • docker-consul
  • eclipse的离线汉化
  • go append函数以及写入
  • HTML-表单
  • JAVA 学习IO流
  • js写一个简单的选项卡
  • PHP的类修饰符与访问修饰符
  • Python 基础起步 (十) 什么叫函数?
  • Python进阶细节
  • SpringBoot几种定时任务的实现方式
  • tensorflow学习笔记3——MNIST应用篇
  • 基于web的全景—— Pannellum小试
  • 如何在 Tornado 中实现 Middleware
  • 我感觉这是史上最牛的防sql注入方法类
  • 一个完整Java Web项目背后的密码
  • 源码安装memcached和php memcache扩展
  • JavaScript 新语法详解:Class 的私有属性与私有方法 ...
  • Mac 上flink的安装与启动
  • 通过调用文摘列表API获取文摘
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • ​ssh免密码登录设置及问题总结
  • ​你们这样子,耽误我的工作进度怎么办?
  • ​七周四次课(5月9日)iptables filter表案例、iptables nat表应用
  • #免费 苹果M系芯片Macbook电脑MacOS使用Bash脚本写入(读写)NTFS硬盘教程
  • $var=htmlencode(“‘);alert(‘2“); 的个人理解
  • (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例
  • (南京观海微电子)——COF介绍
  • (七)MySQL是如何将LRU链表的使用性能优化到极致的?
  • (三维重建学习)已有位姿放入colmap和3D Gaussian Splatting训练
  • .net 7 上传文件踩坑
  • .NET Core Web APi类库如何内嵌运行?
  • .NET Framework与.NET Framework SDK有什么不同?
  • .NET HttpWebRequest、WebClient、HttpClient
  • .NET 的程序集加载上下文
  • .NET/C# 获取一个正在运行的进程的命令行参数
  • .NET/C# 使窗口永不激活(No Activate 永不获得焦点)
  • .net操作Excel出错解决
  • .NET中的Event与Delegates,从Publisher到Subscriber的衔接!
  • @for /l %i in (1,1,10) do md %i 批处理自动建立目录