基于uni-app ＋SpringBoot 的移动智能办公系统设计与实现

李英玲，牛美雅，兰宏富

(1. 西南民族大学计算机科学与工程学院，四川成都 610041；2. 西南民族大学计算机系统国家民委重点实验室，四川成都 610041)

随着计算机技术在软件应用上逐渐成熟，办公软件已从无纸化办公发展到互联网远程办公，能满足人们基本的办公需求[1].各地方政府、大型企业等机构，都大力加强办公的自动化和信息化建设，协同办公模式逐步在企业以及政务办公中占据主体地位[2]，以提高员工工作效率和企业竞争力[3-4].随着物联网、大数据、人工智能等技术的快速发展，给传统办公带来发展契机，在线移动办公成为继无纸化办公和互联网远程办公之后的新一代办公模式.新一代信息技术的应用，既可有效促进整个协同办公体系的发展，也为企业智能化转型提供内驱力[5].OA 系统成长至第三代时，数据处理技术、数据库和信息管理技术的应用进一步提高了OA 系统的办公质量和效率[6]，但是也存在技术过于陈旧[7]、审批效率低下[8]，并且安装和操作繁琐、系统安全[9]与数据安全等问题[10-13]. 随着微信应用的普及以及微信公众平台二次开发接口的提供，微信小程序无需安装、卸载、随时打开等诸多优势[14].很大程度上满足了移动办公开发需求[15]，但是在操作流程、人性化、便捷服务和安全性等方面不足.

基于上述背景，本系统实现了一个移动智能办公系统，以 uni-app 和 Springboot 为核心框架，将 Shiro、JWT 和人脸识别技术相结合，并采用本地宝和GPS定位技术，实现签到考勤、视频会议、消息通知、用户身份认证和授权，并对拍照签到地疫情风险进行管理.通过异步多线程向RabbitMQ 发送公告实现对消息数据的缓存，最后采用RBAC 权限控制技术实现了对用户权限的管理.该系统能较大程度上简化用户操作、增强系统安全性，提高办公的工作效率，并提升用户体验.

1 系统架构

基于uni-app 和SpringBoot 移动智能办公系统的架构如图1 所示，包含5 个逻辑元素，分别是使用uni-app 框架开发系统的移动端、各个功能的基础模块、保证安全交互的数据库.

图1 系统架构图Fig.1 Model architecture of smart mobile office system

1)前端采用uni-app 框架进行开发，uni-app 是使用Vue 语言来实现开发各种跨平台应用的前端框架，组件丰富.

2)后端采用SpringBoot 进行开发，其主要优点:快速地构建项目、对于主流开发框架无需配置集成、项目可独立运行、不需要外部依赖Servlet 容器、提供在运行时的应用监控，因此极大地改善和提高了项目开发的工作效率.

3)后端的权限验证使用Java 领域非常知名的认证与授权框架Shiro，该框架适用性广泛.系统可抵御跨站脚本XSS 攻击，通过过滤器拦截所有请求，将请求中的内容转义，再存储到数据库中.

4)人脸识别程序需要较多依赖库，环境配置繁琐，因此本系统把依赖环境和人脸识别程序环境封装成Docker 镜像.只需要在本地Docker 创建容器，并导入镜像，就可运行人脸识别程序.

5)消息通知模块使用异步多线程向RabbitMQ 发送公告消息缓存数据，以降低MongoDB 数据库写入压力，提高系统健壮性. 拍照签到功能通过调用人脸识别程序，实现签到功能，最终将签到信息存储到Mysql 中.

1.1 uni-app 框架

uni-app 被广泛认为是较好的小程序开发框架、App 跨平台框架和方便的H5 开发框架.当业务需要在不同的平台展示时，针对不同的平台编写独有的运行代码的成本显然非常高，而uni-app 则可以实现一次编码多端编译，可将代码发布到iOS，以及各种小程序(微信/支付宝/头条/QQ)、快应用等多个不同的平台，从而降低开发成本. 因此，为了提高代码的效率，本系统使用uni-app 框架开发前端应用，该框架遵循Vue 语法规范，主要用到了CSS、LESS 和 JavaScript 语言.

