杨 宇 徐万明

（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技术，设计了一套微信小程序用户管理系统，并对设计与实现方法进行详细介绍。系统实现了对微信小程序登录用户基本维护管理。测试表明，系统稳定可靠、操作简单、实用性强，可以为相关行业微信小程序开发提供一定的参考价值。