元件管理系统的设计与实现

摘要：为解决信息物理系统实践课程中元件管理烦琐，以及多班级上课公用器件管理不便利的问题，设计了一种基于微信小程序的实验元件管理系统。该系统采用微信小程序作为前端展示界面，通过SpringBoot和MySQL实现后端数据的存储和管理。学生用户可在小程序上进行元件的查看和借用申请，教师用户可对学生的申请进行审批，还可以发布元件使用说明和实验室公告。管理员在后台管理界面进行学生、教师以及元件管理等。

关键词：元件管理系统；微信小程序；后端存储；MySQL

中图分类号：G642 文献标识码：A

文章编号：1009-3044（2024）31-0155-03

开放科学（资源服务）标识码（OSID） ：

0 引言

近年来物联网技术发展迅速，已经成为电子信息领域不可或缺的重要组成部分。高校中以信息物理系统实践课程为代表的物联网实验课程的重要性也随之提高。在这类实验课程的教学过程中，实验元件是不可或缺的重要组成部分，实验元件的质量和数量会直接影响到实验结果的准确性和可靠性，因此实验元件的合理化、规范化管理尤为重要[1]。微信小程序运行于微信平台之上，使用时只须联网无须下载，开发者配置开发环境通过一定的开发规范和API进行开发，即可实现小程序的上线和运行，这些优势让微信小程序逐渐成为实验元件管理的新选择[2]。开发实验元件管理系统，可以为学生提供更好的实验体验和更加自主的实验环境，帮助授课教师实现实验元件的在线管理，使实验元件管理更加便捷、高效。

1 系统设计

1.1 结构设计

实验元件管理系统的主体结构分为小程序前端、PC网页前端、后端服务器以及数据库。功能结构的设计按照用户类型进行划分，主要分为学生端、教师端和PC管理员端3个模块。学生端主要实现元件的借出申请功能，教师端实现对学生借出申请的确认与管理，还能够进行文件公告的发布以及对元器件进行增加和删除等。管理员端则实现对用户、元件、公告等内容的统一管理[3]。

1.2 流程设计

流程设计通过不同角色的用户交互进行说明：教师用户使用元件管理系统的小程序前端注册提交，前端将教师数据发送到服务器，服务器将教师信息写入数据库。之后教师便可以登录小程序发布文件公告、使用说明、元件是否出借等信息，同样，这些信息会经由服务器传送到对应数据库。学生用户使用元件管理系统小程序端时，后端会将教师写入的数据库内容返送给前端，呈现给学生[4]。小程序端流程设计主要包括登录与注册流程、教师元件管理流程、学生申请借出流程、管理员管理流程的设计。

小程序端的注册与登录流程设计：用户打开元件管理小程序，点击对应角色注册按钮，进入注册界面，要求用户填写必要的注册信息，填写完成点击注册按钮。此时元件管理小程序前端将用户输入的注册信息发送到后端服务器进行验证和处理，检查用户名的唯一性和密码的有效性，并创建新的用户账户。课程相关学生或老师打开元件管理小程序进入主界面输入信息登录，小程序会验证输入是否正确，验证成功后发送请求到后端验证登录信息的正确性，成功后跳转到主页导航界面，至此注册和登录流程完成。

教师/管理员元件管理流程设计：实践课程教师/ 管理员登录进入教师端或管理员界面，打开元器件管理，进入界面后选择要进行的操作。点击新增进入元件新增界面，输入相关内容点击提交完成器件的新增。若要删除器件，进入元器件管理界面后，则点击相关器件图片下方的删除按钮，点击确认即可完成元件的删除。点击要修改信息的元件，输入修改信息，保存后数据库中的元件信息将会更新，图1所示为教师/管理员元件管理流程图。