1.2 Shiro 和 JWT 技术

Shiro 是Java 领域非常知名的认证(Authentication)与授权(Authorization)框架，用以替代JavaEE 中的JAAS 功能.相较于其他认证与授权框架，Shiro 设计得非常简单，适用性好，任意JavaWeb 项目都可以使用Shiro 框架，而Spring Security 只能适用于Spring项目. 例如，JFinal 和 Nutz 非 Spring 框架都可使用Shiro，而 Spring Security 框架不适用. 因此，本系统采用Shiro 技术实现核验用户身份与授予用户权限的功能.

JWT (Json Web Token)被广泛用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可用于增加一些额外的其他业务逻辑所必须的声明信息，该Token 也可直接被用于身份认证，也可被用于进行数据加密. JWT 技术实现用户认证，如图2 所示，后端系统根据用户OpenID、微信账号以及过期时间生成Token 字符串令牌，Token 字符串令牌返回给小程序端，用户发送任何请求都要附带Token，通过每次验证Token 字符串令牌的有效性，决定是否执行请求的业务逻辑.

图2 基于 JWT 的用户认证Fig.2 User authentication based on JWT

传统的 HttpSession 依靠浏览器的 Cookie 存放SessionId，要求客户端必须是浏览器.当前的JavaWeb系统，客户端可以是浏览器、APP、小程序以及物联网设备.为了让这些设备都能访问到JavaWeb 项目，引入JWT 技术.JWT 的Token 是纯字符串，至于客户端如何保存，没有具体要求. 只要客户端发起请求的时候附带上Token 即可. 本系统使用Shiro 和JWT 技术实现用户身份认证功能.

1.3 RabbitMQ

消息队列产品有很多，常见的包括RocketMQ、RabbitMQ、ActiveMQ 和 Kafka. 其中 Kafka 性能最好，消息收发的速度较快；但是消息收发的可靠性不如RabbitMQ.

RabbitMQ 既支持消息异步收发，又支持同步收发.虽然系统当前大部分的场景对应的是消息异步收发，但是也有同步收发的需求，RabbitMQ 能适应各种业务场景的优点就得以体现.另外，RabbitMQ 支持五种队列模式，可以应用于更多的业务场景. 基于RabbitMQ 上述的优点，本项目选择RabbitMQ 实现消息队列.

1.4 Docker

本系统采用Docker 技术搭建人脸识别程序运行环境，主要基于以下两方面的考虑:

首先，Docker 容器之间是相互隔离的，在容器中部署程序的同时，不用担心跟其他容器产生冲突. 例如某公司几年前开发的Java 程序用的是JDK1.6，而当前需要部署的Java 项目基于JDK1.8 开发，无法在服务器上面同时安装JDK1.6 和JDK1.8 环境.Docker技术通过创建两个人容器进行部署能解决这个问题，在两个容器中分别安装JDK1.6 和JDK1.8，分别部署新旧程序.Docker 可实现在一个服务器上部署若干程序，并且不产生冲突.

其次，Docker 能提供快速化部署. 把需要部署的程序和运行环境打成Docker 镜像，分发给其他人，接收后创建容器就可以直接运行程序了.

1.5 RBAC 权限管理

RBAC 的基本思想是，对系统操作的各种权限不是直接授予具体的用户，而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限.一旦用户被分配适当的角色后，该用户就拥有此角色的所有操作权限.这样做的好处是，不必在每次创建用户时都进行分配权限的操作，只要分配用户相应的角色即可，而且角色的权限变更比用户的权限变更要少很多，这样将简化用户权限管理，减少系统开销.

2 系统设计与实现

2.1 软件功能设计

基于uni-app 和SpringBoot 移动智能办公系统的总体功能设计如图3 所示:包括签到考勤模块、视频会议模块、消息通知模块和系统管理模块.

图3 基于uni-app 和SpringBoot 移动智能办公系统总体功能Fig.3 Overall requirement of smart mobile office system

