基于Spring Boot+Vue的場地預約管理系統的設計

杜瑛，劉冬杰

（1.華南師范大學軟件學院，廣東廣州 510631；2.廣東東軟學院計算機學院軟件工程系，廣東佛山 528225）

1 系統開發的意義及策略

隨著“互聯網+”與數字化校園的建設發展，高校管理信息系統迎來了全面深度的開發與建設，與此同時，各種大學社團如雨后春筍般迅速成長，大學社團的各種活動都需要借用場地來完成，頻繁的場地借用、場地借還、場地時限、場地開關門等都需要統一的管理。本文對之進行分析、研究，并依據這些需求設計開發出了“基于Spring Boot+Vue的場地預約管理系統”,系統圍繞開發框架設計、系統功能設計等進行研究，利用MyBatis框架實現系統與數據庫SQL的交互，最終完成了場地預約管理系統的全部功能。

2 系統開發采用的關鍵技術和理論研究

2.1 SSM框架

SSM是Spring、SpringMVC和MyBatis整合而成的，是JavaWeb應用框架中比較受歡迎的一種框架。其中的Spring包括兩個主要的內核，首先是IOC，也稱為控制反轉，它的功能類似于一個工廠；另一個是AOP，也就是面向切面控制，它可以將不同的代碼塊分開，減少耦合，提高開發的效率，所以Spring最大的優勢在于它能有效地減少程序的耦合[1]。經過十多年的發展，Spring已經不再是一個單純的應用框架，而是逐漸發展成為由多個不同子模塊組成的成熟技術，如Spring Boot、Spring MVC、Spring Cloud、Spring Data、Spring Framework、Spring Security等，其中Spring Boot是Spring框架的擴展，它將煩瑣的配置功能進行了內部整合，使項目的配置更加簡化。

2.2 Spring Boot框架

以往的MIS開發人員經常會使用SSM架構，其開發的具體步驟如下：1）創建一個maven項目，然后修改pom.xml文件來添加所有的依賴；2）整合MyBatis，通過xml方式配置連接數據庫、連接池和SqlSessionFactory；3）整合Spring，開啟掃描包，可以在類上通過@Service的注解來聲明該類屬于Service層，并且由Spring托管，通過@Autowired自動注入dao層的對象，以供Service層使用；4）整合SpringMVC，開啟支持MVC的注解驅動，配置視圖解析器，并且在web.xml上配置DispatcherServlet和亂碼過濾等，以上配置都做完，才可以開始正式開發JavaWeb項目。當使用SSM架構開發新的JavaWeb項目時，需要多次重復以上的配置，為了杜絕SSM架構的“配置地獄”缺點，能夠自動化完成絕大部分配置的Spring Boot框架便誕生了[2]。Spring Boot框架是基于Spring開源框架的二次開發，Spring Boot旨在簡化開發過程中的繁瑣配置，Spring Boot提供了各種默認配置來簡化項目，簡化配置的依賴過程，Spring Boot可以通過不同的配置類進行配置，使用注解等使項目變得更加直觀而且易于理解，使用Spring Boot只需要在導入相關依賴的基礎上，通過相關注解即可完成，增加了開發的靈活度，簡化了初始搭建以及開發過程，因此Spring Boot在快速應用開發領域占據著主導地位[3]。

2.3 Vue框架

Vue是一套用于構建用戶界面的漸進式框架，與其他大型框架不同的是，Vue采用自底向上增量開發方式，架構更加簡單、靈活和開放，適合開發人員快速掌握并投入使用。另外，Vue.js是一套用于構建用戶界面的輕量級漸進式框架，Vue.js著眼于MVVM前端的View和Model部分，可以在單頁上嵌入已有的頁面，也可以配合其他庫一起使用[4]。Element-ui是基于Vue2.0的組件庫，提供了配套的設計資源，在遵循用戶習慣語言和概念上，其設計與現實的流程與邏輯，元素與結構均保持一致，可以幫助網站快速成型。

2.4 MyBatis框架

MyBatis是Apache的一個開源項目，提供給開發者一個持久層框架，它支持自定義SQL、存儲過程以及高級映射，它將原生的JDBC中的SQL語句分開，通過配置文件的方式處理數據庫中的數據，其他的部分都是MyBatis自動執行，開發者只要把注意力集中在如何實現SQL語句上，就能很好地解決對數據庫的操作問題，這也是MyBatis能流行的原因之一[5]。

2.5 MySQL數據庫

MySQL是一個關系型數據庫管理系統，無論是它的存儲方式還是安全處理都十分優秀，MySQL還支持開發者優化，使用Explain指令可以查看SQL語句的運行狀態，是否使用，使用了哪些索引，方便開發者進行調整。MySQL具有最小粒度、最多列、功能齊全、查詢速度快等優點，尤其是其開源代碼，得到很多中小型網站的青睞。

3 系統開發框架設計

依照場地預約管理系統的需求，對系統的各個功能模塊進行設計，其中包括前端系統、后端系統、數據庫三大部分的設計。本系統的前端選擇使用Vue.js和Element-ui進行構建，后端業務模塊使用SpringBoot進行搭建，使用MyBatisPlus持久層框架對數據庫進行交互，如圖1所示，系統前端架構的設計。

圖1 系統前端架構設計

在數據存儲上，使用了MySQL持久化存儲、Redis緩存以及Minio對象存儲服務器，基于軟件的功能需求，數據庫的設計圍繞借用歷史這一對象進行展開，每一個借用歷史都有對應借用者、審核者和借用的場地等，系統后端MySQL數據庫關系模型設計如圖2所示，MySQL關系模型設計。

圖2 MySQL關系模型設計

4 系統功能設計

4.1 系統功能設計

本系統包含的功能有：1）場地借用申請；2）用戶與場地管理；3）借用申請審核；4）鑰匙借出與歸還；5）管理員的管理；6）數據查看。系統后端采用分層開發，按照程序響應請求的順序分為控制層（Controller）、業務邏輯層（Service）和數據訪問層（Mapper），其具體的功能有：1）用戶注冊；2）登錄與退出；3）借用場地申請；4）管理場地列表；5）管理鑰匙借還；6）普通管理員初次審核；7）主頁數據請求等。如圖3所示，系統功能設計示意圖。

圖3 系統功能設計示意圖

4.2 系統開發與實現

首先是數據庫表格的建立，根據數據庫的關系模型,結合具體功能的分析,各個數據庫表的屬性構成，分別建立了如下數據庫表格，1）用戶表user，2）管理員表admin，3）場地信息表site，4）借用歷史表history等，其中場地信息表site如表1所示。

表1 場地信息表site

場地預約管理主要代碼：

系統開發的主界面分為三個部分，普通用戶、普通管理員和超級管理員，主界面的多數功能以表格的形式呈現，可依據不同的權限查閱不同的表格。主界面效果圖如圖4所示。

圖4 主界面效果圖

5 結束語

本系統主要對Spring Boot和Vue及MyBatis框架進行研究，并設計出了場地預約管理系統。該系統分為前端與后端兩個分離的子系統，讓前端的開發更注重界面的呈現與用戶的體驗，后端的開發更注重數據存儲與處理。隨著高校場地預約管理系統的使用，極大地方便了管理員對場地預約的高效、全面管理，此系統具有一定的推廣應用價值。