一个智慧实验实训系统的设计与实现

雷泽坚 李锡辉 刘宣江

关键词：实验系统；智慧校园；Vue开发框架；Spring Boot；MySQL

0 引言

目前，学校各专业在收集实验实训稿件时普遍没有使用在线提交系统[1]，实际操作过程中，无论是实验实训报告或是课程设计的电子档和纸质档的收集，都是通过各科的课代表和学习委员帮助收集，难免会出纰漏，也有一些因为对业务不熟悉导致出错，进而降低了整体的工作效率。若是有一款智慧实验实训系统，那将大大减少人力和物力的支出，也能够减少出现多个版本，从而导致需要重新打印，進而引发矛盾和资源[2]的浪费，本文从此处着手，搭建了一个智慧实验实训系统，意在方便大家，解决学校和信息工程学院的各类型实验实训问题。

1 系统开发技术

1.1 Spring Boot 框架

Spring Boot[3] 基于Spring4.0 设计，不仅继承了Spring框架原有的优秀特性，而且还通过简化配置来进一步加速Spring应用的整个搭建和开发过程。另外，Spring Boot通过集成大量的框架使得依赖包的版本冲突和引用的不稳定性等问题得到了很好的解决。Spring Boot框架开发还可以实现前后端分离，相较于传统的开发模式，这种更利于维护。

1.2 MySQL 数据库

MySQL[4]是一个关系型数据库[5]管理系统，其将数据保存在不同的表内，而不是将所有数据都放在一个大仓库中，这样就增加了速度并提高了灵活性，由于其体积小、速度快、总体拥有成本低，尤其是开放了源代码这一特点，一般中小型网站的开发都选择MySQL 作为网站数据库。

1.3 Vue 开发框架

Vue开发框架是一款用于构建用户界面的JavaS?cript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面，其只关注视图层的开发工作。这种框架不仅容易上手，还便于与第三方库或既有项目整合，是一套用于构建用户界面的渐进式框架，应用此框架可以轻松处理大多数Web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。

2 系统详细设计

本文实现的智慧实验实训系统[6]一共分为四个大的板块，分别承担了实验室管理、材料管理、学生管理、预约管理的功能，其中实验室管理功能是系统的主要功能，其余各个部分的功能都是与实验室管理功能相辅相成的，主要架构如图1所示。

2.1 实验室管理

实验室作为智慧实验实训系统的最重要部分，在设计之初就被列为重点进行设计，前后端分离，数据库独立以方便维护。

1） 后端设计

在后端设计部分，这里将其分为四个组件，其中的实体类是最重要的部分，它们分别是：entities 和controllers以及services和repositories，也即实体类、控制器类、服务类和仓库类，此处在实体类中使用了Java Persistence API （JPA） 来映射数据库表，并定义了实验室的各个属性，如id、name、description、location、capacity等；控制器类是一个Spring MVC控制器，它定义了处理HTTP 请求的方法，通过使用注解来映射HTTP请求到相应的方法上。其中，该控制器能够处理获取所有实验室、根据ID获取单个实验室、创建新实验室、更新现有实验室的信息、删除实验室等操作；仓库类是一个Spring Data JPA接口，它提供了一组基本的CRUD操作方法，如findById（）等方法，被用于与数据库进行交互。

该接口继承了JpaRepository接口，这个接口提供了一些基本的JPA操作，如save（）、findAll（）等；服务类提供了对实验室的各种操作方法，如获取所有实验室、根据ID获取单个实验室、创建新实验室、更新现有实验室的信息、删除实验室等。

该服务类通过调用LabRepository接口中定义的方法来实现对实验室的操作。

2） 前端设计

在前端设计部分，主要解决的是人机交互的问题，此处开发使用Element Plus组件库的组件构建，将页面设置出独立的组件，实验室管理功能主要实现面向老师：预约和发布、收集功能，面向学生：预约、查看、提交功能，面向实验室管理人员：维护、审核功能一共八大功能，且这些功能在此系统中以输入框的形式体现，因为使用Element Plus 构建应用，所以其UI 界面较为美观。

3） 数据库设计

在数据库设计部分，主要解决数据的存储问题，除了字段问题，外键约束也是一个必须要考量的问题，系统的实验室管理功能的数据库字段说明如表1 所示。

2.2 材料管理

材料的管理显然是设计这一个系统的重要组成部分，实验的最终结果是必须要输出为按照要求和格式的材料，限制于学校的资源有限，这里未能将收集文件的功能集成到系统之中。故而采用了如图2所示的由金山办公出品的WPS群共享文件夹实现收集文件的功能，方便快捷。

而具体的统计信息，可以导出Excel报表后由实验室管理人员录入，也能够实现同步的功能。这一部分的前后端设计与之前的实验室管理部分相同，都是以模块化的方式完成，后端四个组件，前端使用Ele?ment Plus组件构建，但是，这一部分的不同之处在于数据库的设计，这里的材料管理功能的数据库的字段说明如表2所示。

2.3 学生管理

这个系统最重要的就是要面向学生本人进行设计，学生管理关系着学生的学分成绩以及个人命运前途，因此在设计这一部分不容半点马虎。此部分虽然也是与之前的内容基本相同，前后端分离，后端四大组件，前端使用Element Plus组件构建，自然这也是模块化开发的一大好处，无须很多精力从零开始完善所有的功能，套用已有模板就能完成新功能开发，此处也是为开源生态做出自己的贡献。项目的完成是站在巨人的肩膀上完成的，没有庞大的开源社区和同学老师的帮助，开发的过程将举步维艰。同样的，这里的学生管理功能的数据库的字段说明如表3所示。

2.4 预约管理

