基于Spring Boot和Element UI的中小型超市ERP系統的開發

摘要：文章針對中小型超市傳統管理模式中存在的信息滯后和系統適配性不足，設計并開發了一個基于前后端分離架構的超市ERP系統，旨在提高超市運營效率和降低運營成本。系統前端主要采用Vue.js和Element UI框架，后端采用Spring Boot、Spring和MyBatis框架，并結合MySQL數據庫和Redis緩存，提升了系統性能和開發效率。系統實現了用戶管理、訂單管理、供應商管理、采購管理、庫存管理和銷售訂單管理等核心功能，有效提升了超市的整體管理效率。

關鍵詞：超市ERP系統；JavaEE；Vue；Element UI；Spring Boot；Spring；MyBatis

中圖分類號：TP311" " " 文獻標識碼：A

文章編號：1009-3044（2025）16-0048-03

開放科學（資源服務） 標識碼（OSID）

0 引言

目前，大多數中小型超市普遍依賴手工記錄商品信息、庫存及訂單、供貨商數據，導致信息更新滯后，商品缺貨率高達18%～22%?，F有ERP系統多采用單體C/S架構，功能冗余且擴展性差，難以適應中小型超市靈活的業務調整需求。??超市ERP是一款企業資源規劃系統，它主要服務于中小型超市行業，可以幫助中小型超市整合信息，提升內部管理效率。通過超市ERP系統，中小超市可以將用戶、訂單、供貨商、采購、庫存、銷售訂單等管理功能進行統一管理。系統基于B/S架構，前后端分離模式，采用Element UI+Spring Boot 3.2.5+Spring 6.1+MyBatis 3.5框架，結合MySQL 8.0數據庫和Redis緩存數據庫，實現了高效的開發和管理。

1 相關技術簡介

1） Vue是一套用于構建用戶界面的漸進式JavaScript框架，基于MVVM框架[1]。

2） Element UI是國內餓了么開發的一套前端UI框架，提供了豐富的組件，界面簡潔，深受國內開發者喜愛[2]。

3） Spring Boot是由Pivotal團隊提供的全新框架，其設計目的是簡化基于Spring的企業級應用開發[3]。

4） Spring是一個分層的、面向切面的Java應用程序一站式輕量框架，有兩個核心IoC和AOP[4]。

5） MyBatis是一款非常優秀的持久層框架，可以支持定制化SQL、存儲過程和高級映射等高級特性[5]。

6） MyBatis Plus是MyBatis最佳搭檔，只做增強不做改變，為簡化開發、提高效率而生。

7） 前后端分離是將一個單體前端應用和后端應用以JSON格式進行數據交互。前端通過Ajax請求來訪問后端的數據接口，將數據展示在視圖中。

8） ?C/S架構是須安裝專用客戶端的客戶端—服務器模式，而B/S架構是僅需瀏覽器即可訪問的瀏覽器—服務器模式。?

2 系統功能設計圖和架構圖

根據中小型超市的實際需求，整個系統主要功能結構如圖1所示，系統架構圖如圖2所示。

該中小型超市ERP系統基于B/S架構，使用前后端分離開發模式，提高系統的擴展性和可維護性。前端主要采用Element UI框架負責頁面展示和數據收集，后端采用MVC設計模式，基于Spring Boot 3.2.5+Spring 6.1+MyBatis 3.5框架，負責業務邏輯的處理。目前系統采用HTTP協議通信模式、Axios請求，以及一些常用的API方法組件，后臺控制層Controller從前端發送的HTTP中獲取數據信息，控制層注入業務服務Service層，并分發給不同的服務層，調用MyBatis數據庫底層執行一系列SQL操作，最終將結果以JSON格式返回給客戶端。

3 系統實現

本系統采用前后端分離開發模式，前端主要采用Vue+Element UI實現整體頁面布局和數據展示。后端采用Spring Boot+Spring+MyBaits框架實現核心業務功能，采用Axios實現前后端JSON數據交互。

3.1 Vue和Element UI前端實現

前端主要采用Vue和Element UI技術布局頁面，后臺主要采用Element UI的Container組件容器整體布局。整個布局分為頂欄容器（el-header） 、側邊欄容器（el-aside） 、主要區域容器（el-main） 、底欄容器（el-footer） 四個區域。其中，頂欄容器展示標題、個人基本信息和退出等信息，側邊欄容器放置系統功能菜單，主要區域容器存放詳細列表信息和操作管理功能，包括添加、修改、刪除等通用功能，此區域為核心功能區域，底欄容器主要放置超市聯系信息等。主頁部分主要代碼如下：

lt;el-container class=\"homeContainer\"gt;

lt;！--頂部信息--gt;

lt;el-headergt;

lt;divgt;lt;spangt;超市ERP系統lt;/spangt;lt;/divgt;

lt;el-button type=\"info\" @click=\"logout\"gt;退出lt;/el-buttongt;

lt;/el-headergt;

lt;el-containergt;

lt;！--側邊菜單信息--gt;

lt;el-asidegt;

lt;el-menu" text-color=\"#fff\" active-text-color=\"purple\" routergt;

lt;el-submenu ：index=\"item.id\" v-for=\"item in menuList\" ：key=\"item.id\"gt;

lt;template slot=\"title\"gt;

lt;i class=\"el-icon-location\"gt;lt;/igt;

lt;spangt;{{ item.authName }}lt;/spangt;

lt;/templategt;

lt;el-menu-item ：index=\"s.path\" v-for=\"s in item.children\" ：key=\"s.id\"gt;

lt;template slot=\"title\"gt;

lt;i class=\"el-icon-menu\"gt;lt;/igt;

lt;spangt;{{ s.authName }}lt;/spangt;

lt;/templategt;

lt;/el-menu-itemgt;

