基于Springboot微信小程序用戶管理系統設計

楊 宇 徐萬明

（1.貴州電子信息職業技術學院，貴州 凱里 556000；2.黔東南民族職業技術學院，貴州 凱里 556000）

1 引言

隨著移動互聯網技術不斷發展，微信小程序生態圈逐步完善，從而推動微信小程序在各個行業的廣泛應用[1]。目前，開發微信小程序存在的一個普遍的情況就是后臺多為騰訊云提供的云數據庫與運服務器[2]，部署簡單，操作方便，但是靈活性不好，修改難度大。基于此，本文采用微信官方提供WeUI基礎樣式庫[3]，結合Springboot技術[4]，以MySQL數據庫作為數據存儲平臺，設計并實現微信小程序用戶管理系統。

2 系統功能設計

系統功能設計主要包括微信小程序設計及后臺管理系統設計。

2.1 微信小程序設計

微信小程序采用微信開發者工具作為程序編輯、編譯平臺，利用WeUI 基礎樣式庫對用戶登錄功能進行設計。一個微信小程序主體主要由三個部分組成，分別是：app.js、app.json、app.wxss，其中app.js是必須存在的文件，主要實現小程序的主體邏輯處理，在該文件中，通過調用App()函數實現小程序的注冊，該方法只能調用一次，同時該函數通過一個對象參數綁定了生命周期回調函數、錯誤監聽及頁面不存在監聽等函數，其重要參如下：

（1）OnLaunch：該函數監聽小程序初始化回調功能；

（2）OnShow：該函數實現監聽小程序啟動后切后臺回調功能；

（3）OnHide：該函數實現監聽小程序切后臺回調功能；

（4）OnError：該函數實現監聽小程序發生錯誤回調功能；

（5）OnPageNotFound：該函數實現監聽頁面不存在回調功能。

小程序的生命周期主要分為應用生命周期和頁面生命周期，其中應用生命周期的工作流程是：用戶第一次啟動小程序，觸發OnLaunch 函數調用，實現小程序初始化等任務，當初始化完成后，觸發OnShow 函數被調用，監聽小程序顯示，當小程序從前臺進入后臺，觸發OnHide 函數被調用，當小程序后臺進入前臺，又觸發OnShow方法的調用，當小程序在后臺運行一段時間或者系統資源占用過高時，就會被自動銷毀。頁面生命周期的工作流程是：小程序注冊完成后，加載頁面，會觸發onLoad 函數被調用，頁面加載完成后，會觸發onShow函數被調用，顯示頁面，小程序在后臺運行或者跳轉到其他頁面時，會觸發onHide函數被調用，當小程序由后臺進入到前臺運行或重新進入頁面時，觸發onShow 函數被調用，當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack()，觸發onUnload。同時，應用生命周期會影響到頁面生命周期。

在完成基礎配置搭建項目開發工程后，即可創建用戶登錄login 包，該包下面包含login.js、login.json、login.wxml 及login.wxss，其中login.wxml、login.wxss、login.js 對應網頁編程中的HTML、CSS、JS，login.wxxml 實現頁面結構，框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。login.wxss實現頁面樣式，是一套樣式語言，用于描述WXML 的組件樣式，用來決定WXML 的組件應該怎么顯示。login.js實現頁面處理邏輯，login.json實現頁面基本配置。微信小程序中用戶登錄界面設計如圖1所示。

圖1 微信小程序用戶登錄界面

當用戶輸入用戶名和密碼，通過參數校驗后，并與當前登錄時間一起封裝到data對象中，然后通過WX模塊中的request 方法發送到后臺管理系統中指定url 方法，對接收參數進行處理，最后返回一個用戶對象（包含用戶名username，登錄密碼password，用戶是否被禁用標識disableflag）給微信小程序端，小程序端對接收到用戶對象處理流程如圖2所示。

圖2 微信用戶登錄處理流程

2.2 后臺管理系統設計

后臺管理系統的服務端采用SpringBoot框架，結合Shiro安全控制機制，Jwt 登錄認證，以Java 作為編程語言，以MySQL作為數據庫進行設計[5]，前臺頁面的實現采用了基于VUE技術的ElmentUI組件，其采用完全響應式布局，使用扁平化設計，支持電腦、平板、手機等主流訪問設備[6]，系統技術構架如圖3所示。