签到考勤模块包括拍照签到、签到地疫情风险管理、考勤统计功能.在职员工身份认证及授权成功后，通过人脸识别子系统进行拍照签到；系统获取员工签到地的疫情风险信息，针对高风险地区进行相应处理；最后统计签到信息:包括用户信息、签到时间、疫情风险等级、周考勤.

视频会议管理模块包括创建＼编辑会议、选择参会者和查看会议功能.具有会议相应权限的用户和超级管理员可创建会议，并可在会议详情页面可填写会议时间、会议参与人以及会议内容等信息.查看会议，是用户可通过滑动、分页等方式查看个人创建或者参与的会议列表，以及会议详情.

消息通知管理模块包括定时轮询接收消息、消息的自动发送和异步写入功能.在小程序主页面设有定时器，每5 分钟轮询接收新消息，并在主页面上显示未读消息提醒；消息的自动发送指系统自动向员工发送消息通知，并将消息写到消息队列. 异步写入消息是用异步线程从消息队列中，接收该用户的系统消息，然后把系统消息存储在数据库中.

系统管理模块包括用户管理、权限管理和部门管理功能.权限管理是采用RBAC 权限模型，把权限映射成角色，再把角色关联到用户的功能，并且前后端项目都要验证用户的权限，才能实现登录. 编辑个人信息是用户可以通过编辑按钮实现对个人信息的修改、删除功能.

2.2 数据库设计

本系统使用Mysql 数据库，根据软件功能列表，设计如下的数据表:

1)系统常量表(sys＿config)，记录移动办公系统的常量配置信息，包括主键、参数名、参数值、状态、备注等.2)用户表(tb＿user)，记录用户信息，包括主键id、授权字符串、昵称、头像网址、姓名、性别、手机号码、邮箱、入职日期、角色、是否是超级管理员、部门编号、状态(1 在职 0 离职)等.3)角色表(tb＿role)，记录系统角色信息，包括主键id、角色名称、权限集合.4)权限表(tb＿permission)，记录每个权限所能够访问的模块，包括权限名称、模块ID、行为ID.5)特殊工作日表(tb＿workday)，记录特殊工作日信息，包括id 和特殊工作日日期.6)特殊节假日表(tb＿holidays)，记录特殊节假日信息，包括id 和节假日日期.7)用户人脸模型表(tb＿face＿model)，记录用户人脸模型数据信息，包括人脸模型id、用户id 和用户人脸模型数据.8)部门表(tb＿dept)，记录部门信息，包括部门id 和部门名称.9)城市表(tb＿city)，记录城市名称及对应的简称信息，包括id、城市名称和城市简称.10)用户签到表(tb＿checkin)，用于存储用户签到的信息，主键、用户ID、签到地址、国家、省份、城市、区划、考勤结果、风险等级、签到日期、签到时间.11)会议表(tb＿meeting)，记录会议信息，包括会议id、会议题目、创建人id、日期、开会地点、开始时间、结束时间、会议类型、参与者、会议内容和状态等.12)消息表，记录系统发出的或者其他用户发出的通知信息的主体，包括主键、UUID 值(设置唯一索引，防止消息被重复发送)、发送者ID、发送者的头像URL、发送者名称、消息正文、发送时间.13)消息标记表(message＿ref)，记录有关消息接收者的信息，包括主键、消息ID、接收者ID、是否已读、是否为新接收的消息.

2.3 系统详细设计与实现

2.3.1 签到考勤

签到考勤模块的流程图如图4 所示.

图4 签到考勤流程图Fig.4 Flow chart of check-in attendance

用户授权成功后进入在线考勤页面，访问服务器动态获取当天是否需要签到(非工作日或者调班日无需签到)；在工作日，用户点击拍照按钮进行拍照，同时后端检测是否存在该用户的人脸模型数据，如果没有，则弹出提示框，询问用户是否要录入人脸模型数据；如果数据库中存在人脸模型数据，则通过人脸识别子系统比对当前拍照的图像与系统人脸模型，比对成功就签到成功，否则签到失败.签到成功后，根据用户签到的地理位置，并通过本地宝获取该地区新冠疫情风险等级，如果员工在疫情高风险地区签到，系统立即向公司人事部门发送告警邮件. 最后，后端系统对用户签到考勤信息进行统计，通过图表的方式展示当日签到信息和本周签到信息，并使用灰色图标表示节假日及用户入职前的考勤情况.

