基于Vue和Spring Boot的校園記錄管理Web App的設(shè)計與實現(xiàn)

肖文娟 王加勝

(云南師范大學(xué)信息學(xué)院 云南 昆明 650500) (西部資源環(huán)境地理信息技術(shù)教育部工程研究中心 云南 昆明 650500)

0 引 言

便捷的移動設(shè)備加速了移動應(yīng)用的普及。就其應(yīng)用類型而言，可分為原生應(yīng)用(Native App)、混合應(yīng)用(Hybrid App)以及Web應(yīng)用(Web App)[1-2]。Native App由于是基于本地系統(tǒng)(Android、iOS)開發(fā)而具有良好的交互性能和用戶體驗，但是也因此使得開發(fā)成本高、更新緩慢并且無法跨平臺。與Native App相比，Web App則能夠彌補其缺陷，但卻體驗不佳。而后出現(xiàn)的Hybrid App，結(jié)合了兩者的優(yōu)點，但由于技術(shù)的不成熟，仍然處于完善的階段。HTML5技術(shù)的發(fā)展，使得用戶體驗得到提升，并加速了Web App的發(fā)展步伐。Web App成為了構(gòu)建Web應(yīng)用的最佳選擇。

目前Web App的使用還不是很廣泛,只有少數(shù)的Web App應(yīng)用研究。大多數(shù)研究是針對前端的設(shè)計與實現(xiàn)[1,3-4]，缺乏整合后端設(shè)計與實現(xiàn)的應(yīng)用研究。這些研究注重于個性化設(shè)計、性能和開發(fā)效率上的提升。一般通過數(shù)據(jù)的壓縮處理等方式提升性能，借助快速構(gòu)建應(yīng)用程序的工具提升開發(fā)效率。當(dāng)前開發(fā)技術(shù)越來越成熟，Web App的發(fā)展空間很大，但針對系統(tǒng)化的記錄管理功能仍然缺乏相關(guān)的移動應(yīng)用研究。因此，本文基于Vue和Spring Boot框架，設(shè)計和實現(xiàn)了校園記錄管理Web App，以滿足學(xué)生用戶主體系統(tǒng)化管理校園生活記錄的需要。

1 項目概述

1.1 項目環(huán)境

為了便于項目的二次開發(fā)，該Web App使用的是前后端分離的開發(fā)方式。針對前后端兩種不同的開發(fā)環(huán)境，前端使用WebStorm，后端使用IDEA (IntelliJ IDEA)開發(fā)。開發(fā)完成后，為了測試系統(tǒng)在移動端的可用性與兼容性，分別對Android和iOS兩種不同的系統(tǒng)進行測試。項目環(huán)境見表1。

表1 項目環(huán)境

1.2 開發(fā)工具及技術(shù)說明

(1) Java語言。Java以其強大實用性和兼容性在眾多開發(fā)語言中獨樹一幟，并被廣泛應(yīng)用于Web后端開發(fā)中。

(2) MySQL。MySQL是一種關(guān)系型數(shù)據(jù)庫。其成本低，支持快速開發(fā)，具有良好的跨平臺性能。因此，成為中小型系統(tǒng)開發(fā)的首選。

(3) WebStorm。WebStorm前端開發(fā)工具由于其強大的JavaScript(JS)功能，被廣泛應(yīng)用于前端的開發(fā)工作中。

(4) IDEA。IDEA開發(fā)工具同Eclipse一樣，主要用于Java開發(fā)的集成環(huán)境中，其具有強大的代碼審查和重構(gòu)[5]的能力，是進行后端開發(fā)的首要選擇。

(5) HTML5。HTML5網(wǎng)頁技術(shù)用于構(gòu)建前端界面，其增加的很多新的特性，包括本地存儲、本地文件操作以及用于構(gòu)建頁面結(jié)構(gòu)的新元素，成為了Web App應(yīng)用完善交互性能和體驗的基礎(chǔ)。

(6) ES6。ES6 (ECMAScript 6)是一種新的Java Script語言標(biāo)準，為適應(yīng)更復(fù)雜的應(yīng)用，其新增了許多語法特性，并簡化實現(xiàn)。