lt;/el-submenugt;

lt;/el-menugt;

lt;/el-asidegt;

lt;！--主要功能區域信息--gt;

lt;el-maingt;

lt;router-viewgt;lt;/router-viewgt;

lt;/el-maingt;

lt;/el-containergt;

lt;/el-containergt;

商品分類管理列表采用Element UI樹形表格組件tree-table實現，核心代碼如下所示：

lt;divgt;

lt;！--分級展示商品分類列表--gt;

lt;tree-table ：data=\"catelist\" ：columns=\"columns\"gt;

lt;template slot=\"isok\" slot-scope=\"scope\"gt;

lt;i class=\"el-icon-success\" v-if=\"scope.row.isvalid===1\"gt;lt;/igt;

lt;i class=\"el-icon-error\" v-elsegt;lt;/igt;

lt;/templategt;

lt;template slot=\"order\" slot-scope=\"scope\"gt;

lt;el-tag size=\"mini\" v-if=\"scope.row.level==1\"gt;一級lt;/el-taggt;

lt;el-tag size=\"mini\" type=\"success\" v-else-if=\"scope.row.level==2\"gt;二級lt;/el-taggt;

lt;el-tag size=\"mini\" type=\"warning\" v-elsegt;三級lt;/el-taggt;

lt;/templategt;

lt;template slot=\"opt\" gt;

lt;el-button type=\"primary\" icon=\"el-icon-edit\" size=\"mini\"gt;修改lt;/el-buttongt;

lt;el-button type=\"danger\" icon=\"el-icon-delete\" size=\"mini\"gt;刪除lt;/el-buttongt;

lt;/templategt;

lt;/tree-tablegt;

lt;/divgt;

系統主頁面如圖3所示。

3.2 前端與后端的交互實現

前后端交互主要涉及API設計、請求發送和響應處理等。Spring Boot通過RESTful API向前端提供服務。Vue.js使用Axios發送HTTP請求。當前后端部署在不同的域名或端口時，會遇到跨域問題。Spring Boot通過配置CORS（跨源資源共享） 解決該問題。前端調用后臺接口部分代碼：

methods：{

logout（）{

window.sessionStorage.clear（）;

this.$router.push（\"/login\"）;

}，

async getMenuList（）{//查詢菜單列表數據

//封裝axios工具，發送get請求調用后臺獲取數據

const {data：res} =await this.$http.get（\"http：//localhost：8088/menu/getMenuList\"）;

if（res.code==0） return this.$message.error（\"獲取數據失敗\"）;

this.menuList=res.data;

}}

3.3 后端實現

后端主要實現流程為：前端用戶請求→控制層Controller方法接收參數→調用Service層相關業務→調用持久層方法→返回處理結果→封裝響應數據→前端用戶展示。后端主要通過封裝R類返回JSON數據。以用戶管理為例進行部分核心代碼說明。

控制層部分代碼實現如下：

@RestController //所有方法返回的數據直接寫入HTTP響應體中，返回的對象數據自動序列化為JSON

@CrossOrigin" " //跨域問題

@RequestMapping（\"/user\"）

public class UserController {

@Autowired

private UserService userService;//注入用戶服務

@PostMapping（\"/login\"）

public Rlt;LoginDTOgt; login（LoginDTO loginDTO）{

System.out.println（loginDTO）;

...

String token = AppJwtUtil.getToken（1l）;

...

return" R.success（loginDTO）.add（\"token\"， token）;

}

業務層部分代碼實現如下所示：

@Service" "http://用戶服務層代碼示例

public class UserServiceImpl extends ServiceImpllt;UserMapper，Usergt; implements UserService{

}

持久層部分為加快開發效率，采用MyBatis Plus輔助實現，部分代碼實現如下所示：

@Mapper

public interface UserMapper extends BaseMapperlt;Usergt;{

}

/**

* 通用返回結果，服務端響應的數據最終都會封裝成此對象

*/

@Data

public class Rlt;Tgt; implements Serializable {

private Integer code; //編碼：1成功，0和其他數字為失敗

private String msg; //錯誤信息

private T data; //數據

private Map map = new HashMap（）; //動態數據

public static lt;Tgt; Rlt;Tgt; success（T object） {//成功返回

Rlt;Tgt; r = new Rlt;Tgt;（）;

r.data = object;

r.code = 1;

return r;

}

public static lt;Tgt; Rlt;Tgt; error（String msg） {//失敗返回

R r = new R（）;

r.msg = msg;

r.code = 0;

return r;

}}

4 總結與展望

本系統采用前后端分離模式開發，使用IntelliJ IDEA和Visual Studio Code作為開發工具，MySQL作為數據庫[6]，Redis作為緩存數據庫。系統成功實現了用戶管理、權限管理、商品管理、供應商管理、訂單管理、入庫出庫管理、盤點管理、統計報表等核心功能，有效提高了超市的管理效率和用戶體驗。系統開發過程中注重代碼規范和模塊化設計，提升了開發效率和系統的可維護性。

參考文獻：

[1] 鄧衛軍，楊梅.Vue.js開發教程[M].上海：上海交通大學出版社，2021.

[2] 徐麗健.Spring Boot+Spring Cloud+Vue+Element項目實戰[M].北京：清華大學出版社，2021.

[3] 張科.Spring Boot企業級項目開發實戰[M].北京：機械工業出版社，2022.

[4] 唐金鵬，韋祥.Java EE框架程序設計[M].上海：上海交通大學出版社，2024.

[5] 易哥.通用源碼閱讀指導書MyBatis源碼詳解[M].北京：電子工業出版社，2022.

[6] 秦鳳梅.MySQL網絡數據庫設計與開發[M].3版.北京：電子工業出版社，2022.

【通聯編輯：謝媛媛】