Spring Boot Vue Element入门实战(完结)

最近给朋友做一个大学运动会管理系统，用作教学案例，正好自己也在自学VUE，决定用spring boot vue做一个简单的系统。vue这个前端框架很火，他和传统的Jquery 编程思路完全不一样，Jquery 是事件驱动的，而VUE是数据驱动的。以前写页面经常是通过Jquery 操作各种DOM，而VUE不用对DOM进行操作，直接操作绑定的数据即可。接下来我会利用业余时间，把我学习到的分享给大家，知识纯属自学，如有错误的地方欢迎指出，共同进步！

本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766

入门实战目录

Spring Boot Vue Element入门实战（一）开发环境搭建
Spring Boot Vue Element入门实战（二）前端框架搭建
Spring Boot Vue Element入门实战（三）Vue Devtools安装
Spring Boot Vue Element入门实战（四）主页面开发
Spring Boot Vue Element入门实战（五）封装axios
Spring Boot Vue Element入门实战（六）常用工具类封装
Spring Boot Vue Element入门实战（七）Echart集成
Spring Boot Vue Element入门实战（八）静态列表页面
Spring Boot Vue Element入门实战（九）router路由配置
Spring Boot Vue Element入门实战（十）Vue生命周期
Spring Boot Vue Element入门实战（十一）后端SpringBoot服务搭建
Spring Boot Vue Element入门实战（十二）PowerDesigner数据库建模
Spring Boot Vue Element入门实战（十三）Spring Boot+Mybatis+Redis+Swagger
Spring Boot Vue Element入门实战（十四）前后台整合增删改查
Spring Boot Vue Element入门实战（十五）注册登录路由跨域拦截
Spring Boot Vue Element入门实战（十六）菜单首页，前后台整合
Spring Boot Vue Element入门实战（十七）Nginx+Tomcat前后端部署
Spring Boot Vue Element入门实战（十八）完结篇

技术架构

后台：Spring boot Springmvc Mybatis
前台：Vue Element
数据：Mysql Redis
部署：Tomcat Nginx

技术/框架/工具	说明
Axios	HTTP 库，类似AJAX
Element UI	Vue 2.0 组件库
Vue Router	VUE 路由管理器
Echart	图表插件
Spring Boot	项目开发框架
Mybatis	持久层框架
Druid	数据库连接池
Swagger	API文档工具
Redis	NoSql数据库
Mysql	关系型数据库
Maven	项目构建工具
IDEA	前后端开发工具
Navicat	数据库管理工具
Redis Desktop Manager	Redis桌面管理工具
Power Designer	数据库建模工具

项目说明

运动会管理系统功能模块说明

• 系统首页

  • 显示运动会概况数据，参赛人数，金银铜排行榜，比赛日，今日重点项目等等数据

• 学生管理

  • 登录
    • 输入学生姓名密码（MD5双重加密），以及验证码点击登录获取Token进入系统
  • 退出
    • 点击退出按钮退出系统到登录页面并清除缓存
  • 查看学生列表
    • 点击左侧菜单进入学生列表
  • 添加学生
    • 点击添加按钮，填写学生信息，保存添加
  • 修改学生
    • 点击修改按钮，修改学生信息，保存修改
  • 锁定学生
    • 锁定学生之后学生无法登录系统，但学生记录还存在
  • 删除学生
    • 删除学生之后，该学生所有记录被删除
  • 学生查询
    • 可以根据学生姓名，学号查询数据

• 教师管理

  • 登录
    • 输入教师姓名密码（MD5双重加密），以及验证码点击登录获取Token进入系统
  • 退出
    • 点击退出按钮退出系统到登录页面并清除缓存
  • 查看教师列表
    • 点击左侧菜单进入教师列表
  • 添加教师
    • 点击添加按钮，填写教师信息，保存添加
  • 修改教师
    • 点击修改按钮，修改教师信息，保存修改
  • 锁定教师
    • 锁定教师之后教师无法登录系统，但教师记录还存在
  • 删除教师
    • 删除教师之后，该教师所有记录被删除
  • 教师查询
    • 可以根据教师姓名，编号查询数据

• 成绩管理

  • 查看成绩列表
    • 点击左侧菜单进入成绩列表
  • 添加成绩
    • 点击添加按钮，填写成绩信息，保存添加
  • 修改成绩
    • 点击修改按钮，修改成绩信息，保存修改
  • 删除成绩
    • 删除成绩之后，该成绩所有记录被删除
  • 成绩查询
    • 可以根据学生姓名，学号，项目查询学生成绩

• 系统日志

  • 日志列表
    • 列出系统登录登出，用户操作日志列表
  • 日志查询
    • 可以根据时间段，日志类型查询数据
  • 趋势图
    • 列出Echart日志趋势图

• 基础数据

  • 基础数据添加
    • 点击添加按钮，填写数据信息，保存添加
  • 基础数据修改
    • 点击修改按钮，修改数据信息，保存修改
  • 基础数据删除
    • 删除数据之后，该数据所有记录被删除

运动会管理系统人员权限说明

• 学生：需要先注册，登录进入首页，只能查看学生信息，成绩信息，不能查看教师信息，没有增删改权限
• 教师：登录进入首页，可以增删改查，审核学生信息，成绩信息，可以查看教师信息，不能编辑教师信息
• 超级管理员（only one）：可以增删改查所有数据，自己不能被删除

系统页面

登录

首页
学生管理
成绩管理
教师管理
基础数据
日志管理

用户名	密码	类型
xiaomidou	123456	学生
teacher	123456	教师
admin	123456	超级管理员

如果你觉得我的博客对您有帮助，那就请您慷慨解囊打赏程序员小哥哥喝杯咖啡吧！您的打赏是对我最大的鼓励！

微信收款二维码

支付宝收款二维码

程序人生，更多分享请关注公众号

源代码下载

关注上面公众号，回复源码即可获取gitbug/gitee下载地址