(7) Spring Boot后端框架。Spring Boot中內(nèi)嵌的Tomcat服務(wù)器，直接將項目打成jar包，從而簡化項目的部署工作[6]。在項目資源管理方面，通過配置Maven工具來管理大量的項目資源，可以解決項目資源管理難的問題。另外，在配置方式上，實現(xiàn)了自動化配置，提高了開發(fā)效率。

(8) Vue。Vue是當(dāng)下流行的一個前端開發(fā)框架[7]，其提供了豐富的組件庫，支持獨立開發(fā)，解決當(dāng)前應(yīng)用開發(fā)組件不豐富的問題。此外，通過Vue，將更便于前端調(diào)用第三方工具(如Web API)。

(9) Nginx。Nginx是一個既可以提供Web服務(wù)(HTTP)，又可以提供反向代理服務(wù)的高性能服務(wù)器[8]，其強大負載能力，使其更具特點。例如，當(dāng)瀏覽器中出現(xiàn)無法瀏覽到上傳圖片的情況時，Nginx就作為一個反向代理服務(wù)器，保持性能最優(yōu)。

(10) FTP服務(wù)器。搭建在本地的FTP服務(wù)器，一方面用來存儲傳輸?shù)奈募?，另一方面能夠便于用戶訪問。FTP的文件傳送速度非?？?，非常適合于Web應(yīng)用中大文件的傳送。

2 需求分析

2.1 功能性需求

根據(jù)用戶類型，將 App的功能需求分為兩部分：學(xué)生用戶功能需求和管理員用戶功能需求。

該 App中的學(xué)生普通用戶功能需求主要包含如下內(nèi)容：

(1) 查看校園動態(tài)。對于已注冊的用戶(不管是否處于登錄狀態(tài))，都可以在該Web App首頁中查看校園動態(tài)(包括校園風(fēng)光和校園活動)，從而幫助學(xué)生第一時間了解校園動態(tài)信息。

(2) 課程管理。學(xué)習(xí)作為學(xué)生的主要內(nèi)容，課程學(xué)習(xí)記錄的管理很重要，特別是作業(yè)的管理。該Web App能夠為學(xué)生用戶提供課程基本信息的管理功能：錄入、更改、刪除和查詢。每門課程可以管理多門作業(yè)。

(3) 健康管理。健康管理主要是通過逐月統(tǒng)計用戶的生病情況的方式，幫助學(xué)生及時發(fā)現(xiàn)生病的規(guī)律，了解自身狀況。具有提供添加、查看、修改、刪除和統(tǒng)計健康記錄的功能。

(4) 活動管理?；顒庸芾戆▽W(xué)生參與的校園活動記錄和其他活動的增刪改查基本操作。

(5) 相冊管理。該部分功能包括相片的上傳、刪除、查詢和下載。

(6) 查詢校園通訊錄。該功能幫助學(xué)生查詢校園通訊錄和撥號。校園通訊錄為校園學(xué)院、公共部門的通信信息。針對大多數(shù)的學(xué)生用戶而言，其使用并不頻繁，不會將其存儲，但卻是很必要。

該 Web App中的管理員用戶功能主要包含如下內(nèi)容：

(1) 用戶管理功能。包括學(xué)生用戶信息查詢、重置學(xué)生用戶密碼和刪除學(xué)生用戶。

(2) 校園新聞管理功能。服務(wù)于管理員進行校園新聞信息的增刪改查和發(fā)布。

(3) 校園通訊錄管理功能。包括增加、刪除、修改和查詢校園通訊錄信息。

2.2 非功能性需求

(1) 可靠性。充分考慮到Web App應(yīng)用運行的諸多異常問題(如數(shù)據(jù)異常等)，并進行處理。

(2) 易用性。在考慮用戶使用習(xí)慣的基礎(chǔ)上，保持界面簡潔而美觀、添加人性化提示，保持系統(tǒng)的易用性。

