基于SpringBoot+Vue的BOM表智能生成系統設計與實現

李佳 吳菲 章毅恒

摘? 要：有些特殊單位在制作BOM表時出于保密要求不能連接外網，傳統的手動登記方式耗時費力不利于高效研發和生產，因此，采用前后端分離開發模式，后端使用SpringBoot框架，Mybatis數據連接，前端使用Vue漸進式框架，element-ui前端組件，設計并實現了BOM表智能生成系統，實現物料從設計部到采購部再到倉儲的離線管理，實現了對物料離線管理的目標。該系統具備極高的可靠性和實用性，能簡化保密部門對BOM表的錄入過程，為企業提供離線整理平臺。

關鍵詞：BOM表智能生成；離線數據管理；SpringBoot框架；Vue框架

中圖分類號：TP311；TP309 文獻標識碼：A? 文章編號：2096-4706（2023）09-0184-05

Abstract： Some special units cannot connect to the external network due to confidentiality requirements when making BOM tables. The traditional manual registration method is time-consuming and laborious， which is not conducive to efficient development and production. Therefore， adopts the development mode of front-end separation， the back-end uses SpringBoot framework， Mybatis data connection， and the front-end uses Vue progressive framework， element-ui front-end component， design and implement an BOM table intelligent generation system， realize the off-line management of materials from the design department to the purchasing department and then to the warehouse， achieve the goal of off-line management of materials. The system has high reliability and practicability， which can simplify the BOM table entry process of the secrecy department and provide an off-line sorting platform for enterprises.

Keywords： BOM table intelligent generation; offline data management; SpringBoot framework; Vue framework

0? 引? 言

企業研制新型產品的過程正處于產品不成熟的階段，需要一邊生產產品一邊對新產品進行試驗，新產品試驗反饋的結果可用于隨時調整產品設計，由于產品設計的變更需要適時調整產品物料清單（Bill of Material， BOM）。BOM表是企業資源計劃系統（Enterprise Resource Planning， ERP）運算的數據基礎，與企業各部門的業務活動相連甚密，一旦BOM發生改變，之前已經生成的大量單據都會失去準確性，只能根據新的BOM重新進行生成物料需求計劃（Material Requirement Planning， MRP）運算，必須手工實行善后處理工作，出于保密方面的考慮不能連接外網與ERP系統同步數據，給BOM表編輯人員帶來巨大的工作量。有時由于試驗需要緊急采購物資，而這些物資并不具備企業的物資編碼，由于不能連接外網，ERP系統不具備對臨時物資進行有效管理的能力。本系統可解決這兩種問題，為工作人員提供便捷化、信息化的BOM表智能生成平臺。

1? 系統需求分析

基于企業保密要求，為解決不能連接互聯網交換信息的問題，打造BOM表智能生成系統及時管理臨時物資以及減輕操作人員的工作量，就ERP系統與BOM表智能生成系統不能直接通過網絡互聯，也不能直接通過數據庫直接交換數據的問題，經過反復思考，形成通過Excel模板在兩個系統之間交換數據的方案（如圖1所示）：

1）ERP系統導出存貨檔案數據（模板文件），提取所需的基礎數據。

2）BOM表智能生成系統導入存貨檔案（模板文件），存入數據庫，實現基礎數據的同步。

3）BOM表智能生成系統根據設計人員明細表/輸入數據，自動生成BOM表。

4）BOM表智能生成系統導出BOM表。

5）將BOM表導入ERP系統中，實現兩個系統的數據同步。

為滿足系統需求，設計基礎數據管理模塊、明細表錄入模塊、BOM表智能生成模塊等：

1）基礎數據管理模塊。包括ERP系統現有基礎數據導入該系統數據庫，新增臨時無編碼物資數據以Excel表格形式導出無編碼物資存入ERP系統。

2）明細表錄入模塊。生產設計部門可高效便捷地錄入設計BOM表，并在統一平臺上供工藝設計部門繼續編輯。

3）BOM表智能生成模塊。以明細表導入新建生成BOM表、手動新建BOM表、復制已有BOM表等多種方式智能快捷生成BOM表。

1.1? 存貨檔案數據管理模塊需求分析

存貨檔案數據管理模塊提供存貨名稱、存貨編號、規格型號、產地廠牌、存貨代碼、存貨大類名稱編碼、存貨大類、建檔人、建檔日期等信息，可以在此模塊中導入、瀏覽存貨檔案信息。如圖2所示為存貨檔案數據管理流向圖。

1.2? 明細表錄入需求分析

