基于Springboot+Vue 框架的质量检验监督管理系统研发

徐少军 李宗哲 梅 杰 王志坚

(武汉质量监督站，430000 )

1 引言

当今，全球经济的快速发展和激烈的市场竞争给企业生存带来了巨大压力。许多企业意识到，把控好产品质量才能持续促进企业的健康发展，因此，企业对产品质量监督管理要求日益提高[1]。传统的产品质量监管模式极度依赖大量质检人员的手工操作，该方式存在着检验数量不精准、检验问题分散难统计、登记流程繁琐、资料查找与分析复杂等许多问题，严重影响一线工作人员的工作便捷性、决策层的数据依赖性和企业的生产运营效率。随着电子信息技术的发展和人们生活质量的提升，许多企业员工开始接受电脑、平板和手机等方式记录并操作办公软件。目前有企业已自主开发部分监管系统，但是通过对比分析发现系统存在很多的弊端：（1）系统功能比较单一，通配性、实用性不强；（2）系统多为单机，未搭建C/S 或B/S 模式，没有网络支持导致交互性差。企业各部门内模块操作分离度过高，沟通繁琐，维护麻烦；（3）采用第三方技术支持模式的，广告多，后台安全维护由第三方把控，安全性得不到保证。系统的并发性能较差且吞吐量有限，平台上信息繁杂，数据库与服务器压力大，导致使用人群数量受限，实际应用效果较低；（4）目前系统开发技术老旧，后期维护与功能拓展困难。

综上，开发一个符合当代纺织服装产品质量检测需求的质量检验监督管理系统是非常有必要的。本文设计并开发了一个基于SpringBoot+Vue 框架的质量监管系统，为相关企业提供一个科学标准、安全高效的网络互联操作平台。

2 相关开发环境与技术概述

该系统的开发语言是Java，前端语言主要使用html+css+JavaScript 及Vue，依托IDEA 开发平台进行前后端代码编写与测试。美工设计使用Photoshop CS5 软件，git 库提供项目代码管理功能。开发模式采用基于Vue 和SpringBoot 前后端分离式开发，将前端和后端的项目业务分离，更好地做到解耦合。

后端使用当前稳定流行的Web 项目开源框架SpringBoot 和MyBatis，其 中MyBatis 配套使用MySQL 数据库构建持久层框架，并依托Redis 作中间数据缓存。整体上，用户拥有更好的界面体验。

前端项目和后端项目的运行是在不同服务器上。后端采用的是Tomcat 服务器，配合前端的Nginx 反向代理服务器实现系统高并发与高性能，可提供24 h 热部署及较高的可靠性，使用配置简单。前后端分离的设计实现了B/S 模式，前端专注页面交互和数据展示改善用户使用体验，后端专注业务逻辑处理和数据供给提升系统整体性能，使应用程序的灵活性与可控制性得到极大提升，同时，代码编写简约、可重用性高、维护成本低。该系统具有运算快、操作简约、易于管理、维护方便及扩展性强等特点。

2.1 Vue

Vue.js 是一套构建用户界面的渐进式JavaScript框架。Vue 的核心库只关注视图层，采用自底向上、逐层应用和增量开发的设计理念。Vue 通过尽可能简单的API，实现响应数据的双向绑定和视图组件的组合。Vue 提供的路由和状态管理机制，可帮助开发者轻松组织代码和管理状态。该框架具有运行高效、易学易用、操作简便及支持组件开发等特点，深受研发者的喜爱，是目前主流前端框架[2]。

2.2 SpringBoot

SpringBoot 是一款流行且基于Spring4.0 设计的开发框架，它不仅继承Spring 框架原有的优秀特性（IoC、AOP、DI），还通过简化配置进一步简化Spring 应用程序的开发和部署。另外，SpringBoot 集成大量框架使得依赖包的版本冲突以及引用的不稳定性等问题得到很好的解决[3]。

2.3 MyBatis

MyBatis 是一款优秀的持久层框架，并支持自定义 SQL、存储过程以及高级映射。MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。MyBatis 通过简单的 XML 或注解来配置和映射原始类型，接口和 Java POJO（Plain Old Java Objects、普通老式 Java 对象）为数据库中的[4]。本文采用MyBatis，使得Java 应用程序的数据访问MySQL 数据库变得更加简单高效。

3 系统功能模块和系统框架设计

3.1 系统功能模块

