楊 宇 徐萬(wàn)明

（1.貴州電子信息職業(yè)技術(shù)學(xué)院，貴州 凱里 556000；2.黔東南民族職業(yè)技術(shù)學(xué)院，貴州 凱里 556000）

1 引言

隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)不斷發(fā)展，微信小程序生態(tài)圈逐步完善，從而推動(dòng)微信小程序在各個(gè)行業(yè)的廣泛應(yīng)用[1]。目前，開(kāi)發(fā)微信小程序存在的一個(gè)普遍的情況就是后臺(tái)多為騰訊云提供的云數(shù)據(jù)庫(kù)與運(yùn)服務(wù)器[2]，部署簡(jiǎn)單，操作方便，但是靈活性不好，修改難度大。基于此，本文采用微信官方提供WeUI基礎(chǔ)樣式庫(kù)[3]，結(jié)合Springboot技術(shù)[4]，以MySQL數(shù)據(jù)庫(kù)作為數(shù)據(jù)存儲(chǔ)平臺(tái)，設(shè)計(jì)并實(shí)現(xiàn)微信小程序用戶(hù)管理系統(tǒng)。

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

系統(tǒng)功能設(shè)計(jì)主要包括微信小程序設(shè)計(jì)及后臺(tái)管理系統(tǒng)設(shè)計(jì)。

2.1 微信小程序設(shè)計(jì)

微信小程序采用微信開(kāi)發(fā)者工具作為程序編輯、編譯平臺(tái)，利用WeUI 基礎(chǔ)樣式庫(kù)對(duì)用戶(hù)登錄功能進(jìn)行設(shè)計(jì)。一個(gè)微信小程序主體主要由三個(gè)部分組成，分別是：app.js、app.json、app.wxss，其中app.js是必須存在的文件，主要實(shí)現(xiàn)小程序的主體邏輯處理，在該文件中，通過(guò)調(diào)用App()函數(shù)實(shí)現(xiàn)小程序的注冊(cè)，該方法只能調(diào)用一次，同時(shí)該函數(shù)通過(guò)一個(gè)對(duì)象參數(shù)綁定了生命周期回調(diào)函數(shù)、錯(cuò)誤監(jiān)聽(tīng)及頁(yè)面不存在監(jiān)聽(tīng)等函數(shù)，其重要參如下：

（1）OnLaunch：該函數(shù)監(jiān)聽(tīng)小程序初始化回調(diào)功能；

（2）OnShow：該函數(shù)實(shí)現(xiàn)監(jiān)聽(tīng)小程序啟動(dòng)后切后臺(tái)回調(diào)功能；

（3）OnHide：該函數(shù)實(shí)現(xiàn)監(jiān)聽(tīng)小程序切后臺(tái)回調(diào)功能；

（4）OnError：該函數(shù)實(shí)現(xiàn)監(jiān)聽(tīng)小程序發(fā)生錯(cuò)誤回調(diào)功能；

（5）OnPageNotFound：該函數(shù)實(shí)現(xiàn)監(jiān)聽(tīng)頁(yè)面不存在回調(diào)功能。

小程序的生命周期主要分為應(yīng)用生命周期和頁(yè)面生命周期，其中應(yīng)用生命周期的工作流程是：用戶(hù)第一次啟動(dòng)小程序，觸發(fā)OnLaunch 函數(shù)調(diào)用，實(shí)現(xiàn)小程序初始化等任務(wù)，當(dāng)初始化完成后，觸發(fā)OnShow 函數(shù)被調(diào)用，監(jiān)聽(tīng)小程序顯示，當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)，觸發(fā)OnHide 函數(shù)被調(diào)用，當(dāng)小程序后臺(tái)進(jìn)入前臺(tái)，又觸發(fā)OnShow方法的調(diào)用，當(dāng)小程序在后臺(tái)運(yùn)行一段時(shí)間或者系統(tǒng)資源占用過(guò)高時(shí)，就會(huì)被自動(dòng)銷(xiāo)毀。頁(yè)面生命周期的工作流程是：小程序注冊(cè)完成后，加載頁(yè)面，會(huì)觸發(fā)onLoad 函數(shù)被調(diào)用，頁(yè)面加載完成后，會(huì)觸發(fā)onShow函數(shù)被調(diào)用，顯示頁(yè)面，小程序在后臺(tái)運(yùn)行或者跳轉(zhuǎn)到其他頁(yè)面時(shí)，會(huì)觸發(fā)onHide函數(shù)被調(diào)用，當(dāng)小程序由后臺(tái)進(jìn)入到前臺(tái)運(yùn)行或重新進(jìn)入頁(yè)面時(shí)，觸發(fā)onShow 函數(shù)被調(diào)用，當(dāng)使用重定向方法wx.redirectTo(OBJECT)或關(guān)閉當(dāng)前頁(yè)返回上一頁(yè)wx.navigateBack()，觸發(fā)onUnload。同時(shí)，應(yīng)用生命周期會(huì)影響到頁(yè)面生命周期。