实现签到考勤模块功能伪代码如下:

images/BZ_84_1282_1296_2274_1371.png输入:用户签到照片path 和所在地信息集合param输出:无BEGIN验证认证与授权doGetAuthenticationInfo获取上班时间d2，考勤结束时间d3 If 签到时间d1 ＜=上班时间d2 Then正常考勤Else if 签到时间 d1 ＞ 上班时间 d2 ＆＆ 签到时间 d1 ＜考勤结束时间d3 Then迟到End If获取数据库中存储的该用户人脸模型数据faceModel IffaceModel = = null Then抛出异常:不存在人脸模型Else向人脸识别子系统发送请求HttpUtil.createPost(checkinUrl)；请求体携带用户签到照片FileUtil.file(path)与人脸模型数据faceModel If 无法识别出人脸或照片中存在多张人脸Then抛出异常Else if "False".equals(body)抛出异常Else if "True".equals(body)获取用户签到地新冠疫情等级保存签到记录End If End If END

拍照签到:通过doGetAuthenticationInfo 方法对用户认证授权成功后，如果是第一次签到，checkin 方法检测数据库中没有该员工人脸模型，给出异常提示，根据当前签到照片创建人脸模型数据；否则，向人脸识别程序发送http 请求，验证当前签到照片与系统人脸模型是否一致，验证成功，则签到成功，同时获取签到地疫情风险信息；否则签到失败.

签到地疫情风险管理:通过GPS 定位员工打卡位置，使用腾讯位置服务获取坐标转换成真实地址，然后采用本地宝查询所在地区风险等级，根据所在地区信息拼接成对应的本地宝访问地址url，然后解析本地宝HTML 页面的标签，提取其风险疫情等级信息.如果员工的疫情风险等级是:高风险，后端就发送高风险疫情警告邮件给管理员.

为了同时处理风险等级判断和告警邮件发送，提高系统的执行效率，故将发送告警邮件的功能提取出来，用异步多线程执行的.具体来讲，在主类上添加＠EnableAsync 以开启异步多线程；创建ThreadPoolConfig 类，声明 Java 线程池；创建 EmailTask 类，定义线程任务；查询员工的姓名和部门名称，在. xml 文件中声明查询语句；接口中定义抽象方法，定义值注入变量，用来接收用户签到地高风险告警邮件.

2.3.2 视频会议

创建/编辑会议功能包含创建会议和编辑会议两部分.通过点击创建会议、编辑会议按钮会进入到会议详情页面，该页面包括输入会议标题、编辑会议时间、地点和内容以及选择会议的参会者三部分.其中，当选择会议类型为:线下会议时，地点是必填项.用户填完信息后可以点击保存.

选择会议参会者功能实现了用户在填写会议详情的时候，点击添加按钮，跳转到部门员工列表，在其中选择需要添加的员工.当用户点击添加参会者按钮时，需要验证当前用户是否具有查看部门员工的权限，如果有权限就会展示所有部门的员工. 页面初始化时，会获取当前会议已选的参会者.

查看会议功能主要是实现分页加载会议列表meeting＿list.页面初始化时，小程序端向后端请求当前用户的会议列表；后端获取数据后，通过分页的形式，展示了用户参与或创建的会议，并且按日期进行分组展示.

2.3.3 消息通知

该功能模块包括定时轮询接收消息，消息自动发送以及异步写入消息.

1)定时轮询接收消息

首页的定时轮询活动如图5 所示，index 页面设有定时器，每5 分钟发送一次轮询，消息任务MessageTask 利用异步线程接收MQ 中的消息，并保存到消息集合message＿ref 中，并将新收到的消息的标志位设置为false；服务端程序Service 把消息队列中当前用户的未读消息返回到微信小程序，显示给用户.

