基于Spring Boot和Element UI的中小型超市ERP系統(tǒng)的開發(fā)

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

關(guān)鍵詞：超市ERP系統(tǒng)；JavaEE；Vue；Element UI；Spring Boot；Spring；MyBatis

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

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

開放科學(xué)（資源服務(wù)） 標識碼（OSID）

0 引言

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

1 相關(guān)技術(shù)簡介

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

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

3） Spring Boot是由Pivotal團隊提供的全新框架，其設(shè)計目的是簡化基于Spring的企業(yè)級應(yīng)用開發(fā)[3]。

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

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

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

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

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

2 系統(tǒng)功能設(shè)計圖和架構(gòu)圖

根據(jù)中小型超市的實際需求，整個系統(tǒng)主要功能結(jié)構(gòu)如圖1所示，系統(tǒng)架構(gòu)圖如圖2所示。

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

3 系統(tǒng)實現(xiàn)

本系統(tǒng)采用前后端分離開發(fā)模式，前端主要采用Vue+Element UI實現(xiàn)整體頁面布局和數(shù)據(jù)展示。后端采用Spring Boot+Spring+MyBaits框架實現(xiàn)核心業(yè)務(wù)功能，采用Axios實現(xiàn)前后端JSON數(shù)據(jù)交互。

3.1 Vue和Element UI前端實現(xiàn)

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

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

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

lt;el-headergt;

lt;divgt;lt;spangt;超市ERP系統(tǒng)lt;/spangt;lt;/divgt;

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

lt;/el-headergt;

lt;el-containergt;

lt;！--側(cè)邊菜單信息--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;！--主要功能區(qū)域信息--gt;

lt;el-maingt;

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

lt;/el-maingt;

lt;/el-containergt;

lt;/el-containergt;

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

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;

系統(tǒng)主頁面如圖3所示。

3.2 前端與后端的交互實現(xiàn)

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

methods：{

logout（）{

window.sessionStorage.clear（）;

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

}，

async getMenuList（）{//查詢菜單列表數(shù)據(jù)

//封裝axios工具，發(fā)送get請求調(diào)用后臺獲取數(shù)據(jù)

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

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

this.menuList=res.data;

}}

3.3 后端實現(xiàn)

后端主要實現(xiàn)流程為：前端用戶請求→控制層Controller方法接收參數(shù)→調(diào)用Service層相關(guān)業(yè)務(wù)→調(diào)用持久層方法→返回處理結(jié)果→封裝響應(yīng)數(shù)據(jù)→前端用戶展示。后端主要通過封裝R類返回JSON數(shù)據(jù)。以用戶管理為例進行部分核心代碼說明。

控制層部分代碼實現(xiàn)如下：

@RestController //所有方法返回的數(shù)據(jù)直接寫入HTTP響應(yīng)體中，返回的對象數(shù)據(jù)自動序列化為JSON

@CrossOrigin" " //跨域問題

@RequestMapping（\"/user\"）

public class UserController {

@Autowired

private UserService userService;//注入用戶服務(wù)

@PostMapping（\"/login\"）

public Rlt;LoginDTOgt; login（LoginDTO loginDTO）{

System.out.println（loginDTO）;

...

String token = AppJwtUtil.getToken（1l）;

...

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

}

業(yè)務(wù)層部分代碼實現(xiàn)如下所示：

@Service" "http://用戶服務(wù)層代碼示例

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

}

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

@Mapper

public interface UserMapper extends BaseMapperlt;Usergt;{

}

/**

* 通用返回結(jié)果，服務(wù)端響應(yīng)的數(shù)據(jù)最終都會封裝成此對象

*/

@Data

public class Rlt;Tgt; implements Serializable {

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

private String msg; //錯誤信息

private T data; //數(shù)據(jù)

private Map map = new HashMap（）; //動態(tài)數(shù)據(jù)

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 總結(jié)與展望

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

參考文獻：

[1] 鄧衛(wèi)軍，楊梅.Vue.js開發(fā)教程[M].上海：上海交通大學(xué)出版社，2021.

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

[3] 張科.Spring Boot企業(yè)級項目開發(fā)實戰(zhàn)[M].北京：機械工業(yè)出版社，2022.

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

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

[6] 秦鳳梅.MySQL網(wǎng)絡(luò)數(shù)據(jù)庫設(shè)計與開發(fā)[M].3版.北京：電子工業(yè)出版社，2022.

【通聯(lián)編輯：謝媛媛】