本文开发的系统主要模块有：一是物资生产进度统计及检验申请模块。生产部门可根据产品的实际生产情况，在系统中录入基本的生产数量、库存数量等，同时向质检部门提出检验申请需求。系统收录各品类物资质量检验申请表的基本信息并统计归拢至数据库内，同时将各企业报检情况动态实时更新并上报到上级部门端口。二是质检过程记录模块。生产部门可将申请表中的基本数据上传到系统内，质检人员赴现场后根据系统数据对仓库内存放的数量进行复核。复核无误后，质检人员可以参考系统根据科学抽样算法提供的该批次所需要的建议抽样数量抽样，并将随机抽取的样品信息一键导入系统。抽样质检完毕后，系统根据质检人员录入的基本问题和设定的算法准确判断该批次产品的等级，结合质检人员上传的第三方检测报告综合判定该批次是否合格。三是开具相关文书模块。质检人员在系统上审核通过某批次的产品并开具相关检验文书之后，生产部门方能发货。该系统提供线上审核签字、一键生成出厂许可证、产品质量监督检验报告等相关文书的功能，减少了传统EXCEL 模式手动输入的繁琐易错等操作。四是数据统计分析模块。产品发至收货点后，由收货点人员上传回执单录入系统内。企业相关权限人员可在系统上随时查看产品的发运情况，确保产品无违规发货的问题。同时，系统提供一键数据导出功能，方便分析决策，也可以直接线上对包括报检数、质检数、问题数、发运数和问题情况等一系列数据进行线上修改分析操作。五是系统基本管理。分情况对用户的权限进行分级管理（见图1）。

1.2 HCVcc 制备 将 Huh7.5.1 细胞消化并用无血清培养液 Opti-MEM 重悬，调细胞密度为2×106/mL；将 10 μg J6/JFH-1 HCV RNA 与 10 mL Huh7.5.1 细胞悬液混合，置于电穿杯进行电穿转染，条件为 270 V、950 μF、100 Ω。随后加入2 mL 新鲜 DMEM 培养液，转移至 6 cm 培养皿中继续培养细胞。在 48 h、72 h 收集细胞培养上清（HCVcc），以 5 000×g 离心 5 min 除去杂质和细胞碎片，再将上清分装，于 －80 ℃ 冻存备用。

图1 系统功能模块

3.2 系统框架设计

系统整体框架共分为前端、后端以及数据三块架构，共分为六层，即用户层，视图层、控制层、业务逻辑层、数据访问层和数据库层。系统架构图见图2。

图2 系统架构

3.2.1 前端

前端主要包括用户层（User）、视图层（View），主要用于处理用户界面以及数据交换。用户使用各类终端联网设备（包括电脑、平板和手机），通过浏览器登录前端Web 应用使用Element UI 和Echarts 构建的用户界面与系统交互。主视图由Vue组件cli3 脚手架构建，分别使用Router 和VueX 进行路由和状态管理，采用Axios 异步请求/响应技术同后端控制层和业务逻辑层进行数据通信和调用，将POST、GET 等请求数据返回至用户界面。

3.2.2 后端

前端主要包括控制层（Controller）、业务逻辑层（Service）。主要负责响应前端请求及数据查询。控制层通过Spring MVC、FastJSON、RestTemplate和Spring Security + Filter 过滤器等获取用户的请求访问及安全控制，接收到前端传过来的数据后，调用业务逻辑层的服务，将业务层返还的数据以JSON 的形式传给前端，以便解析渲染。业务逻辑层主要使用Spring 事务控制处理用户访问逻辑，完成各个模块之间的信息处理。

3.2.3 数据

数据主要包括数据访问层（Dao）和基本数据层。数据访问层通过调用Mapper 接口中相关映射的mapper.XML 文件，灵活操作数据库，采用MyBatis提升数据访问的性能和稳定性。数据库层是具体存储系统数据的地方，主要数据包括：企业业务专业数据、系统log 日志、消息队列、索引库和缓存等。基本数据层采用目前最受欢迎的开源数据库——MySQL8.0 数据库，支持多数据源及类型，同时采用缓存Redis 提升访问速度。

4 系统技术的实现

4.1 系统平台开发步骤

系统的前后端分离架构总体上包括前端显示端和后端服务端，模块分部清晰明确，技术要求差异大，采取多人协作并行开发模式。开发步骤如下:

4.1.1 系统分析

从经济、技术和运行三方面分析系统合理性、可行性和可达成性，包括业务流程分析和需求分析。

4.1.2 概要设计

设计软件的结构、确定系统的模块组成，以及每个模块之间的关系，包括采用结构图来描述程序结构，架构、功能、数据库以及接口的设计等。

4.1.3 详细设计

前端、服务端、数据库并行开发，前端开发用户操作界面，并设计请求服务端接口，后端依据接口进行服务端接口开发，完成数据库设计与搭建。

4.1.4 系统测试

通过单元测试分别对前后端进行模块测试，测试合格后，对前后端集成测试，最终前端调用服务端接口进行系统测试，完成业务。

4.2 系统服务平台的实现

根据企业业务需求分析、功能模块和系统框架设计，质量检验监督管理系统采用Tomcat 9.0 和轻量级反向代理服务器Nginx 作为Web 服务器，使用数据库MySQL 8.0 管理数据，应用Redis 进行数据缓存，结合前端框架Vue 和后端框架SpringBoot 形成分离式组合架构，并通过封装Json 格式数据实现前后端交互，开发出B/S 模式的快速设计系统。

4.3 微服务模块划分原则