圖3 系統技術構架

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

Springboot具有如下特點：

（1）快速構建獨立運行的Spring項目；

（2）無須依賴外部Servlet容器，應用無需打成WAR 包；項目可以打包成jar獨自運行；

（3）提供一系列starter pom 來簡化Maven 的依賴加載；

（4）大量的自動配置，對主流開發框架的無配置集成；

（5）無須配置XML，開箱即用，簡化開發，同時也可以修改默認值來滿足特定的需求；

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

（7）極大提高了開發、部署效率。

Shiro 是一個強大易用的Java 安全框架，通過提供回話管理、身份驗證、登錄授權、密碼校驗等功能，方便用戶開發任何移動應用程序，其主要包括Subject,Realms 和Security-Manager三大核心組件，Subject用于管理當前用戶的安全操作，Realm是Shiro與應用安全數據間的連接器，Shiro通過從Realms中查找用戶及授權信息，從而實現對用戶的登錄認證及訪問全權控制的驗證。

Vue是一套采用自底向上增量式技術設計的漸進式用戶界面的前端框架。響應式數據綁定與組合式視圖組件是其兩個主要的計算核心點，其通過在內存中生成與真實DOM對應的數據結構，實現虛擬DOM 設計，采用MVVM 設計模式，便于與第三方庫或項目進行整合。

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

（1）安裝nodejs；

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

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

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

搭建好前端開發環境，通過ElementUI 設計微信用戶管理模塊主要實現對微信用戶的新增、修改、刪除、查詢等維護管理，前端頁面功能如圖4所示。

圖4 微信管理前端頁面

修改功能主要是用戶是否禁用進行管控，當禁用微信用戶時，其無法登錄。服務端在對微信用戶進行增、刪、改、查采用MSCM 構架，其中controller.java 為控制層，其通過service的接口來控制業務流程，也可通過指定url接收前端傳過來的參數進行業務操作，server.java為業務邏輯層，其主要用于定義業務邏輯相關接口，serviceImpl.java用于對server.java中的接口函數進行具體實現，mapper.java 為數據存儲對象，是一個接口，其中的方法名與mapper.xml中同名，mapper.xml用于寫SQL 語句，對數據庫進行具體操作，訪問流程如圖5所示。

圖5 函數訪問流程

control 層對微信登錄用戶進行驗證時，其設計思路是：根據微信小程序登錄時傳遞過來的用戶名，查詢數據庫獲取當前登錄用戶，如果返回值為空，則表明當前登錄用戶不存在，反之則表明當前登錄用戶對象存在，并在數據庫中保存相關信息，從用戶對象中提取是否被禁用標識符進行判斷，如果用戶沒有被禁用，則對用戶密碼進行校驗，如果密碼正確則表明可以運行當前用戶登錄微信小程序，后臺管理系統放行，并更新用戶的當前登錄時間。

3 數據庫設計

本系統數據存儲采用MySQL 數據庫實現，微信用戶數據庫表單tb_wxuser設計如表1所示。

表1 微信用戶表單設計

表單創建SQL實現語句如下：

mapper.xml 中提供對數據庫微信用戶表單進行操作的接口函數如表2所示。

表2 微信用戶表單操作接口函數

以selectTbWxuserById 函數為例，對SQL 語句進行說明如下：

在select標簽中，id表示接口函數名稱，parameterType表示傳入參數類型，Long代表傳入參數為長整形，resultMap表示函數返回數據類型，TbWxuserResult表示微信用戶對象。

4 系統部署及測試

本系統的部署環境如表3所示。

表3 系統部署環境

微信用戶后臺禁用操作如圖6、7所示。

圖6 微信用禁用戶后臺界面

圖7 微信端驗證

5 結語

本文通過Springboot技術框架、WeUI微信小程序開發技術、MySQL數據存儲技術及VUE技術，設計了一套微信小程序用戶管理系統，并對設計與實現方法進行詳細介紹。系統實現了對微信小程序登錄用戶基本維護管理。測試表明，系統穩定可靠、操作簡單、實用性強，可以為相關行業微信小程序開發提供一定的參考價值。