(3) 性能。在服務(wù)器負載、內(nèi)容緩存、數(shù)據(jù)壓縮等方面考慮優(yōu)化性能，使得校園記錄管理Web App能對用戶的操作提供快速的響應(yīng)。

3 總體設(shè)計

3.1 模塊設(shè)計

根據(jù)第2節(jié)的功能性需求分析，得到系統(tǒng)模塊設(shè)計如圖1所示。

圖1 系統(tǒng)模塊設(shè)計

活動管理模塊是App中主要的模塊，活動占據(jù)學(xué)生生活很大一部分。然而，比起學(xué)習(xí)，學(xué)生更容易忘記活動的事項，尤其是在填寫簡歷的時候，活動管理顯得尤為重要。有兩種方式添加活動記錄。第一種是學(xué)生處于登錄狀態(tài)時，在選擇查看校園活動之后，可將其添加為活動記錄，即能生成校園活動記錄信息。第二種是進入到學(xué)生用戶管理首頁，在“我的活動”入口中手動添加活動記錄信息。圖2顯示的是進入學(xué)生用戶管理首頁后進行活動管理的流程。Web App中其他管理模塊流程與其類似。

圖2 活動管理模塊流程圖

3.2 數(shù)據(jù)庫設(shè)計

為了能夠減少數(shù)據(jù)不必要的冗余，節(jié)省存儲空間，保持數(shù)據(jù)庫的輕便，從而便于數(shù)據(jù)的維護和更新，研究基于第三范式進行數(shù)據(jù)庫設(shè)計。

根據(jù)圖1所示的系統(tǒng)模塊設(shè)計，在數(shù)據(jù)庫中總共建立了8張表，各個表的詳細信息見表2。將sys_user表(用戶表，包括所有用戶，即學(xué)生用戶和管理員用戶)作為主表與user_extend表、album表、healthy表、phone_book表、active_move表和course表建立聯(lián)系，如圖3所示。數(shù)據(jù)庫以InnoDB為存儲引擎(以ID為索引)，所有表都以user_id(用戶編號)作為關(guān)聯(lián)節(jié)點，通過其對數(shù)據(jù)進行操作。

表2 數(shù)據(jù)庫表信息

續(xù)表2

圖3 系統(tǒng)E-R圖

3.3 接口設(shè)計

接口是分離的前后端通信的基礎(chǔ)，Web App后端需要設(shè)計接口，為前端的頁面提供數(shù)據(jù)。研究使用Restful(Representational State Transfer)風(fēng)格設(shè)計接口，其優(yōu)點是結(jié)構(gòu)清晰、一目了然。接口開發(fā)使用HTTP 協(xié)議，遵循可尋址性原則。將健康狀況類對應(yīng)的接口信息表作為接口設(shè)計的示例，如表3所示，其中接口服務(wù)配置端口為8080?？梢钥闯?，最終生成的接口地址中前三節(jié)URL的映射是相同的，即“http://localhost:8080/healthy/”，這樣統(tǒng)一的接口設(shè)計規(guī)范，便于應(yīng)用的管理和實現(xiàn)。

表3 接口設(shè)計(健康狀況)

4 前端實現(xiàn)與優(yōu)化

4.1 MVVM模式

本文使用了Vue框架設(shè)計前端，頁面采用響應(yīng)式布局[9]來適應(yīng)不同大小的移動設(shè)備。使用的開發(fā)模式是基于MVC (Model-View-Controller)衍生而來的MVVM (Model-View-ViewModel)，其架構(gòu)圖如圖4所示。該模式與MVC模式相比，不再局限于數(shù)據(jù)單向綁定，而是能夠?qū)崿F(xiàn)數(shù)據(jù)雙向綁定、同步刷新。由圖4可知，View層和Model層是通過ViewModel層建立聯(lián)系的。用戶在View層的操作，通過數(shù)據(jù)綁定傳達給ViewModel層，進而更新Model層[10]。Model層更新之后，ViewModel層也自動隨之變化，對View層重新渲染更新。

圖4 MVVM模式