管理员的管理流程主要包括学生管理、教师管理以及元件分类管理的流程设计。管理员元件管理流程和教师元件管理流程相同如图1所示，管理员对学生和教师的管理流程相同如图2所示。管理员打开元件管理程序的学生管理或教师管理界面，在列表界面中每一个信息物理系统实践课程的选课学生或任课教师都有修改、查看、删除3个按钮，点击对应按钮即可实现相应的功能。

1.3 数据库设计

数据库设计的原则首先要保证数据库中的数据准确地反映信息物理系统实践课程实际授课中的情况，不能存在冗余或重复数据。其次，设计要优化查询速度，在最短时间内提供用户需要的数据。随着课程的周期发展，数据库中的数据量可能会增加，因此数据库要具有扩展性和灵活性。同时，数据库的设计要能保证数据的安全性，因此需要采取适当的安全防护措施，避免数据泄露或被不良分子攻击[5]。基于以上原则，本系统的数据使用MySQL进行数据库管理，按照元件管理系统的实体关系构建管理员表、学生表、教师表、元件申请表、出借元件表等重要数据表，存储相关数据信息，表1为管理员表。

2 系统实现

2.1 前端系统的功能与实现

元件管理系统的使用者按照角色划分可分为信息物理系统实践课程选课的学生、任课教师、管理员。其中学生和教师的功能在小程序前端体现，管理员功能可以通过PC网页端接入。本系统小程序前端实现了登录与注册模块、个人中心模块、元件申请模块、学生端元件说明公告查看模块、教师端元件说明及公告模块、教师端元件借出管理模块、教师端元件管理模块的实现、审核回复模块和信息交流模块的所有功能。

小程序前端登录与注册模块在整体设计方法上采用引入自定义API的方式，先完成登录、注册等组件的编写，再通过import 函数导入登录注册页面当中，减少代码复杂度，增加代码复用性，提高运行效率。学生和教师均可登录主界面实现不同角色的登录、注册、密码重置功能。个人中心模块在两种用户的界面布局和功能分布上采用相似的结构，功能上一种为对注册时未填写或要更改的信息进行更新，另一种为负责其他功能页面的路由跳转，包括学生提交的元件申请信息的管理与教师信息交流的管理等。

元件申请借出功能由学生和教师两端联动实现，教师端可以进行元件的增加、删除、修改使用须知、库存数量等信息。教师端发布信息后，学生登入学生端提交申请单，填写申请和归还信息等内容， 前端的主要实现方法是创建表单API，表单则通过form组件实现，表单组件的数据绑定主要通过event.detail={value：{'yuanjian'：'led'}，formId：''}形式实现[6]。教师端元件借出管理模块的实现第一步为从教师端获取学生提交的元件借出申请列表等数据，第二步为对引入的列表数据进行渲染，渲染方式与学生端借出申请相同，在元件申请表的基础上，为教师端额外使用picker-view 组件构建归还状态选择模块。教师可以在此界面对学生申请借出的元件进行归还确认，审批出借状态，通知学生取元件等，元件申请模块如图3所示。

2.2 PC 管理员前端系统功能的实现

PC管理员前端实现了和小程序前端相对应的功能。PC端均采用Vue框架开发，Vue也是一种基于Ja⁃vaScript的开发框架[7，8]。当用户点击登录时，请求会被发送到Java后端逻辑层中的/service/login，逻辑层对账号密码进行验证，完成这一步后，会将系统采集到的用户账号密码数据连同数据库进行检索，将后端登录请求通过Token保存到本地，除了登录验证外，需要使用Axios技术实现数据访问对象和service的创建。完成上述过程后，使用vue-router实现路由跳转，跳转到元件管理小程序的网页管理端。

PC管理员端学生管理模块详情界面逻辑与小程序端个人中心类似，区别为Vue将js，wxml，wxss等部分统一写在Vue文件中，渲染统一放在<template>视图层中，逻辑统一在<script>层中。使用v-for和v-bind，class-header等组件实现对实践课学生列表的创建。教师管理模块实施逻辑与学生管理页面相同，不同的是教师管理界面在<template>中额外添加了与教师数据表对应的el-table组件，管理员可以在此界面进行教师管理，页面效果如图4所示。