在完成基礎(chǔ)配置搭建項(xiàng)目開(kāi)發(fā)工程后，即可創(chuàng)建用戶(hù)登錄login 包，該包下面包含login.js、login.json、login.wxml 及l(fā)ogin.wxss，其中l(wèi)ogin.wxml、login.wxss、login.js 對(duì)應(yīng)網(wǎng)頁(yè)編程中的HTML、CSS、JS，login.wxxml 實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)，框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。login.wxss實(shí)現(xiàn)頁(yè)面樣式，是一套樣式語(yǔ)言，用于描述WXML 的組件樣式，用來(lái)決定WXML 的組件應(yīng)該怎么顯示。login.js實(shí)現(xiàn)頁(yè)面處理邏輯，login.json實(shí)現(xiàn)頁(yè)面基本配置。微信小程序中用戶(hù)登錄界面設(shè)計(jì)如圖1所示。

圖1 微信小程序用戶(hù)登錄界面

當(dāng)用戶(hù)輸入用戶(hù)名和密碼，通過(guò)參數(shù)校驗(yàn)后，并與當(dāng)前登錄時(shí)間一起封裝到data對(duì)象中，然后通過(guò)WX模塊中的request 方法發(fā)送到后臺(tái)管理系統(tǒng)中指定url 方法，對(duì)接收參數(shù)進(jìn)行處理，最后返回一個(gè)用戶(hù)對(duì)象（包含用戶(hù)名username，登錄密碼password，用戶(hù)是否被禁用標(biāo)識(shí)disableflag）給微信小程序端，小程序端對(duì)接收到用戶(hù)對(duì)象處理流程如圖2所示。

圖2 微信用戶(hù)登錄處理流程

2.2 后臺(tái)管理系統(tǒng)設(shè)計(jì)

后臺(tái)管理系統(tǒng)的服務(wù)端采用SpringBoot框架，結(jié)合Shiro安全控制機(jī)制，Jwt 登錄認(rèn)證，以Java 作為編程語(yǔ)言，以MySQL作為數(shù)據(jù)庫(kù)進(jìn)行設(shè)計(jì)[5]，前臺(tái)頁(yè)面的實(shí)現(xiàn)采用了基于VUE技術(shù)的ElmentUI組件，其采用完全響應(yīng)式布局，使用扁平化設(shè)計(jì)，支持電腦、平板、手機(jī)等主流訪問(wèn)設(shè)備[6]，系統(tǒng)技術(shù)構(gòu)架如圖3所示。

圖3 系統(tǒng)技術(shù)構(gòu)架

Springboot 是伴隨Spring4.0 而誕生的，它以簡(jiǎn)化Spring的配置及開(kāi)發(fā)為目的，其通過(guò)整體管理應(yīng)用程序的設(shè)計(jì)思想將開(kāi)發(fā)人員從繁瑣的項(xiàng)目配置工程中解脫出來(lái)，讓開(kāi)發(fā)人員只需關(guān)注具體業(yè)務(wù)邏輯的開(kāi)發(fā)與設(shè)計(jì)，從而在保證系統(tǒng)穩(wěn)定性的同時(shí)提高了開(kāi)發(fā)效率。Springboot的核心功能是自動(dòng)配置，只要有相應(yīng)的jar 包，即可實(shí)現(xiàn)自動(dòng)配置，如果自動(dòng)配置不滿(mǎn)足使用需求，可以靈活手動(dòng)添加配置。它提供了豐富的開(kāi)發(fā)組件，并且內(nèi)嵌了Tomcat、Jetty等Web應(yīng)用容器，同時(shí)還集成了系統(tǒng)監(jiān)控等功能，便于快速搭建企業(yè)級(jí)的應(yīng)用程序并使用。