(1) 數(shù)據(jù)層。Model層通過接口的方式從后端接收數(shù)據(jù)，該層中最重要的是接口請求，本文使用的是axios。axios 作為一個封裝了的ajax (Asynchronous Javascript And XML)，其優(yōu)點是能夠?qū)惒秸埱笸交瑥亩喕苏埱髾C制，并且數(shù)據(jù)持久化，用戶體驗良好。

(2) 視圖數(shù)據(jù)層。ViewModel層是模式中最為重要的一部分，也是Model層與View層重要的聯(lián)系。在Vue中通過雙向綁定(即v-model指令)，可實現(xiàn)數(shù)據(jù)與視圖的實時更新。

(3) 視圖層。View層Vue中最關(guān)注的地方，內(nèi)置的Vue模板語言實現(xiàn)了內(nèi)容和樣式的分離，便于展現(xiàn)和修改。而組件化系統(tǒng)是Vue框架中最特色的內(nèi)容，各個頁面即為一個組件，父組件和子組件通過接口的方式建立通信。圖5為學(xué)生用戶模塊中父組件向子組件傳送數(shù)據(jù)的示例，箭頭代表通信方向。

圖5 學(xué)生用戶模塊中父組件向子組件傳送數(shù)據(jù)

在Vue中，各個組件通過路由(即Vue Router)來實現(xiàn)定向。對于需要通信的組件，都需要注冊路由，進而在頁面掛載。針對組件加載過程中耗時的問題，本文通過在View層中使用按需加載的方式加載組件，進而優(yōu)化加載，提升資源的顯示速度。以editorHealthy組件為例，其按需加載組件的實現(xiàn)代碼如下：

const editorHealthy = r => require.ensure([], () => r(require(′../page/me/editorHealthy.page.vue′)),′editorHealthy′)

export default new Router({

routes: [

{

path:′/editorHealthy/:userId/:id/:value/:type/:result/:time/′,

name: ′editorHealthy′,

component: editorHealthy

}

]

})

代碼中按需加載使用的函數(shù)為“require.ensure”，“path”為組件的路徑(在此使用的是二級路徑)，“name”為組件名，“component”即為該組件。

4.2 關(guān)鍵技術(shù)

(1) 分頁。對于某些頁面，例如“校園動態(tài)瀏覽”模塊，其接收的數(shù)據(jù)量是很龐大的。如果全部查詢，不僅超出頁面的范圍，還會影響用戶的體驗。因此，本文通過使用分頁技術(shù)來限制查詢，加快響應(yīng)。在Vue中使用的組件是loadmore，組件上需要綁定loadTop和loadBottom方法實現(xiàn)上下頁面的切換。其實現(xiàn)的代碼如下：

loadTop () {

this.allLoaded = false

if (this. num > 1) {

this. num --

}

this.getData()

this.＄refs.loadmore.onTopLoaded()

},

loadBottom () {

if (this. num < this. total) {

this. num ++

} else if (this. num >= this. total) {

this.allLoaded = true

}

this.getData()

this.＄refs.loadmore.onBottomLoaded()

}

(2) 本地存儲。在HTML5中，存在著的兩種存儲數(shù)據(jù)的方式：會話存儲(sessionStorage)和本地存儲(localStorage)。兩者的不同之處在于，sessionStorage在窗口關(guān)閉之后，數(shù)據(jù)立即會被清除；而localStorage則不然，其數(shù)據(jù)保存時間比sessionStorage更長，而后更快加載頁面。因此，在改善用戶體驗方面，localStorage更適合。

(3) 數(shù)據(jù)壓縮。在很多功能模塊中，尤其是作業(yè)管理模塊和相冊管理模塊，有時候獲取到的圖片數(shù)據(jù)是比較大的。為了減小數(shù)據(jù)傳輸?shù)膲毫?，本文通過HttpClient調(diào)用第三方Web API實現(xiàn)數(shù)據(jù)壓縮處理。

5 后端實現(xiàn)與優(yōu)化

5.1 三層架構(gòu)設(shè)計

后端基于Spring Boot開發(fā)，使用三層架構(gòu)，即數(shù)據(jù)訪問層(Dao)、業(yè)務(wù)邏輯層(Service)、控制層(Controller)。

