基于移动互联网技术的实验室资产管理系统＊

郑俊虹，汪香君，张俊铉

(深圳技术大学大数据与互联网学院，广东 深圳 518118)

0 引言

我校作为应用型大学，致力于培养具有国际视野、工匠精神和创新创业能力的高水平工程师、设计师等高素质应用型人才。学校配有教学实验室、科研实验室、实训室等，实验室设备种类繁多、数量庞大。师生在日常的教学实践过程中，经常需要从实验室借用设备。

实验室资产管理是一项复杂的系统工程，本校资产管理部门注重数据的录入、存储和审核，忽视了设备的动态管理。师生使用系统的过程中，经常会遇到以下问题：①学生做项目需要借用实训室设备，首先需要查看哪些设备处于空闲状态及设备的存放位置，然后向设备负责人申请借用设备，设备负责人审核通过后，系统应更新资产的使用人和位置信息，但是当前系统没有赋予学生使用系统的权限，只有实验室的资产负责人有权限；②学生和老师在使用设备时，设备发生故障，当前系统没有设备报修模块，不能及时报修，也无法追踪设备的维修状态。

针对学校资产管理系统的工作流程和实际管理流程不相符合的情况，本文以学院动态管理使用场景为切入点，对系统进行二次开发。该系统的设计包括系统管理Web平台和微信小程序移动端两个部分。

1 系统设计

实验室资产管理系统的设计，既要考虑管理的边界，又必须注重效率。小程序的接入提高了系统运转的实时性，使得学生、教师和资产管理者有更出色的体验[2]。系统管理Web 平台主要提供给实验室管理人员使用，对不同权限的用户显示相对应的设备资产、借用单、维修单等；小程序移动端应用允许师生查询设备状态、借用设备、报修故障以及负责人审批使用。资产管理系统基本功能框架如图1所示。

图1 资产管理系统基本功能框架

1.1 系统管理后台

系统管理后台通过对以上基本功能整合分析，从逻辑上分为两大块，系统管理和设备管理。

1.1.1 系统管理

系统管理任务是对系统进行日常管理和必要的维护[3]，该模块由系统管理员进行操作，主要围绕用户管理、权限管理、教室管理、数据备份等功能。

实验室资产的申请、报修和审批等业务需要不同的角色才能完成。因此可以将用户分为普通用户、实验室负责人、系统管理员三个角色实体[3]。

⑴普通用户

普通用户是主要的用户群体，可以对资产进行查询、借用和报修等操作。

⑵实验室负责人

基于领导对实验室管理职责的划分，每个实验室都有负责老师负责管理审批。包括设备借用审批、维修保养和报废检查等。实验室负责人不仅拥有以上权限，同时拥有普通用户的权限。

⑶系统管理员

系统管理员主要负责用户管理、权限管理和教室管理等基本数据的维护和备份。

用户管理包括添加、更新、删除用户，并根据用户的角色，设置对应权限。

教室管理主要包括实验室的添加、更新和删除，该模块由系统管理员进行操作。

数据备份是系统中非常重要的一部分，只有定期对数据进行备份，才能防止系统出现操作失误或系统故障而导致数据丢失。

1.1.2 设备管理

学院的设备包括教学设备、科研仪器、办公设备和耗材等。设备的基本信息包括设备编号、名称、型号、使用状态、单价、类别、所属实验室等。实验室负责人主要负责对设备进行管理操作，包括添加设备信息，更新设备状态等。普通用户日常工作中相关的业务包括查询设备、借用设备、报修设备等，相对应的实验室负责人需要对设备借用单进行审批，对维修登记进行更新。

1.2 微信小程序移动端

微信小程序主要应用在手机等移动终端上，移动端界面的设计应该遵循简洁清晰性原则。用户界面应给人愉悦的用户体验，因此，界面展现的内容需要具备清晰的信息流程，传递的信息不要太多。微信小程序移动端的设计主要提供给普通用户和实验室负责人使用。

微信小程序移动端的设计仅支持设备实时查询、借用、报修和审批功能，主要是为了提高动态管理的效率。整个系统从逻辑上分为四个模块：资产查询、借用设备、故障报修、审批查询。审批查询模块根据用户角色，显示不同的内容。对于普通用户，该模块展示用户个人提交的借用和报修审批表；对于实验室负责人，除了展示个人申请审批表信息，还额外展示须由负责人审批的表单。

2 系统实现

整个系统是基于前后端分离架构模式设计实现的，后端服务基于Spring Boot 框架设计实现，持久层框架使用MyBatis Plus，数据库使用mysql8.0 版本；Web 前端基于Vue 框架设计实现，使用的组件库是element-ui；微信小程序主要参考微信官方文档进行开发。