明細表錄入模塊為設計人員提供在線快捷錄入明細表功能，輸入框可跨字段模糊搜索，提高錄入速度，錄入完成后直接保存到數據庫，工藝設計部門人員可在此基礎上進行BOM表的編輯操作。如圖3所示為明細表錄入和管理數據流向圖，明細表由多人錄入，是否生成明細表需要管理員審批，若某明細表的審批結果為合格，則該張明細表流入BOM表生成模塊，若某明細表的審批結果為拒絕，則該明細表就會返回到錄入人員那里進行整改處理。

1.3? BOM表智能生成模塊需求分析

BOM表智能生成模塊主要提供三大功能，分別是BOM表錄入、BOM表生成和BOM表審核，并提供三種BOM表錄入方式，一是基于導入明細表的方式生成BOM表，相比于傳統的手動錄入節省了大量的時間，無須再手動輸入已有明細表的內容；二是以復制其他表的方式生成BOM表，如果BOM表有部分與其他BOM表重合的地方則可復制該表，并在此基礎上繼續進行新BOM表的編輯工作；三是直接手動錄入BOM表，但此時直接手錄BOM表也與傳統錄入BOM表的方式有所不同，增加了快捷錄入方式。

如圖4所示為BOM表數據流向圖，可以在頁面中看到所有已經審批的BOM表，也可以通過點擊的方式查看自己制作的BOM表。

2? 系統設計

2.1? 系統總體框架

為提高開發效率和可擴展性，采用前后端分離的開發模式，前端使用Vue漸進式框架，界面展示采用elemnet-ui組件提高美觀度，后端采用SpringBoot框架和Mybatis驅動器，以此搭建一個B/S架構的系統。如圖5所示為BOM表智能生成系統總體架構圖。

架構圖總共分為三個板塊，每個板塊中有對應各個功能實現的具體小模塊。1過程表示不同用戶所能執行操作的不同權限，前端在調用接口時攜帶用戶權限標識，后臺識別用戶權限提供該權限對應的功能操作；2過程為后臺代碼編寫時使用SpringBoot框架整合mybaits進行持久層框架配置，用以后續進行數據庫操作；3過程為后臺服務整合了mybaits框架后對數據庫進行具體的操作，根據后臺從前端獲取到的具體服務需求，對數據庫進行相應的增加、刪除、修改和查詢操作；4過程為后臺為前端提供服務接口返回前端需要的數據內容，以此實現前后端分離開發模式的數據交互，前端根據后臺呈遞的JSON字符串格式的數據進行解析并實現數據的可視化展示；5過程為不同用戶角色所能看見的不同操作界面，避免不同用戶誤操作的可能，提高本系統的安全性和專業性。

2.2? 系統詳細設計

2.2.1? 存貨檔案數據管理設計與實現

如圖6（a）所示為存貨檔案數據管理流程圖。明細表設計人員在進入該系統錄入界面時點擊編輯按鈕，解鎖表格操作，聚焦表格單元輸入框，通過focus事件從前端獲取界面數據操作信號發起請求，調用后端獲取存貨檔案信息接口，使用Mybatis的helperPage分頁方式，分頁獲取所有存貨檔案信息，其內容有頁碼、每頁展示條數和內容、總頁數、當前是否為首頁或末頁，并以JSON字符串的形式將內容傳遞給前端，前端將得到的字符串解析后，判斷首頁末頁信息，展示當前頁碼，將所獲取的本頁數據內容渲染到頁面展示給用戶，倘若數據庫中沒有相應數據，則可以手動輸入物料名稱，并在生成BOM表后，以Excel的形式導出新增物料，傳入ERP系統實現數據同步。

2.2.2? 明細表錄入設計與實現

操作人員進入系統明細表部分，前端請求后臺，查詢到所有明細表列表，使用Mybatis的helperPage方法從數據庫中獲取分頁數據（數據內容為各個明細表的名稱），將獲取到的明細表名稱列表渲染到頁面表格中，查看所有明細表及自己編輯的明細表是否通過審核。在列表中篩選查看自己編輯的明細表，同時可以選擇增加、刪除、修改以及審核明細表。明細表錄入流程如圖6（b）所示。

2.2.3? BOM表智能生成系統設計與實現

操作人員進入該系統BOM表部分，前端會調用接口展示當前所有的BOM表，管理員用戶可以點擊未審核篩選出當前沒有審核的明細表，并在列表中展示當前所有未審核的明細表。

BOM表生成有三種實現方式，第一種方式是選擇明細表生成BOM表，第二種方式是直接手動輸入BOM表，第三種方式是復制現有BOM表，在此基礎上修改而成。BOM表生成流程如圖6（c）所示。

2.3? 數據庫設計

根據BOM表智能生成系統業務，主要設計了如圖7所示的業務表。

1）用戶表用于記錄用戶信息、用戶角色信息及審核信息。

2）權限明細表用于記錄用戶權限以及各權限對應的操作詳細內容。

3）記錄物料信息，各數據表之間的關系如圖7所示。