(1) 數(shù)據(jù)訪問。Dao層是最底層的設(shè)計，用來操作數(shù)據(jù)庫，本文使用MyBatis持久化框架來實現(xiàn)接口開發(fā)。與Hibernate相比，MyBatis操作數(shù)據(jù)庫更簡單和靈活，其魅力在于映射器(Mapper)中的XML文件。Dao層設(shè)計步驟為：① 在MySql數(shù)據(jù)庫中生成數(shù)據(jù)庫表；② 通過XML文件實現(xiàn)數(shù)據(jù)庫的映射和操作。

(2) 業(yè)務(wù)邏輯層。Service層為中間層，在Dao層和Controller層之間進行邏輯處理工作。考慮到程序的耦合度問題，為了降低各個模塊的關(guān)聯(lián)，每個接口都封裝有各自的業(yè)務(wù)處理方法。

(3) 控制層。Controller層是第三層，通過調(diào)用Service層，與前端頁面交互。

5.2 關(guān)鍵技術(shù)

(1) 跨域訪問。跨域訪問是實現(xiàn)前端與后端交互的基礎(chǔ)工作?？缬蛸Y源(CORS)通過允許所有來源、標(biāo)頭列表、請求方法來實現(xiàn)靈活的跨域請求。其代碼實現(xiàn)如圖6所示。

圖6 跨域訪問

(2) 加密。對于一個可靠的系統(tǒng)，用戶信息的安全性是首要考慮的問題。而重中之重的就是用戶賬戶的安全問題，尤其是密碼。目前密碼加密的主流方法是MD5、base64、Sha256。本文使用MD5 (Message-Digest Algorithm)信息-摘要算法，獲得密文之后，將密文轉(zhuǎn)換成十六進制的字符串形式。與base64相比，安全性更高；與Sha256相比，耗時短。

(3) 文件上傳。在很多功能模塊中(活動管理模塊、相冊管理模塊、作業(yè)管理模塊等)，都需要通過FTP實現(xiàn)文件上傳功能。其步驟為：① 與FTP建立連接，如圖7所示；② 配置文件名、文件路徑；③ 讀取文件并上傳到FTP服務(wù)器；④ 返回路徑+文件名存放到數(shù)據(jù)庫。

圖7 連接FTP配置

6 系統(tǒng)實現(xiàn)

項目開發(fā)完成之后，該Web App應(yīng)用在Chrome瀏覽器和移動平臺(Android 4.4.4版本、Android 5.5.5版本、iPhone 5s和iPhone 6s)經(jīng)過測試并無異常，頁面顯示以及與用戶交互方面，與需求一致。學(xué)生用戶主要功能模塊如圖8所示，管理員功能模塊如圖9所示。

(a) 查詢校園動態(tài) (b) 課程管理

(c) 活動管理 (d) 相冊管理圖8 學(xué)生用戶模塊

(a) 管理員用戶首頁 (b) 用戶管理

(c) 通訊錄管理 (d) 校園新聞管理圖9 管理員用戶模塊

7 結(jié) 語

本文論述了基于Vue和Spring Boot兩種框架下的

校園記錄管理Web App的設(shè)計與實現(xiàn)，主要介紹了項目需求分析、數(shù)據(jù)庫設(shè)計、接口設(shè)計和技術(shù)實現(xiàn)等內(nèi)容。通過使用負載平衡器、緩存技術(shù)、數(shù)據(jù)壓縮和改進頁面渲染等方式提升性能。

通過實踐驗證了Spring Boot和Vue這兩種框架的優(yōu)勢。此外，經(jīng)過不同平臺的測試，也驗證了Web App的跨平臺的重要性質(zhì)。本文設(shè)計的Web App雖然達到了預(yù)期目標(biāo)，但在安全性和活動記錄添加方面有待提升。下一步擬使用Shiro[11]安全機制認證用戶權(quán)限提高安全性，結(jié)合第三方應(yīng)用實現(xiàn)自動添加活動記錄。