微服务（Microservice）的概念是2012 年出现的，作为加快Web 和移动应用程序开发进程的一种方法，2014 年开始受到各方的关注。但是把一个大型的单个应用程序和服务分解为数个甚至数十个支持微服务的拆分原则比较难把握，常常会出现过度拆分或拆分不充分的情况。该系统主要涉及产品质量检验监督过程中业务需要运用的各类公式及算法需要进行封装成微服务，采用前后端分离原则，前端和后端的代码分别分离及部署。

前端通过Vue 的computed 属性和封装成公共接口api.js 的方式进行简单的数据处理，如加减乘除类基本算法、单位换算等。后端服务将业务中使用到的各类理论公式，如各种品类的科学抽样比例、等级划分算法和基本的求解算法等进行统一封装成各类微服务，每一个微服务模块，只关注自己的算法业务规则。例如记录检验结果模块借助内部公式算法依据输入参数进行计算，根据算法结果直接判定该批次是否合格，不牵扯其他业务的逻辑，让各个算法模块解耦合，避免了A 接口的算法变化会影响B 接口的使用。

4.4 功能模块的实现

4.4.1 物资检验申请模块

该模块将企业各品类的产品做成实体类，并设置相应的库存数量、检验申请数量等属性，结合前端ElementUI 组件，进行数据可视化展示，让用户能便捷易懂地理解数据内容及趋势。同时，通过设定检验阈值，当生产库存达到设定值时，及时提醒生产部门提出检验申请。

4.4.2 检验过程记录模块

该模块通过前端Element 组件设计基本检验结果录入对话框，该对话框包括产品核心质量指标。在产品通过基本的外观检验后，根据需求确定是否送往实验室或第三方检测机构进行相应的检测，最终将检测结果录入到系统内。后台算法可为质检人员判定该批次产品是否合格提供依据。该模块让质检人员系统操作更加简便，减少人为判定以及计算误差，更加公正科学，也间接降低了对质检人员的计算能力和分析判定能力的要求，大大降低了人力成本。

4.4.3 出具相关文书模块

该模块将业务流程所需的各类文书通过整合数据库相关数据，结合后端的数据通信和微服务Axios 调用，借助前端单页面模式设计的用户交互界面展示给用户。质检人员确认无误后,页面采用POI 组件对所需文件批量导出为所需格式文件，同时也支持线上直接打印。

4.4.4 数据统计分析模块

该模块调用并设置业务所需产品的库存情况、检验情况和发运情况属性值，实现数据的增删改查及筛选统计功能。结合前端Echarts 组件，将数据以图标的形式可视化展示，为用户全面掌握企业各类产品的生产、质检、发运情况及后期趋势提供极大的便利。质量检验监督管理系统中某个产品生产、库存、检验、发运数量基本情况数据图的单页面应用见图3 ：

图3 质量检验监督管理系统数据

4.4.5 系统基本管理模块

系统常规的用户登陆验证、用户管理、角色权限管理、日志管理模块的路由配置在一级index.js，菜单路由管理模块采用动态定制模式储存在Router内，将系统子菜单的网址由Vue 二级路由index.js配置，按设定进行分层级分权限管理。

5 应用成果与系统评价

5.1 方案测试及应用成果

该系统主要通过黑盒测试和白盒测试来查找并修正可能存在的问题以保证系统成功运行。白盒测试主要在单元测试中使用。分析系统详细代码并对系统结构测试，发现系统在运行过程中的问题点并及时修正。黑盒测试主要在集成测试与系统测试中使用。主要测试系统功能，以用户视角对系统进行相应的操作，检查系统反馈数据能力以及执行相应功能效果。详细测试系统功能以及使用方法，确保信息的录入输出完整且准确。

该系统部署发布后，通过简单的操作方法培训，企业员工就能迅速运用到日常质量检验监督管理中，极大地简化质检工作流程，规范了业务中各类计算方法，操作更加简便快捷，提高了质检效率、产品质量稳定性、企业的竞争力。部分业务功能如开具文书、日常质检抽样快速输出输入等模块在质量检验监督管理中也得到了成功应用。

5.2 系统评价

5.2.1 上文提出的基于SpringBoot + Vue 框架设计及实现为企业质量检验监督管理提供了一套切实可行的系统及模式。该系统提升了企业各部门在产品质量监管方面的交互管理能力，对产品前期生产监控、中期质量稳定把控、后期产品稳定发运提供了全面的数据支持。企业对产品质检管理信息技术的应用提供了更大的发展领域，后期系统可以扩展到上下游产业链产品质量的监管。

5.2.2 前端应用Vue + ElementUI + Echarts 构建的各业务单页面使得在Web 上也能实现类似C/S 模式下的简约高效专业应用软件的功能及效果。为用户界面交互及数据通信的前端开发提供了一个快捷高效的方式。

5.2.3 后端对微服务模块的统一封装及划分能将业务处理统一化、标准化，并在后期可以通过持续迭代，譬如采用多线程、分布式架构等方式来进一步提高系统的高并发、高可用、高性能等，代码的高可复用性及扩展性为项目迭代维护提供了极大的便利。