图5 视频会议流程图Fig.5 Flow chart of video conferences

2)消息的自动发送

与用户相关的业务发生变化或者用户资料被修改后，系统会自动向员工发送消息通知；后端接收到消息后，调用messageTask 类发送系统消息到MQ 消息队列中，并不直接写入到MongoDB；然后在首页轮询的时候提示用户有新的系统消息.

3)异步写入

异步写入是在用户登录时，消息任务类 MessageTask 的异步线程，从消息队列MQ 中接收该用户的系统消息；然后将系统消息存储到数据库，并从消息队列MQ 中删除，从而实现了错峰写入.

消息列表详情页面中，根据发送邮件者的不同，可以动态设置消息列表页面的名称，也可根据当前的消息类型，展示不同的消息列表. 未读的消息底色为红色，用户单击未读消息，当用户点击后，后端通过消息ID 将message＿ref 集合中的未读标志重置为已读.

2.3.4 系统管理

该功能模块包括用户管理、权限管理和部门管理.

1)用户管理

用户管理包括激活码注册、我的考勤、个人资料管理等功能.当管理员创建新员工后，系统会自动向新员工发送包含激活码的邮件.新员工在线办公系统的注册页面填写激活码后，系统将微信平台获取到用户的信息，更新到数据库，实现用户微信账号和系统账号进行绑定.在后续的登录时，只需点击登录按钮即可实现自动登录.

我的考勤功能，可在日历控件选择查询的年份和月份，得到个人的月考勤情况；个人资料功能，实现对个人信息的录入和修改.

再如选段中的句子：“Si elles sont grasses…(if they are lush…)”由于上文的“terres（土地）”是阴性复数的名词，因此该句中选择了阴性复数的主语人称代词elles（她们）代替terres；然而在英语的词汇中，主格的第三人称复数是不分性别的，所以只能用they一词来作为法语elles的译文，同样无法译出原文terres的“性”。

2)权限管理

用户登录系统时，Shiro 框架会对用户进行认证与授权，成功获取认证与授权对象后，跳转至首页，微信小程序端从本地读取用户的权限信息，进行权限控制管理.

认证与授权:本系统通过使用RBAC 权限管理结合Shiro(Java 安全框架)技术，根据用户的状态(例如在职、离职)和令牌的有效性实现对用户的认证，确保平台权限访问的安全和正常运行.其认证与授权过程如图6 所示:

图6 基于Shiro 认证与授权流程图Fig.6 Flow chart of certification and authorization

当微信小程序端发送ajax 请求传递参数，后端Shiro 的过滤器XssFilter 拦截所有的请求，将传递的数据信息转义后存储到数据库中.转义后的请求会再次被OAuth2Filter 类拦截，认证用户提交的令牌没有问题， 就可以当作已经成功登录， 因此需要OAuth2Realm 类颁发认证对象，然后通过HTTP 请求往下传递.接着让OAuth2Realm 类中的授权方法返回一个授权对象，根据用户的userId 将用户的权限列表查询出来，封装在授权对象中，传递给Web 方法，最终返回给微信小程序端进行存储.

权限控制:采用RBAC 权限控制技术，实现了对用户权限的管理.采用模块和行为相结合的方式得到权限控制消息，并记录到权限表tb＿permission 中，同时采用JSON 数据格式存储各角色的权限.

本系统的微信小程序端和后端都需要权限验证，后端的权限验证通过Shiro 框架实现，微信小程序端通过自定义封装函数来实现权限验证.用户的权限信息存储在权限表中，当用户登录时，从后端程序查询并得到当前用户的权限列表，并保存到本地Storage.然后每个页面在加载时，先判断用户的权限，再根据权限控制页面加载的内容.例如:用户登录成功后，点击“会议”，进入会议列表页面. 具有创建会议权限的用户可以看到“创建会议”按钮；没有该权限的用户无法查看到“创建会议”按钮.