Springboot具有如下特點(diǎn)：

（1）快速構(gòu)建獨(dú)立運(yùn)行的Spring項(xiàng)目；

（2）無(wú)須依賴(lài)外部Servlet容器，應(yīng)用無(wú)需打成WAR 包；項(xiàng)目可以打包成jar獨(dú)自運(yùn)行；

（3）提供一系列starter pom 來(lái)簡(jiǎn)化Maven 的依賴(lài)加載；

（4）大量的自動(dòng)配置，對(duì)主流開(kāi)發(fā)框架的無(wú)配置集成；

（5）無(wú)須配置XML，開(kāi)箱即用，簡(jiǎn)化開(kāi)發(fā)，同時(shí)也可以修改默認(rèn)值來(lái)滿(mǎn)足特定的需求；

（6）Springboot 并不是對(duì)Spring 功能上的增強(qiáng)，而是提供了一種快速使用Spring 的方式；

（7）極大提高了開(kāi)發(fā)、部署效率。

Shiro 是一個(gè)強(qiáng)大易用的Java 安全框架，通過(guò)提供回話(huà)管理、身份驗(yàn)證、登錄授權(quán)、密碼校驗(yàn)等功能，方便用戶(hù)開(kāi)發(fā)任何移動(dòng)應(yīng)用程序，其主要包括Subject,Realms 和Security-Manager三大核心組件，Subject用于管理當(dāng)前用戶(hù)的安全操作，Realm是Shiro與應(yīng)用安全數(shù)據(jù)間的連接器，Shiro通過(guò)從Realms中查找用戶(hù)及授權(quán)信息，從而實(shí)現(xiàn)對(duì)用戶(hù)的登錄認(rèn)證及訪問(wèn)全權(quán)控制的驗(yàn)證。

Vue是一套采用自底向上增量式技術(shù)設(shè)計(jì)的漸進(jìn)式用戶(hù)界面的前端框架。響應(yīng)式數(shù)據(jù)綁定與組合式視圖組件是其兩個(gè)主要的計(jì)算核心點(diǎn)，其通過(guò)在內(nèi)存中生成與真實(shí)DOM對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)，實(shí)現(xiàn)虛擬DOM 設(shè)計(jì)，采用MVVM 設(shè)計(jì)模式，便于與第三方庫(kù)或項(xiàng)目進(jìn)行整合。

ElementUI 是“餓了么”基于VUE2.0 技術(shù)推出的桌面端組件庫(kù)，由于其豐富的PC組件，減少了用戶(hù)對(duì)常用組件的封裝，從而降低開(kāi)發(fā)難度。在使用Vue和ElementUI前，需要完成以下幾個(gè)基本配置：

（1）安裝nodejs；

（2）安裝vue-cli 手腳架，操作指令為：cnpm install vue；cnpm install vue-cli-g；

（3）初始化webpack，操作命令為：vue init webpack 項(xiàng)目名；

（4）安裝element-ui，然后在index.js 中引入全局注冊(cè)即可，操作命令為：

搭建好前端開(kāi)發(fā)環(huán)境，通過(guò)ElementUI 設(shè)計(jì)微信用戶(hù)管理模塊主要實(shí)現(xiàn)對(duì)微信用戶(hù)的新增、修改、刪除、查詢(xún)等維護(hù)管理，前端頁(yè)面功能如圖4所示。

圖4 微信管理前端頁(yè)面

