基于Spring Boot+Vue的場(chǎng)地預(yù)約管理系統(tǒng)的設(shè)計(jì)

杜瑛，劉冬杰

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

1 系統(tǒng)開發(fā)的意義及策略

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

2 系統(tǒng)開發(fā)采用的關(guān)鍵技術(shù)和理論研究

2.1 SSM框架

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

2.2 Spring Boot框架

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

2.3 Vue框架

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

2.4 MyBatis框架

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

2.5 MySQL數(shù)據(jù)庫

MySQL是一個(gè)關(guān)系型數(shù)據(jù)庫管理系統(tǒng)，無論是它的存儲(chǔ)方式還是安全處理都十分優(yōu)秀，MySQL還支持開發(fā)者優(yōu)化，使用Explain指令可以查看SQL語句的運(yùn)行狀態(tài)，是否使用，使用了哪些索引，方便開發(fā)者進(jìn)行調(diào)整。MySQL具有最小粒度、最多列、功能齊全、查詢速度快等優(yōu)點(diǎn)，尤其是其開源代碼，得到很多中小型網(wǎng)站的青睞。

3 系統(tǒng)開發(fā)框架設(shè)計(jì)

依照?qǐng)龅仡A(yù)約管理系統(tǒng)的需求，對(duì)系統(tǒng)的各個(gè)功能模塊進(jìn)行設(shè)計(jì)，其中包括前端系統(tǒng)、后端系統(tǒng)、數(shù)據(jù)庫三大部分的設(shè)計(jì)。本系統(tǒng)的前端選擇使用Vue.js和Element-ui進(jìn)行構(gòu)建，后端業(yè)務(wù)模塊使用SpringBoot進(jìn)行搭建，使用MyBatisPlus持久層框架對(duì)數(shù)據(jù)庫進(jìn)行交互，如圖1所示，系統(tǒng)前端架構(gòu)的設(shè)計(jì)。

圖1 系統(tǒng)前端架構(gòu)設(shè)計(jì)

在數(shù)據(jù)存儲(chǔ)上，使用了MySQL持久化存儲(chǔ)、Redis緩存以及Minio對(duì)象存儲(chǔ)服務(wù)器，基于軟件的功能需求，數(shù)據(jù)庫的設(shè)計(jì)圍繞借用歷史這一對(duì)象進(jìn)行展開，每一個(gè)借用歷史都有對(duì)應(yīng)借用者、審核者和借用的場(chǎng)地等，系統(tǒng)后端MySQL數(shù)據(jù)庫關(guān)系模型設(shè)計(jì)如圖2所示，MySQL關(guān)系模型設(shè)計(jì)。

圖2 MySQL關(guān)系模型設(shè)計(jì)

4 系統(tǒng)功能設(shè)計(jì)

4.1 系統(tǒng)功能設(shè)計(jì)

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

圖3 系統(tǒng)功能設(shè)計(jì)示意圖

4.2 系統(tǒng)開發(fā)與實(shí)現(xiàn)

首先是數(shù)據(jù)庫表格的建立，根據(jù)數(shù)據(jù)庫的關(guān)系模型,結(jié)合具體功能的分析,各個(gè)數(shù)據(jù)庫表的屬性構(gòu)成，分別建立了如下數(shù)據(jù)庫表格，1）用戶表user，2）管理員表admin，3）場(chǎng)地信息表site，4）借用歷史表history等，其中場(chǎng)地信息表site如表1所示。

表1 場(chǎng)地信息表site

場(chǎng)地預(yù)約管理主要代碼：

系統(tǒng)開發(fā)的主界面分為三個(gè)部分，普通用戶、普通管理員和超級(jí)管理員，主界面的多數(shù)功能以表格的形式呈現(xiàn)，可依據(jù)不同的權(quán)限查閱不同的表格。主界面效果圖如圖4所示。

圖4 主界面效果圖

5 結(jié)束語

本系統(tǒng)主要對(duì)Spring Boot和Vue及MyBatis框架進(jìn)行研究，并設(shè)計(jì)出了場(chǎng)地預(yù)約管理系統(tǒng)。該系統(tǒng)分為前端與后端兩個(gè)分離的子系統(tǒng)，讓前端的開發(fā)更注重界面的呈現(xiàn)與用戶的體驗(yàn)，后端的開發(fā)更注重?cái)?shù)據(jù)存儲(chǔ)與處理。隨著高校場(chǎng)地預(yù)約管理系統(tǒng)的使用，極大地方便了管理員對(duì)場(chǎng)地預(yù)約的高效、全面管理，此系統(tǒng)具有一定的推廣應(yīng)用價(jià)值。