4）明細表用于記錄明細表信息。

5）BOM表用于記錄BOM表信息。

6）新增存貨表用于記錄臨時新增存貨，便于新增存貨的導出。

7）物料管理表用于記錄所有物料信息。

8）存貨分類表用于記錄所有物料分類信息。系統所用的各個數據表之間的關系如圖7所示。

3? 系統實現與測試

3.1? 系統實現

本系統采用前后端分離的開發方式，前端采用Vue漸進式框架開發，網頁界面繪制使用elemnt-ui組件優化界面美觀度的同時加快系統開發進程；后臺使用SpringBoot+MyBatis+

MySQL數據庫開發平臺，開發環境為java jdk1.8，開發時數據庫采用Navicat可視化工具輔助觀察后臺服務情況，實現BOM表智能生成系統存貨檔案數據管理、明細表錄入管理、BOM表生成管理、用戶權限管理和分配等功能。

如圖8所示為基礎數據上傳與瀏覽界面，可將從ERP系統導出的基礎數據上傳到本系統的數據庫中；如圖9所示為明細表編輯、審核與瀏覽界面，明細表編輯界面具有數據審查功能，當為紅色時表示數量欄未填寫；如圖10所示為BOM表編輯與瀏覽界面，可在此界面中查看所有明細表和我所編輯的明細表，點擊導出新增，則新增物料欄變紅。

3.2? 系統測試

為測試BOM表智能生成在線系統功能是否能正常使用，根據系統需求模塊設計了如表1所示的功能測試用例，從不同用戶角色功能和不同模塊等方面對系統進行了測試驗證。測試結果表明，BOM表智能生成在線系統的存貨檔案數據管理、明細表錄入、BOM表智能生成模塊所有功能均測試通過，使用Navicat數據可視化工具輔助查看數據內容，可觀察到功能測試結果與預期效果一致，界面操作流暢無異常且排版美觀舒適，網頁在線表格錄入數據穩定無卡頓，模糊搜索響應及時無明顯延遲，數據傳輸穩定，根據開發需求實現的BOM表智能導出系統可提供良好的用戶交互體驗，在系統后續擴展測試時，會加強系統性能測試，進一步縮短操作響應時間。

4? 結? 論

本文立足于保密單位對數據需要保密同時也需要單位內部共享數據在線智能生成BOM表的需求，設計并實現了BOM表智能導出系統，本系統采用B/S架構和前后端分離的開發模式，在提高代碼可擴展性的同時縮短開發周期，前端采用Vue框架，后臺采用SpringBoot框架整合MyBaits進行功能服務接口開發，完成了本系統存貨檔案數據模塊、明細表模塊、BOM表模塊等功能的開發，從而實現了將數據錄入基礎數據庫到明細表錄入再到BOM表生成，為工藝制作部門制作BOM表提供了便捷的服務。

該系統具備極強的可行性與實用性，為BOM表制作部門提供便捷的同時將數據庫同步到BOM制作和生成平臺，節省了設計部門和工藝制作部門來回溝通的時間，并能夠及時同步ERP系統中的數據。后續如果時間充足會繼續從兩個方面優化本系統，一方面是優化現有代碼，進一步提高代碼性能和可復用性，刪除冗余代碼，在已有基礎上繼續優化與用戶的交互性；另一方面會考慮增加功能模塊接入倉儲物流信息，幫助企業進一步管理產品，使本系統具有更大的現實意義和使用價值。

參考文獻：

[1] 楊鑫.XX軍工企業ERP實施困境及其對策 [D].湘潭：湘潭大學，2009.

[2] 徐小輝，劉江濤，高涵，等.基于SpringBoot+Vue框架的采氣方案系統開發 [J].計算機仿真，2021，38（6）：248-250+382.

[3] 韓佳彤，杜芳，甄必鑫，等.基于SpringBoot的分布式市政運維分析平臺 [J].內蒙古大學學報：自然科學版，2022，53（3）：309-316.

[4] 郭建衛.基于SpringBoot+Mybatis+Vue的學生德育量化考核系統設計與實現 [J].現代信息科技，2023，7（1）：18-22.

[5] 銀莉，杜嘯楠.基于SpringBoot和Vue的社區服務平臺設計與實現 [J].電子技術，2022，51（12）：182-183.

[6] 王丹，孫曉宇，楊路斌，等.基于SpringBoot的軟件統計分析系統設計與實現 [J].軟件工程，2019，22（3）：40-42.

作者簡介：李佳（1997—），女，漢族，重慶人，碩士研究生在讀，研究方向：計算機軟件；吳菲（1997—），男，漢族，重慶人，碩士研究生在讀，研究方向：計算機技術；章毅恒（1997—），男，漢族，安徽懷寧人，碩士研究生在讀，研究方向：計算機軟件。