2.1 系统管理Web平台

2.1.1 用户登录登出实现

用户的登录登出使用Shiro 安全框架来做整体系统访问控制，采用JwtToken 做安全认证。Shiro 是Apache 旗下一个开源框架，它将软件系统的安全认证相关功能抽取出来，实现用户身份认证，权限授权、加密、会话管理等功能，组成了一个通用的安全认证框架[1]。Shiro 框架主要由以下几个部分组成：①Subject主体，该主体可以是系统用户，也可以是外部的应用程序，更确切的说是一个session，在Shrio认证体系中，Subject 为Shiro 框架中完成外部程序认证、授权的抽象；②SecurityManager 即安全管理器，用来对所有的Subject 的认证和鉴权进行管理；③Realm 用来实现自定义的认证鉴权规则。具体认证流程为：程序构建一个终端用户认证信息实例，调用Subject 登录方法；然后Shiro 的DefaultFilter 为身份验证、授权提供统一入口；SecurityManager 接收到信息后，委托内置的Authenticator 实 例ModularRealmAuthenticator 在认证过程中会对设置的一个或多个Realm 实例进行适配；最后判断Realm 是否支持提交的Subject 进行认证。Shiro框架的认证流程图可参考图2。

图2 Shiro框架认证流程图

上述的认证方式是基于session 的，由于客户端无法保存session，所以无法做到无状态登录。本系统引入JWT（Json Web Token）进行认证。JWT 是为了在网络应用环境间传递声明而执行的一种基于JSON 的开放标准[4]。JWT 本质上是一个令牌，可以存储在客户端的localstore 或者cookie 中。对于已经登录过的用户，可以采用如图3所示的认证方式。

图3 JWT认证流程图

2.1.2 页面设计

该系统中资产信息、用户信息、实验室信息、借用单、维修单等使用了相似的功能和页面逻辑。

页面的设计是用来展示后端的数据的，后端定义的接口将数据以list结构返回。因此前端选用el-table组件作为基础组件，使用el-table-column 标签来声明表格中列的属性，el-table 组件根据绑定的list 组件来动态渲染表格。当项目中查询接口增多时，就需要编写重复性的代码展示不同的表格。基于该情况，使用Vue组件化的思想，设计了公共表组件，提高了代码的可重用性[5]。Common-table 组件包含column-props、fetch-data 等属性对数据拉取和数据列进行展示。在组件初始化时会通过fetch-data 方法查询数据，利用v-for 指令根据column-props 来构造el-column。使用了该组件的页面如图4所示。

图4 资产信息界面

2.2 微信小程序移动端

程序运行依赖的环境就是宿主环境，微信客户端则是小程序的宿主环境。小程序借助宿主环境提供的能力，实现对应的功能。微信小程序前端使用微信小程序原生组件来布局，使用组件库进行优化，使用微信小程序原生API来调用宿主环境提供的功能。

小程序中的通信主体是渲染层和逻辑层，其中WXML模板和WXSS样式工作在渲染层，Javascript脚本工作在逻辑层。小程序的通信逻辑分为两个部分。①逻辑层和腾讯云服务器之间的通信：逻辑层发送数据请求，经微信客户端转发给腾讯云端服务器，服务器对请求进行响应，再将响应数据经微信客户端转发给逻辑层。②渲染层和逻辑层之间的通信：逻辑层的数据通过微信客户端转发给渲染层呈现。

鉴于移动端界面的设计应该遵循简洁清晰性原则，小程序的首页展示了小程序的主要功能模块资产查询、借用设备、故障报修、审批查询。

资产查询：可以根据设备编号、设备名称、设备状态、设备价格、所属实验室等进行查询。

借用设备：填写设备编号后，会自动填充名称、类型、资产状态、所属实验室、资产负责人、借用人等信息，当前用户仅需填写存放位置和借用说明，提交审核。

故障报修：填写设备编号，故障描述，报修人等信息，提交审核。

审批查询：对于普通用户，审批界面会显示借用、报修查询标签页用于展示当前用户提起的借用、报修记录；对于实验室负责人，会额外展示两个借用、报修审核页。

小程序主页和资产借用页效果图如图5所示。

图5 小程序主页和资产借用页效果图

3 结束语

本文在原有系统上增加了资产借用、故障报修和表单审批等功能模块，将基于Web 的系统管理后台和微信小程序移动端相结合，设计和实现了实验室资产动态管理的功能。该系统通过技术手段不仅提高了资产管理人员的工作效率，也让师生有了更好的使用体验。随着学校的不断发展，系统还需要增加相应的功能模块以满足新增需求。从技术上，可以在SpringBoot基础上引入SpringCloud微服务架构，更好的解决系统性能高并发和功能复杂度的问题[6]。