基于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 后端對微服務模塊的統一封裝及劃分能將業務處理統一化、標準化，并在后期可以通過持續迭代，譬如采用多線程、分布式架構等方式來進一步提高系統的高并發、高可用、高性能等，代碼的高可復用性及擴展性為項目迭代維護提供了極大的便利。