PC管理员端元件模块与小程序端教师用户不同的是，PC管理员具有管理多个不同教师的元件库存的权限，通过对教学班的管理教师编号，分配教师的元件管理权限，实施逻辑与小程序端类似，开发语言更换为vue，将按钮、渲染、数据绑定等功能统一放在vue文件中实现绑定[9]。元件申请信息管理模块与小程序端大体相同，不同的是PC端额外设计了绑定归还状态的table函数，以及searchhandle函数进行查询管理。PC管理员能够统一查看、管理、删除学生提交的申请单，并且可以直观看到返还确认的情况，方便使用者统一对元件的出借情况进行管理。

2.3 后端模块的功能实现

后端模块通过在Controller 层使用Requestmap⁃ping标注的方法处理登录请求，调用预先设置的判定函数，判定用户名和密码输入是否正确，用户是否已经注册过元件管理小程序，登录是否正确，生成token 返回服务器[10]。在Entity层配置接受传参的实体类，在View层配置后端返回实体视图的辅助类。然后在vo层配置数据库中表的映射，实现登录功能。通过创建client类和contact类，创建一个object数组把需要的传参放入数组中实现添加功能。修改和删除功能的实现通过先赋值到数组再执行SQL语句，最后使用Axios HTTP请求向本地服务器发起数据库操作请求，实现增查改删功能。数据搜索模块查询功能的前置操作与增加删除等类似，先在实体类中使用privateyuanjian id的格式进行声明，之后创建一个yuanjian⁃Repository接口，定义查找方法，最后Controller层中注入创建的接口实现搜索功能。

3 系统测试

为检验系统功能的实现效果，本文选取黑盒测试法对系统进行了功能测试。基本原理是通过用户层直接与软件接入互动，进行数据输入等操作，例如输入添加的元件库存信息，分析输出结果是否存入数据库中，并显示在元件小程序前端来测试软件系统的功能。在此过程中，测试人员只要看到了出借的元件在前端可视化界面变化，就可以判断出借元件功能是否运行成功，而不需要花费额外的时间去查看内部的代码实现。本次测试，预先准备了一组定义好的管理员和不同用户账号，分别进行了元件管理系统小程序端登录测试、学生端元件申请测试、教师端元件管理测试、学生端信息交流测试、PC管理员端登录测试、PC 管理员端学生管理测试、PC端元件申请信息管理测试，部分测试结果如表2所示。从测试结果来看，信息物理系统实践课程的学生和教师在元件管理小程序端能够实现登录、元件申请借出、正常查看元件使用说明与实验公告等功能，学生和教师能正常进行交流。PC管理员端的登录、管理选课学生、管理实验器件、查看、修改、增加删除学生提交的元件申请单等均正常实现。

4 结束语

实验教学是学生自主探究和创新创业的重要组成部分，本文针对信息物理系统实践课程教学过程中实验元件管理不便利的问题，设计并实现了一种基于微信小程序的元件管理系统，解决了学生因共用实验元件只能课上实验的问题。为学生提供了更好的实验体验和更加自主的实验环境，让学生们有条件完成更高水平的结课作品，在实践过程中更加深入了解物联网专业知识，增强工程实践能力与创新能力。

参考文献：

[1] 徐礼长.高校电子信息与物联网工程实验教学中心信息化管理实践[J].电子元器件与信息技术，2022，6（1）：36-37.

[2] 林仙土.基于微信小程序的高校设备管理系统设计与实现[J].无线互联科技，2023，20（1）：63-65，72.

[3] 汪庆，杜炜，耿英保，等.基于物联网的实验教学管理平台的构建与实现[J].电子技术与软件工程，2021（13）：165-167.