3)部门管理

部门管理是给拥有管理员权限和部门查看、修改权限的用户呈现部门信息、增删改功能. 在新增和修改时，需要验证用户输入的部门名称，是否符合要求并且是否为已存在的部门；在删除部门时，给出删除的确认提示“是否删除某某部门?”，以免误操作.

①HBuilder X；

②微信开发者工具；

③IntelliJ IDEA 2020.3.3；

④Navicat Premium 15；

⑤Oracle VM VirtualBox；

⑥MobaXterm.

3 系统测试

本系统的测试通过真机运行，使用昵称为“王小美”的管理员账号登录，按照管理员的注册和登录、消息通知的接收和发送、拍照签到的验证、签到考勤统计的查看、视频会议的编辑、用户和部门的管理流程进行测试.

1)登录注册

首先管理员账号“王小美”在注册页面输入激活码:000000，若绑定过超级管理员则显示“无法注册成为超级管理员”，否则注册成功并跳转至首页.测试结果如图7 所示.

2)消息通知

当用户注册成功跳转至首页，通过下拉展示轮询接收到新信息，并且可在消息提醒中查看接收到的新系统消息.测试结果如图8 所示.

图8 (a)定时轮询接收新消息(b)未读消息页面Fig.8 (a) Regularly receiving new messages(b) The pages of unread messages

3)拍照签到

用户点击“拍照”，获得摄像头权限后，进行人脸拍照.若用户是新员工第一次拍照签到，会提示用户“是否将当前照片作为人脸识别模型?”，用户点击确定后，系统提示“人脸建模成功”；否则直接进行签到.测试结果如图9 所示.

图9 (a)新用户首次拍照签到页面(b)签到成功Fig.9 (a) First check-in pages (b) Check-in successfully

4)签到考勤统计

签到成功后，跳转至签到结果页面，显示用户今日的签到信息以及用户本周的考勤情况。 系统检测到该用户签到地为高风险地区，给公司主管发送疫情告警邮件。 测试结果如图10 所示.

图10 (a)签到地疫情风险告警邮件 (b)签到记录Fig.10 (a) Warning emails of epidemic risk(b) Sign-in records

5)视频会议

用户点击“会议”，进入会议列表页面. 具有创建会议权限的用户可以看到“创建会议”按钮.点击“创建会议”按钮，进入会议详情页面，填写会议的信息并选择会议参会者.测试结果如图11 所示.

图11 (a)具有权限的会议列表 (b)创建会议页面Fig.11 (a) Authorauthorized meeting list(b) Creating a meeting

6)用户管理

管理员可以对员工进行管理，在我的页面点击“员工管理”，添加新员工的基本信息.保存成功后，发送系统注册码到新员工的邮箱.测试结果如图12 所示.

图12 (a)我的页面 (b)新用户激活码注册Fig.12 (a) My pages (b) Activation registration code

7)部门管理

管理员点击“部门管理”，显示所有的部门信息，可进行新增、修改和删除操作. 选中“市场部”，点击“修改”按钮，将“市场部”修改为“外联部”，测试结果如图13 所示.

图13 (a)修改部门名称 (b)添加部门成功Fig.13 (a) Update department Name (b) Add department

4 结论

随着计算机技术在软件应用上逐渐成熟，在线移动办公成为继无纸化办公和互联网远程办公之后的新一代办公模式.利用微信公众平台提供的二次开发接口，结合业务及日常办公流程开发移动办公系统，很大程度上满足了移动办公开发需求.

基于上述背景，本系统基于微信平台，采用uniapp 和SpringBoot 框架设计并实现移动智能办公系统，具体包括:基于Shiro 和JWT 技术实现了用户身份认证和授权管理；基于人脸识别技术实现了拍照签到，并采用GPS 定位和本地宝实现员工签到地疫情风险管理；使用异步多线程向RabbitMQ 发送公告，数据缓存等功能.

最后，以实际应用为例进行测试，验证了该系统能较大程度上简化用户操作、增强系统安全性，提高办公的工作效率，并提升用户体验.