修改功能主要是用戶(hù)是否禁用進(jìn)行管控，當(dāng)禁用微信用戶(hù)時(shí)，其無(wú)法登錄。服務(wù)端在對(duì)微信用戶(hù)進(jìn)行增、刪、改、查采用MSCM 構(gòu)架，其中controller.java 為控制層，其通過(guò)service的接口來(lái)控制業(yè)務(wù)流程，也可通過(guò)指定url接收前端傳過(guò)來(lái)的參數(shù)進(jìn)行業(yè)務(wù)操作，server.java為業(yè)務(wù)邏輯層，其主要用于定義業(yè)務(wù)邏輯相關(guān)接口，serviceImpl.java用于對(duì)server.java中的接口函數(shù)進(jìn)行具體實(shí)現(xiàn)，mapper.java 為數(shù)據(jù)存儲(chǔ)對(duì)象，是一個(gè)接口，其中的方法名與mapper.xml中同名，mapper.xml用于寫(xiě)SQL 語(yǔ)句，對(duì)數(shù)據(jù)庫(kù)進(jìn)行具體操作，訪問(wèn)流程如圖5所示。

圖5 函數(shù)訪問(wèn)流程

control 層對(duì)微信登錄用戶(hù)進(jìn)行驗(yàn)證時(shí)，其設(shè)計(jì)思路是：根據(jù)微信小程序登錄時(shí)傳遞過(guò)來(lái)的用戶(hù)名，查詢(xún)數(shù)據(jù)庫(kù)獲取當(dāng)前登錄用戶(hù)，如果返回值為空，則表明當(dāng)前登錄用戶(hù)不存在，反之則表明當(dāng)前登錄用戶(hù)對(duì)象存在，并在數(shù)據(jù)庫(kù)中保存相關(guān)信息，從用戶(hù)對(duì)象中提取是否被禁用標(biāo)識(shí)符進(jìn)行判斷，如果用戶(hù)沒(méi)有被禁用，則對(duì)用戶(hù)密碼進(jìn)行校驗(yàn)，如果密碼正確則表明可以運(yùn)行當(dāng)前用戶(hù)登錄微信小程序，后臺(tái)管理系統(tǒng)放行，并更新用戶(hù)的當(dāng)前登錄時(shí)間。

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

本系統(tǒng)數(shù)據(jù)存儲(chǔ)采用MySQL 數(shù)據(jù)庫(kù)實(shí)現(xiàn)，微信用戶(hù)數(shù)據(jù)庫(kù)表單tb_wxuser設(shè)計(jì)如表1所示。

表1 微信用戶(hù)表單設(shè)計(jì)

表單創(chuàng)建SQL實(shí)現(xiàn)語(yǔ)句如下：

mapper.xml 中提供對(duì)數(shù)據(jù)庫(kù)微信用戶(hù)表單進(jìn)行操作的接口函數(shù)如表2所示。

表2 微信用戶(hù)表單操作接口函數(shù)

以selectTbWxuserById 函數(shù)為例，對(duì)SQL 語(yǔ)句進(jìn)行說(shuō)明如下：

在select標(biāo)簽中，id表示接口函數(shù)名稱(chēng)，parameterType表示傳入?yún)?shù)類(lèi)型，Long代表傳入?yún)?shù)為長(zhǎng)整形，resultMap表示函數(shù)返回?cái)?shù)據(jù)類(lèi)型，TbWxuserResult表示微信用戶(hù)對(duì)象。

4 系統(tǒng)部署及測(cè)試

本系統(tǒng)的部署環(huán)境如表3所示。

表3 系統(tǒng)部署環(huán)境

微信用戶(hù)后臺(tái)禁用操作如圖6、7所示。

圖6 微信用禁用戶(hù)后臺(tái)界面

圖7 微信端驗(yàn)證

5 結(jié)語(yǔ)

本文通過(guò)Springboot技術(shù)框架、WeUI微信小程序開(kāi)發(fā)技術(shù)、MySQL數(shù)據(jù)存儲(chǔ)技術(shù)及VUE技術(shù)，設(shè)計(jì)了一套微信小程序用戶(hù)管理系統(tǒng)，并對(duì)設(shè)計(jì)與實(shí)現(xiàn)方法進(jìn)行詳細(xì)介紹。系統(tǒng)實(shí)現(xiàn)了對(duì)微信小程序登錄用戶(hù)基本維護(hù)管理。測(cè)試表明，系統(tǒng)穩(wěn)定可靠、操作簡(jiǎn)單、實(shí)用性強(qiáng)，可以為相關(guān)行業(yè)微信小程序開(kāi)發(fā)提供一定的參考價(jià)值。