最后一环是预约的管理。过去的一年里，由于西校区图书馆的修缮，仅存的电子浏览室也被暂停使用，学校里各个学院都有一定的解决方案来方便考研学生，例如多开放自习室等政策，但是还有一部分对实验环境，尤其是对电脑配置有需求的学生提出了要将各个学院机房有闲置的机房进行资源共享，需要学校提供一些能够操作一些对电脑配置的需求较高的程序或是对物理以及数学模型进行模型的渲染和修改。但是管理起来太麻烦，权责不明晰。谁带队进入的实验室？结束实验之后出现问题谁负责？当天的实验管理人员又该安排谁？这个系统的设计考虑到这一点，提出了预约功能这一概念，节假日实验室可以预约进入进行实验，只需要在这个系统内登记必要信息，审核通过即可。预约管理功能的数据库的字段说明如表4所示。

3 系统配置说明

在构建整体项目的时候，团队出现过许多BUG，包括但是不限于后台服务无法正常启动，前端页面显示不全，侧边栏与主页面重叠等问题，但都迎刃而解，为了能够复现团队的项目，方便后续优化，防止出现“It works on my machine”等系列跨平台问题，这里项目对配置文件有几点要求。

这里的Vue项目[7]在项目的src目录下的main.js 文件配置是最重要的一环，关系到系统如何处理这个项目的逻辑，其应当如下所示：

最后是作为最关键部分的路由，这里添加的是router.js文件，其为跳转页面做了技术上的支持，值得注意的是，这里的所有组件都必须要注入路由才可以完成跳转，侧边栏才有效果，其配置应当如下所示：

import Laboratory from ′@/components/Laboratory.vue′

//其余组件类似

const routes = [

{path： ′/laboratory′，

component： Laboratory}，

//其余组件类似]

const router = createRouter（{

history： createWebHistory（），

routes}）

export default router 以上便能配置好Vue项目

3.2 Spring Boot 项目

这个系统使用了前后端分离的技术，前后端两个项目分布在两个不同的端口下，要想实现通信，必须配置跨域访问，允许来自不同域名的资源进行相互访问，本系统的WebConfig.java配置如下：

这样就实现了前后端分离管理的功能，便于维护和拆分，当有新的业务逻辑加入时，只需要再添加一个模块并按照需求更改即可，这样做，大大提高了开发人员的维护效率，减少了做重复劳动的必要。

除此之外，为了能够对数据库进行读写操作，这里还需要在application.properties 文件中添加如下配置：

这里请务必将加粗部分的内容替换为本地机器的内容，否则将导致配置无效，将无法对数据库进行读写操作。

4 系统整体测试

4.1 Spring Boot 项目测试

打开集成编译环境，这里编译选择的是IntelliJIDEA，首先启动此项目的总进程文件：ProjectApplica?tion.java，右键点击运行，当出现如图3所示的效果，即出现可以点击的8080端口蓝色超链接时，项目启动成功，这个时候系统的端口就是正常运行的。

启动成功之后，可以使用Postman或者IDE自带的工具等API测试工具对其发送请求，看看是否有数据的返回。

首先测试的是http：//localhost：8080/labs这个端口，其指向的数据库是：实验室管理。这里也成功返回了如图4所显示的结果。经各项测试，认为后台服务端运行状态良好且能读取到数据库的信息。

4.2 Vue 项目测试

Vue项目位于整体项目的一个目录下，与后端项目同级，要想启动这个项目，需要先到控制台切换到这个项目的文件夹下，本文的是在整体项目目录下的frontend目录，执行命令：npm run serve，当出现如图5 所示的提示词和蓝色超链接时，项目启动成功。

打开任意浏览器，输入：http：//localhost：3001/，能够出现如图6所示的一个页面即可，这里项目显示的是示例页面，默认的显示界面是laboratory，所以浏览器自动会在域名后追加laboratory的显示，经过多轮测试，在启动了这一项目后显示均正常。

4.3 整体项目测试

在完成了以上两个端口的测试之后，就要进入系统的最后测试环节。整体项目测试环节，在这一部分，系统需要保持三个端均在线：前端、后端、数据库，启动顺序应该是：数据库连接→后端项目→前端项目，在按照先前提到之正确的顺序启动了项目之后，成功观测到系统设计之初预想的效果，如图7所示。

还需要测试其与数据库的互动能力，输入一些示例数据，添加之后可以看到，如图8所示，数据出现在下方的表格中。

等待片刻，待服务器与数据库产生数据交换后，在数据库中也能观测到这些示例数据，如图9所示，即成功。后续页面经过多轮项目测试，其余部分也均能正常工作，成功地实现了系统的预期的效果。

为了确保项目能够正常工作，避免出现页面的错乱，这里推荐使用谷歌浏览器等主流浏览器查看此效果，渲染的效果最好，响应速度也是最快的，一般情况下不推荐使用IE浏览器查看，因为这里使用的技术并未专门对IE浏览器做优化，也请这部分用户尽快升级到Edge浏览器以方便使用，获得最新的安全支持。

5 结束语

本文使用Spring Boot技术和Vue开发框架开发了一个智慧实验实训系统，经过各项综合测试与试点应用，可以認为此系统所提供的几大功能均能有效帮助学校和学生提高各项实验实训的效率，达到了系统设计预期的效果。限制于学校的资源有限，这个系统的设计还有一些不足之处，一些服务例如存储服务未能实现自主化。未来，团队将会引入更加方便大家使用的各项功能，在尽可能的情况为此系统提供学校校内的存储服务，再引入一些时下热门提高效率的技术，例如大语言模型技术智能答疑，更美观的、以人为本的UI界面，提高学校和学生的用户体验。