指数加权平均EWMA：原理、参数、实现与工程避坑指南
2026/10/14 17:55:11
温馨提示：本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片！
1. 项目背景与意义
随着超市经营规模的不断扩大，传统的人工管理方式在商品库存、销售统计、会员管理等方面逐渐暴露出效率低、易出错、数据不透明等问题。开发一套基于 SpringBoot + Vue3 的超市管理系统，能够帮助超市实现商品、库存、订单、会员等核心业务的数字化管理，提升运营效率，降低管理成本。
2. 技术选型
本系统采用前后端分离架构，后端基于 SpringBoot 框架，前端使用 Vue3 生态，具体技术栈如下：
| 层次 | 技术 | 说明 |
|---|---|---|
| 后端框架 | SpringBoot | 提供 RESTful API，负责业务逻辑与数据持久化 |
| 持久层 | MyBatis-Plus | 简化数据库操作，支持分页与条件查询 |
| 数据库 | MySQL | 存储商品、订单、会员等核心业务数据 |
| 前端框架 | Vue3 | 使用 Composition API 构建响应式界面 |
| UI 组件库 | Element Plus | 提供表格、表单、弹窗等常用组件 |
| 构建工具 | Vite | 提供快速的开发与构建体验 |
| 权限认证 | JWT + Spring Security | 实现登录认证与接口鉴权 |
3. 系统功能模块
超市管理系统主要包含以下功能模块：
- 登录与权限管理：支持管理员、收银员、仓管员等角色登录，按角色分配菜单与操作权限。
- 商品管理：实现商品的增删改查、分类管理、上下架以及商品图片上传。
- 库存管理：支持入库、出库、库存盘点、库存预警，实时跟踪商品库存数量。
- 销售管理：收银台支持扫码录入商品、生成订单、结算金额，并自动扣减库存。
- 会员管理：管理会员信息、积分与储值余额，支持会员折扣与积分抵扣。
- 供应商管理：维护供应商档案，记录采购订单与进货价格。
- 统计报表：按日、月维度统计销售额、订单量、热销商品排行等数据。
4. 数据库设计
系统核心数据表包括用户表、商品表、商品分类表、库存表、订单表、订单明细表、会员表、供应商表等。以下为部分关键表结构设计：
4.1 商品表
| 字段名 | 类型 | 说明 |
|---|---|---|
| id | bigint | 主键 |
| name | varchar(100) | 商品名称 |
| category_id | bigint | 所属分类 |
| price | decimal(10,2) | 销售单价 |
| stock | int | 当前库存 |
| status | tinyint | 上下架状态 |
4.2 订单表
| 字段名 | 类型 | 说明 |
|---|---|---|
| id | bigint | 主键 |
| order_no | varchar(32) | 订单编号 |
| member_id | bigint | 会员 ID |
| total_amount | decimal(10,2) | 订单总金额 |
| pay_time | datetime | 支付时间 |
| status | tinyint | 订单状态 |
5. 后端核心实现
后端采用分层架构，包括 Controller、Service、Mapper 三层。以下以商品管理为例，展示核心代码实现。
5.1 商品实体类
@Data @TableName("product") public class Product { @TableId(type = IdType.AUTO) private Long id; private String name; private Long categoryId; private BigDecimal price; private Integer stock; private Integer status; private LocalDateTime createTime; }5.2 商品查询接口
@RestController @RequestMapping("/api/product") public class ProductController { @Autowired private ProductService productService; @GetMapping("/page") public Result<Page<Product>> page(@RequestParam Integer pageNum, @RequestParam Integer pageSize, @RequestParam(required = false) String keyword) { Page<Product> page = productService.queryPage(pageNum, pageSize, keyword); return Result.success(page); } @PostMapping public Result<Void> save(@RequestBody Product product) { productService.saveProduct(product); return Result.success(); } @PutMapping public Result<Void> update(@RequestBody Product product) { productService.updateProduct(product); return Result.success(); } @DeleteMapping("/{id}") public Result<Void> delete(@PathVariable Long id) { productService.deleteProduct(id); return Result.success(); } }5.3 商品服务实现
@Service public class ProductServiceImpl implements ProductService { @Autowired private ProductMapper productMapper; @Override public Page<Product> queryPage(Integer pageNum, Integer pageSize, String keyword) { LambdaQueryWrapper<Product> wrapper = new LambdaQueryWrapper<>(); if (StringUtils.hasText(keyword)) { wrapper.like(Product::getName, keyword); } wrapper.orderByDesc(Product::getCreateTime); return productMapper.selectPage(new Page<>(pageNum, pageSize), wrapper); } @Override public void saveProduct(Product product) { product.setCreateTime(LocalDateTime.now()); productMapper.insert(product); } @Override public void updateProduct(Product product) { productMapper.updateById(product); } @Override public void deleteProduct(Long id) { productMapper.deleteById(id); } }6. 前端核心实现
前端使用 Vue3 + Element Plus 构建，通过 Axios 调用后端接口。以下以商品管理页面为例展示核心代码。
6.1 商品列表页面
<template> <div> <el-card> <el-form :inline="true"> <el-form-item label="商品名称"> <el-input v-model="query.keyword" placeholder="请输入商品名称" /> </el-form-item> <el-form-item> <el-button type="primary" @click="loadData">查询</el-button> <el-button type="success" @click="openDialog">新增商品</el-button> </el-form-item> </el-form> <el-table :data="tableData" border stripe> <el-table-column prop="id" label="ID" width="80" /> <el-table-column prop="name" label="商品名称" /> <el-table-column prop="price" label="单价" /> <el-table-column prop="stock" label="库存" /> <el-table-column label="操作" width="180"> <template #default="scope"> <el-button size="small" @click="editRow(scope.row)">编辑</el-button> <el-button size="small" type="danger" @click="deleteRow(scope.row)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination v-model:current-page="query.pageNum" v-model:page-size="query.pageSize" :total="total" layout="total, prev, pager, next" @current-change="loadData" /> </el-card> </div> </template>6.2 前端脚本逻辑
<script setup> import { ref, reactive, onMounted } from 'vue' import { ElMessage, ElMessageBox } from 'element-plus' import request from '@/utils/request' const tableData = ref([]) const total = ref(0) const query = reactive({ pageNum: 1, pageSize: 10, keyword: '' }) const loadData = async () => { const res = await request.get('/api/product/page', { params: query }) tableData.value = res.data.records total.value = res.data.total } const deleteRow = async (row) => { await ElMessageBox.confirm('确定删除该商品吗？', '提示', { type: 'warning' }) await request.delete(/api/product/${row.id}) ElMessage.success('删除成功') loadData() } onMounted(loadData) </script>7. 系统部署与运行
系统分为后端与前端两部分，分别独立部署运行。后端默认端口为 8080，前端开发服务器端口为 5173，生产环境可通过 Nginx 反向代理将前端请求转发至后端接口。
7.1 后端启动
# 配置 application.yml 中的数据库连接信息 # 执行数据库初始化脚本后启动服务 mvn spring-boot:run7.2 前端启动
npm install npm run dev8. 总结
本文基于 SpringBoot + Vue3 设计并实现了一套超市管理系统，覆盖商品、库存、销售、会员、供应商等核心业务模块。系统采用前后端分离架构，后端提供稳定的 RESTful API，前端基于 Vue3 与 Element Plus 构建了简洁易用的管理界面。后续可在此基础上扩展数据可视化大屏、移动端收银、多门店管理等能力，进一步提升系统的实用性与可扩展性。