最近给朋友做一个大学运动会管理系统，用作教学案例，正好自己也在自学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下载地址

Spring Boot Vue Element入门实战(完结)相关推荐

Spring Boot Vue Element入门实战（十）Vue生命周期
本博客属作者原创,未经允许禁止转载,请尊重原创!如有问题请联系QQ509961766 前面9篇文章基本上完成了vue 静态页面的入门,包括列表展示,路由动态加载菜单,echarts图表的一些使用,后面 ...
Spring Boot Vue Element入门实战（四）主页面开发
本博客属作者原创,未经允许禁止转载,请尊重原创!如有问题请联系QQ509961766 (一)页面布局页面布局分为3个部分: 顶部导航:系统logo,登录信息,退出按钮等左侧菜单:显示系统菜单右侧 ...
Spring Boot Vue Element入门实战（五）封装axios
本博客属作者原创,未经允许禁止转载,请尊重原创!如有问题请联系QQ509961766 (一)关于Axios Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get.pos ...
《Spring Boot+Vue全栈开发实战》读书笔记
写在前面嗯,回家处理一些事,所以离职了,之前的公司用开源技术封装了一套自己的低代码平台,所以之前学的spring Boot之类的东西都忘了很多,蹭回家的闲暇时间复习下. 笔记整体以 Spring B ...
Spring Boot+Vue全栈开发实战——花了一个礼拜读懂了这本书
很幸运能够阅读王松老师的<Spring Boot+Vue全栈开发实战>这本书!之前也看过Spring Boot与Vue的相关知识,自己也会使用了Spring Boot+Vue进行开发项目. ...
读书笔记《Spring Boot+Vue全栈开发实战》(下)
本书将带你全面了解Spring Boot基础与实践,带领读者一步步进入 Spring Boot 的世界. 前言第九章 Spring Boot缓存第十章 Spring Boot安全管理第十一章 S ...
spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
spring boot + vue + element-ui全栈开发入门
今天想弄弄element-ui 然后就在网上找了个例子感觉还是可以用的第一步是完成了果断拿过来放到我这里这下面直接是连接点进去就可以用啊本想着不用vue 直接导入连接 ...
Spring Boot+Vue/前后端分离/高并发/秒杀实战课程之spring Security快速搭建oauth2 内存版身份认证
Springboot快速搭建oauth2 内存版身份认证环境准备点击[Create New Project]创建一个新的项目项目环境配置配置Thymeleaf 搭建oauth2认证,加入两个依 ...

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

入门实战目录

技术架构

项目说明

系统页面

Spring Boot Vue Element入门实战(完结)相关推荐

最新文章

热门文章