結(jié)合微信小程序與JavaWeb框架的前后端分離平臺的設(shè)計與實現(xiàn)
——以KEBO運(yùn)動平臺為例

趙圓圓，陳潤輝

（湛江科技學(xué)院，廣東 湛江 524000）

0 引言

隨著科技的進(jìn)步以及網(wǎng)絡(luò)的遍及，信息的傳播方式和速度發(fā)生了巨大的改變，這種改變有效提高了學(xué)習(xí)工作的效率，使得人們的生活節(jié)奏越來越快，再加上高密度的學(xué)習(xí)和高壓力的工作，使得大部分的社會人群對身體健康狀況普遍關(guān)注[1]。本項目提供了一個一起打卡運(yùn)動的平臺，并且可以針對用戶的要求，提供合理的健身計劃，讓喜歡運(yùn)動健身的人在平臺上分享自己的健身成果和健身教程，從而激勵更多的人加入進(jìn)來，讓運(yùn)動愛好者可以聚在一起形成運(yùn)動圈，在增強(qiáng)體質(zhì)的同時擴(kuò)大交友圈子，增加運(yùn)動樂趣。微信小程序是一種不需要下載，也不需要安裝就可以直接使用的應(yīng)用，可為用戶節(jié)省內(nèi)存空間，具有方便快捷、安全穩(wěn)定等優(yōu)點(diǎn)。健身微信小程序從用戶的角度去設(shè)計開發(fā)，為喜歡運(yùn)動的用戶提供更多的便利。

1 架構(gòu)及技術(shù)選型的背景

微信小程序作為移動端的應(yīng)用，其與后臺服務(wù)器進(jìn)行數(shù)據(jù)交換的最簡單高效的方式無疑是前后端分離。前后端分離目前已經(jīng)成為互聯(lián)網(wǎng)項目開發(fā)的業(yè)界標(biāo)準(zhǔn)使用方式[2]。其核心思想是前端使用超文本標(biāo)記語言（HTML）編寫的頁面通過異步傳輸?shù)目蚣苷{(diào)用后端RESTFUL風(fēng)格的API接口，且利用JSON進(jìn)行數(shù)據(jù)交互。

通過微信小程序作為用戶交互界面，接受用戶的操作，利用小程序封裝完成網(wǎng)絡(luò)請求API訪問服務(wù)端的地址，從而發(fā)起請求，服務(wù)端響應(yīng)請求并且操作數(shù)據(jù)庫。將獲取的數(shù)據(jù)以JSON格式返回小程序，小程序渲染數(shù)據(jù)并展示在用戶交互界面中，實現(xiàn)前后端分離用戶交互流程。

2 前后端分離架構(gòu)的設(shè)計

使用微信開放平臺提供的微信小程序開發(fā)環(huán)境進(jìn)行前端開發(fā)的設(shè)計，數(shù)據(jù)庫管理使用MySQL，服務(wù)端使用基于SpringBoot的后臺管理和小程序進(jìn)行數(shù)據(jù)交互管理的接口。

SpringBoot是基于主流Web框架Spring而整合形成的全新框架，可以很便利地設(shè)計出符合前后端分離架構(gòu)要求的RESTFUL接口，提高了系統(tǒng)整體的可行性和可靠性。

2.1 服務(wù)端的具體架構(gòu)

采用Mybatis框架來構(gòu)建服務(wù)端的持久化層，有效防止SQL注入安全問題的發(fā)生。

在系統(tǒng)安全以及授權(quán)驗證方面，采用Apache基金會旗下的Shiro框架。Shiro框架提供了很多易于使用的API接口，讓開發(fā)者以更簡單的方式在自己的項目中部署身份驗證、授權(quán)、密碼和會話管理的版塊。

用戶發(fā)起請求時，請求會經(jīng)過Shiro中的SecurityManager組件進(jìn)行身份驗證，再通過Relams組件進(jìn)行授權(quán)。授權(quán)和驗證的過程中，通過持久層框架MyBatis查詢用戶的身份權(quán)限信息，再對訪問用戶進(jìn)行授權(quán)，并且保留用戶的session和登錄態(tài)。獲取權(quán)限后，Shiro框架會比對接口訪問所需權(quán)限和用戶獲得的權(quán)限，一致方可訪問，如圖1所示。

圖1 數(shù)據(jù)持久化

2.2 前端具體架構(gòu)

微信小程序主要用到JS，WXML，WXSS，JSON進(jìn)行頁面的外觀設(shè)計和功能實現(xiàn)，每個頁面都會有對應(yīng)上述4個文件。在JS文件中，主要通過調(diào)用wx.request()接口進(jìn)行網(wǎng)絡(luò)請求。

3 項目功能設(shè)計

通過獨(dú)特的互聯(lián)網(wǎng)社交生態(tài)，讓用戶主動重視身體健康的重要性[3]。項目主要分為健康知識分享、運(yùn)動打卡、校圈服務(wù)和社交4大模塊。健康知識分享模塊為提供一個用戶發(fā)表自己的健康見解、運(yùn)動技巧，獲取健康知識、運(yùn)動知識的平臺。運(yùn)動打卡模塊給用戶提供運(yùn)動結(jié)束后打卡和分享本次運(yùn)動的經(jīng)歷，從而讓用戶堅持運(yùn)動有動力。校圈服務(wù)模塊主要針對各大高校師生，提供在健康方面的校園服務(wù)。社交模塊為用戶提供一個以運(yùn)動交友的平臺，其中還包括運(yùn)動打卡相互競爭等鼓勵刺激用戶積極運(yùn)動的功能。

4 項目的實現(xiàn)

4.1 首頁

健身用戶打開小程序就能看到為其推送的健身方面的各種最新資訊，同時系統(tǒng)將最新的活動通過輪播圖展現(xiàn)給用戶，使資訊更具多樣化。對于一些健身的入門者，健身需要循序漸進(jìn)，所以提供了在線播放視頻的功能，方便初學(xué)者模仿并慢慢掌握要領(lǐng)。而對于那些已經(jīng)健身多年、頗有經(jīng)驗的用戶來說，也可以通過視頻學(xué)習(xí)新運(yùn)動，學(xué)習(xí)之前沒掌握的要領(lǐng)。健身專家也可以通過發(fā)布視頻來分享自己的健身心得，提升用戶的健身興趣。

4.2 社交

社交模塊設(shè)有運(yùn)動打卡功能，促使健身用戶每天都能堅持在平臺上打卡，變得更加自律。于此同時，用戶之間也可以采取互相競爭的形式，看哪一個先漏打卡，則哪個就失敗，競爭獲勝的用戶可以獲取平臺獎勵的積分。項目主要基于校內(nèi)，所以同時也設(shè)置了校圈分享的模塊，用戶可以在這個模塊里分享自己的健身心得、發(fā)布自己的二手閑置、互相鼓勵同校且喜歡運(yùn)動的人群。

4.3 我的

用戶進(jìn)行登錄注冊后，完善自己的個人資料，并可以查看到自己的粉絲、所關(guān)注的博主，以及收藏的健身知識。首頁、社交和關(guān)注頁面如圖2所示。

圖2 小程序?qū)崿F(xiàn)

5 結(jié)語

項目開發(fā)的過程采用了瀑布模型開發(fā)流程，思路清晰、目標(biāo)明確、分工合理、可行性強(qiáng)。通過本應(yīng)用，各階段的用戶都可以進(jìn)行合理的健身，健身用戶之間可以互動、運(yùn)動打卡、分享觀看健身視頻、健身知識、校圈分享等，為健身用戶提供更多的便利。