最近給朋友做一個大學運動會管理系統，用作教學案例，正好自己也在自學VUE，決定用spring boot vue做一個簡單的系統。vue這個前端框架很火，他和傳統的Jquery 編程思路完全不一樣，Jquery 是事件驅動的，而VUE是數據驅動的。以前寫頁面經常是通過Jquery 操作各種DOM，而VUE不用對DOM進行操作，直接操作綁定的數據即可。接下來我會利用業餘時間，把我學習到的分享給大家，知識純屬自學，如有錯誤的地方歡迎指出，共同進步！

本博客屬作者原創，未經允許禁止轉載，請尊重原創！如有問題請聯繫QQ509961766

入門實戰目錄

技術架構

後臺：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入門實戰(完結)

入門實戰目錄

技術架構

項目說明

系統頁面

Intellij IDEA 使用教程(六)SVN使用

Intellij IDEA 使用教程(三)Maven安裝和配置

Intellij IDEA 使用教程(四)Tomcat安裝和配置

Intellij IDEA 使用教程(史上最全，持續更新)

Intellij IDEA 使用教程(十二)IDEA常用插件（持續更新）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結