肖文娟 王加勝

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

0 引 言

便捷的移動(dòng)設(shè)備加速了移動(dòng)應(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)開(kāi)發(fā)而具有良好的交互性能和用戶體驗(yàn)，但是也因此使得開(kāi)發(fā)成本高、更新緩慢并且無(wú)法跨平臺(tái)。與Native App相比，Web App則能夠彌補(bǔ)其缺陷，但卻體驗(yàn)不佳。而后出現(xiàn)的Hybrid App，結(jié)合了兩者的優(yōu)點(diǎn)，但由于技術(shù)的不成熟，仍然處于完善的階段。HTML5技術(shù)的發(fā)展，使得用戶體驗(yàn)得到提升，并加速了Web App的發(fā)展步伐。Web App成為了構(gòu)建Web應(yīng)用的最佳選擇。

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

1 項(xiàng)目概述

1.1 項(xiàng)目環(huán)境

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

表1 項(xiàng)目環(huán)境

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

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

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

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

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

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

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

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

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

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

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

2 需求分析

2.1 功能性需求

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

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

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

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

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

(4) 活動(dòng)管理?；顒?dòng)管理包括學(xué)生參與的校園活動(dòng)記錄和其他活動(dòng)的增刪改查基本操作。

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

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

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

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

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

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

2.2 非功能性需求

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

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

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

3 總體設(shè)計(jì)

3.1 模塊設(shè)計(jì)

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

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

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

圖2 活動(dòng)管理模塊流程圖

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

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

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

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

續(xù)表2

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

3.3 接口設(shè)計(jì)

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

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

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

4.1 MVVM模式

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

圖4 MVVM模式

(1) 數(shù)據(jù)層。Model層通過(guò)接口的方式從后端接收數(shù)據(jù)，該層中最重要的是接口請(qǐng)求，本文使用的是axios。axios 作為一個(gè)封裝了的ajax (Asynchronous Javascript And XML)，其優(yōu)點(diǎn)是能夠?qū)惒秸?qǐng)求同步化，從而簡(jiǎn)化了請(qǐng)求機(jī)制，并且數(shù)據(jù)持久化，用戶體驗(yàn)良好。

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

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

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

在Vue中，各個(gè)組件通過(guò)路由(即Vue Router)來(lái)實(shí)現(xiàn)定向。對(duì)于需要通信的組件，都需要注冊(cè)路由，進(jìn)而在頁(yè)面掛載。針對(duì)組件加載過(guò)程中耗時(shí)的問(wèn)題，本文通過(guò)在View層中使用按需加載的方式加載組件，進(jìn)而優(yōu)化加載，提升資源的顯示速度。以editorHealthy組件為例，其按需加載組件的實(shí)現(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”為組件的路徑(在此使用的是二級(jí)路徑)，“name”為組件名，“component”即為該組件。

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

(1) 分頁(yè)。對(duì)于某些頁(yè)面，例如“校園動(dòng)態(tài)瀏覽”模塊，其接收的數(shù)據(jù)量是很龐大的。如果全部查詢，不僅超出頁(yè)面的范圍，還會(huì)影響用戶的體驗(yàn)。因此，本文通過(guò)使用分頁(yè)技術(shù)來(lái)限制查詢，加快響應(yīng)。在Vue中使用的組件是loadmore，組件上需要綁定loadTop和loadBottom方法實(shí)現(xiàn)上下頁(yè)面的切換。其實(shí)現(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) 本地存儲(chǔ)。在HTML5中，存在著的兩種存儲(chǔ)數(shù)據(jù)的方式：會(huì)話存儲(chǔ)(sessionStorage)和本地存儲(chǔ)(localStorage)。兩者的不同之處在于，sessionStorage在窗口關(guān)閉之后，數(shù)據(jù)立即會(huì)被清除；而localStorage則不然，其數(shù)據(jù)保存時(shí)間比sessionStorage更長(zhǎng)，而后更快加載頁(yè)面。因此，在改善用戶體驗(yàn)方面，localStorage更適合。

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

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

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

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

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

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

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

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

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

圖6 跨域訪問(wèn)

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

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

圖7 連接FTP配置

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

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

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

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

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

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

7 結(jié) 語(yǔ)

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

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

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