简介这是一套基于VueSpringBootMySQL的超市商品管理系统完整项目资料面向计算机相关专业正在做毕业设计的学生以及需要Java项目实战练习的学习者也可直接用作课程设计或期末大作业。系统划分为超市区域、超市货架、商品类型、商品档案等核心模块区分用户网页端与管理后台采用基于角色的访问控制权限可精确到按钮级别并配有简单的图表分析功能。压缩包为zip格式整体约24.18MB内含源码、数据库脚本、功能文档、开题文献外翻及PPT等材料覆盖从开发实现到答辩展示的完整环节。目前已有2604人学习下载下载后无需修改即可直接运行能帮助读者快速理解前后端分离架构、权限控制设计与数据库表结构省去从零搭建的时间适合作为毕设参考或项目实战练手素材。1. 超市商品管理系统从课程设计到能跑通的完整交付物做过课程设计的人都有一个共识最难的从来不是写代码而是把一堆零散的东西拼成一个能演示、能答辩、能交差的完整系统。超市商品管理系统这个题目几乎每年都会出现在各类实践环节的选题清单里原因很简单——业务逻辑清晰、功能边界明确、技术栈覆盖面广。但真正动手做的时候很多人会卡在几个地方前端页面怎么和后端接口对上、数据库表怎么设计才不用返工、功能文档和开题报告到底要写到什么颗粒度。这篇内容面向的是需要完整交付一套超市商品管理系统的开发者技术栈锁定 Vue SpringBoot MySQL。我会把从环境搭建、数据库设计、接口开发、前端联调到文档撰写的全流程拆开讲重点放在那些真正会卡住你的环节。代码部分可以直接抄作业参数部分会说明为什么这样设。如果你正在做类似的管理系统这套思路同样适用。2. 技术选型与环境搭建为什么是 Vue SpringBoot MySQL2.1 选型理由与版本搭配超市商品管理系统本质上是一个典型的 CRUD 密集型应用核心诉求是开发效率高、调试成本低、部署简单。Vue 做前端的原因很直接组件化开发让商品列表、分类管理、库存预警这些模块可以独立维护而且 Vue 的响应式机制在处理表格数据更新时比手动操作 DOM 省心得多。SpringBoot 做后端则是看中它的自动配置和起步依赖一个spring-boot-starter-web就能把 REST 接口跑起来不用像传统 SSM 那样配一堆 XML。MySQL 作为关系型数据库在商品、分类、库存、订单这些实体关系明确的情况下比 NoSQL 更合适。版本搭配上我一般会选 Vue 3 SpringBoot 2.7.x MySQL 8.0 这个组合。Vue 3 的 Composition API 在逻辑复用上比 Options API 更灵活SpringBoot 2.7 是 2.x 的最后一个稳定版本社区资料最全MySQL 8.0 的窗口函数和 CTE 在后续做报表统计时能省不少事。Node.js 建议用 16.x 或 18.x LTSJDK 用 8 或 11 都可以Maven 用 3.8 以上。注意不要盲目追新版本。Vue 3.4 和 SpringBoot 3.x 虽然更新但部分教学场景下的依赖库还没跟上容易出现兼容性问题。2.2 项目骨架搭建与依赖配置后端用 Spring Initializr 生成骨架勾选 Spring Web、MyBatis Plus、MySQL Driver、Lombok 四个依赖。MyBatis Plus 比原生 MyBatis 省去了大量手写 SQL 的工作单表 CRUD 直接用BaseMapper就能搞定。前端用 Vite 创建 Vue 3 项目安装 axios、vue-router、pinia、element-plus 四个核心库。# 后端骨架生成后pom.xml 核心依赖确认 # spring-boot-starter-web: 提供 REST 能力 # mybatis-plus-boot-starter: 简化数据库操作 # mysql-connector-j: MySQL 8.0 驱动 # lombok: 减少 getter/setter 样板代码 # 前端项目初始化 npm create vitelatest supermarket-frontend -- --template vue cd supermarket-frontend npm install axios vue-router pinia element-plus依赖装完后后端在application.yml里配置数据源和 MyBatis Plus 的日志输出前端在vite.config.js里配好代理把/api开头的请求转发到后端端口。这一步不做的话后面联调时跨域问题会反复出现。# application.yml 关键配置 spring: datasource: url: jdbc:mysql://localhost:3306/supermarket?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制台打印 SQL调试用 global-config: db-config: logic-delete-field: deleted # 逻辑删除字段 logic-delete-value: 1 logic-not-delete-value: 0serverTimezone必须设成Asia/Shanghai否则插入时间会差 8 小时。logic-delete-field配好后删除操作自动变成更新deleted字段数据不会真丢后面查历史记录时能救命。3. 数据库设计从商品表到库存流水3.1 核心表结构与字段说明超市商品管理系统的数据库设计有几个关键决策点商品和分类的关系、库存是直接存在商品表还是单独建流水表、价格变动要不要留痕。我的做法是商品表存基础信息和当前库存分类表独立库存变动单独建一张流水表。这样查当前库存快查变动历史也方便。-- 商品分类表 CREATE TABLE category ( id BIGINT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL COMMENT 分类名称, sort_order INT DEFAULT 0 COMMENT 排序权重, deleted TINYINT DEFAULT 0, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 商品表 CREATE TABLE product ( id BIGINT PRIMARY KEY AUTO_INCREMENT, barcode VARCHAR(50) UNIQUE COMMENT 条形码, name VARCHAR(100) NOT NULL COMMENT 商品名称, category_id BIGINT NOT NULL COMMENT 分类ID, price DECIMAL(10,2) NOT NULL COMMENT 售价, cost DECIMAL(10,2) COMMENT 进价, stock INT DEFAULT 0 COMMENT 当前库存, stock_warn INT DEFAULT 10 COMMENT 库存预警值, unit VARCHAR(10) DEFAULT 件 COMMENT 单位, deleted TINYINT DEFAULT 0, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, INDEX idx_category (category_id), INDEX idx_name (name) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 库存流水表 CREATE TABLE stock_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT, product_id BIGINT NOT NULL, change_type TINYINT NOT NULL COMMENT 1入库 2出库 3盘点调整, change_num INT NOT NULL COMMENT 变动数量正数增加负数减少, before_stock INT NOT NULL, after_stock INT NOT NULL, operator VARCHAR(50) COMMENT 操作人, remark VARCHAR(200), create_time DATETIME DEFAULT CURRENT_TIMESTAMP, INDEX idx_product (product_id), INDEX idx_time (create_time) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;price和cost用DECIMAL(10,2)而不是FLOAT因为浮点数在金额计算时会出现精度丢失0.1 0.2 不等于 0.3 这种问题在库存金额汇总时会直接翻车。stock_record表里存了before_stock和after_stock这样对账时不用从头累加直接看最后一条记录就知道当前库存对不对。3.2 初始化数据与索引策略建完表后需要灌入一些基础数据方便开发和演示。分类至少要有饮料、零食、日用品、生鲜四个商品每个分类下放 5 到 10 条库存预警值设成 10 左右这样演示库存预警功能时能触发。INSERT INTO category (name, sort_order) VALUES (饮料, 1), (零食, 2), (日用品, 3), (生鲜, 4); INSERT INTO product (barcode, name, category_id, price, cost, stock, stock_warn, unit) VALUES (6901234567890, 矿泉水 550ml, 1, 2.00, 1.20, 100, 20, 瓶), (6901234567891, 可乐 330ml, 1, 3.00, 1.80, 80, 20, 罐), (6901234567892, 薯片 原味, 2, 6.50, 4.00, 50, 10, 袋), (6901234567893, 抽纸 3层, 3, 12.90, 8.50, 30, 10, 提), (6901234567894, 鸡蛋 500g, 4, 8.80, 6.50, 15, 5, 盒);索引方面product表的barcode加了唯一索引收银台扫码时能快速定位商品。category_id和name各加一个普通索引分类筛选和名称搜索都用得上。stock_record表的product_id和create_time索引是为了查某个商品的库存变动历史时不用全表扫描。提示如果后续要做商品名称模糊搜索LIKE %关键词%走不了索引数据量超过几万条时需要考虑全文索引或者搜索引擎方案。4. 后端接口开发商品 CRUD 与库存扣减逻辑4.1 商品管理接口实现后端接口按 RESTful 风格设计商品模块的核心接口包括分页查询、新增、编辑、删除、库存调整。用 MyBatis Plus 的IPage做分页LambdaQueryWrapper做条件构造代码量比手写 SQL 少很多。RestController RequestMapping(/api/product) public class ProductController { Autowired private ProductService productService; // 分页查询支持按名称和分类筛选 GetMapping(/page) public ResultIPageProduct page( RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String name, RequestParam(required false) Long categoryId) { LambdaQueryWrapperProduct wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(name), Product::getName, name) .eq(categoryId ! null, Product::getCategoryId, categoryId) .orderByDesc(Product::getCreateTime); return Result.success(productService.page(new Page(pageNum, pageSize), wrapper)); } // 新增商品同时记录初始库存流水 PostMapping Transactional(rollbackFor Exception.class) public ResultVoid add(RequestBody Product product) { productService.save(product); if (product.getStock() ! null product.getStock() 0) { stockRecordService.record(product.getId(), 1, product.getStock(), 0, product.getStock(), 系统初始化); } return Result.success(); } }Transactional注解加在新增方法上保证商品插入和库存流水记录要么都成功要么都回滚。Result是统一返回封装包含code、msg、data三个字段前端拦截器根据code判断请求是否成功。4.2 库存扣减与并发处理库存扣减是超市系统里最容易出问题的地方。两个人同时买最后一件商品如果代码写得不严谨库存会变成 -1。我的做法是在 SQL 层面加条件更新而不是先查再改。// 库存扣减使用乐观锁思路更新时检查库存是否充足 Update(UPDATE product SET stock stock - #{num} WHERE id #{productId} AND stock #{num}) int deductStock(Param(productId) Long productId, Param(num) Integer num); // Service 层调用 Transactional(rollbackFor Exception.class) public void sellProduct(Long productId, Integer num, String operator) { Product product productService.getById(productId); if (product null) { throw new BusinessException(商品不存在); } int affected productMapper.deductStock(productId, num); if (affected 0) { throw new BusinessException(库存不足); } // 记录流水 stockRecordService.record(productId, 2, -num, product.getStock(), product.getStock() - num, operator); }deductStock的 SQL 里stock #{num}这个条件很关键它保证了只有库存充足时才会执行更新返回影响行数为 0 就说明库存不够。这种写法比在 Java 里if (stock num)再更新要安全因为数据库层面的判断和更新是原子的。注意如果并发量再高一些比如秒杀场景还需要考虑数据库行锁竞争的问题可以引入 Redis 做预扣减。但超市管理系统的日常场景上面的写法已经够用。5. 前端页面与联调商品列表、库存预警与数据看板5.1 商品列表页与接口对接前端用 Element Plus 的el-table做商品列表el-pagination做分页el-dialog做新增和编辑弹窗。axios 封装一个 request 实例统一处理 token、错误提示和 loading 状态。// request.js 封装 import axios from axios import { ElMessage } from element-plus const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.msg || 请求失败) return Promise.reject(new Error(res.msg)) } return res.data }, error { ElMessage.error(error.message || 网络异常) return Promise.reject(error) } ) export default request拦截器里判断res.code ! 200就弹错误提示并 reject这样业务组件里只需要处理成功逻辑不用每个请求都写一遍错误处理。baseURL设成/api配合 Vite 的代理配置开发时不用关心后端端口。5.2 库存预警与数据看板库存预警的逻辑是查stock stock_warn的商品在首页用红色标签标出来。数据看板用 ECharts 展示分类商品数量占比和近 7 天库存变动趋势数据从后端聚合接口拿。// 库存预警查询 export function getWarnProducts() { return request({ url: /product/warn, method: get }) } // 后端对应接口 GetMapping(/warn) public ResultListProduct warnList() { LambdaQueryWrapperProduct wrapper new LambdaQueryWrapper(); wrapper.apply(stock stock_warn) .orderByAsc(Product::getStock); return Result.success(productService.list(wrapper)); }apply(stock stock_warn)直接写 SQL 片段因为 MyBatis Plus 的 Lambda 写法不支持字段之间的比较。这个接口返回的数据在前端用el-tag的typedanger渲染运营人员一眼就能看到哪些商品需要补货。6. 避坑与排查那些让你加班到凌晨的问题6.1 跨域问题反复出现现象前端请求后端接口时浏览器控制台报Access-Control-Allow-Origin错误接口明明能通但数据拿不到。原因开发环境下前端跑在 5173 端口后端跑在 8080 端口浏览器同源策略拦截了响应。解决后端加CrossOrigin注解或者全局配置 CORS前端在vite.config.js里配代理。两个都做最稳妥生产环境用 Nginx 反向代理时再把代理去掉。// vite.config.js 代理配置 export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })6.2 时间字段差 8 小时现象新增商品后数据库里的create_time比实际时间少 8 小时。原因JDBC 连接串没设时区或者设成了 UTC。解决连接串加serverTimezoneAsia/Shanghai同时检查 MySQL 全局时区设置。如果用的是 Docker 起的 MySQL容器时区也要改。6.3 逻辑删除后唯一索引冲突现象删除一个条形码为6901234567890的商品后再新增同样条形码的商品报唯一键冲突。原因逻辑删除只是把deleted改成 1数据还在表里唯一索引依然生效。解决把唯一索引改成联合索引(barcode, deleted)或者删除时把条形码改成一个带时间戳的值。我一般用前者改索引更干净。6.4 分页查询总数不对现象前端分页组件显示总共 100 条但翻到第 3 页后面全是空的。原因MyBatis Plus 的分页插件没配或者配了但没生效导致LIMIT没拼上。解决确认配置类里加了MybatisPlusInterceptor并注册了PaginationInnerInterceptor同时检查pageSize有没有被前端传成 0。Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }6.5 库存流水与当前库存对不上现象盘点时发现product.stock和stock_record最后一条的after_stock不一致。原因某次库存调整只更新了product表忘了写流水或者事务回滚了一半。解决所有库存变动必须走同一个 Service 方法方法上加Transactional。另外写一个对账接口定期跑一遍全量比对发现不一致时以流水为准回写商品表。7. 文档撰写与答辩准备功能文档、开题报告和 PPT 的落地技巧功能文档不是把代码注释复制一遍而是要写清楚每个模块的输入、处理逻辑和输出。我一般按「模块概述 → 接口清单 → 核心流程 → 异常处理」四段式来写。接口清单用表格列清楚 URL、方法、参数、返回值核心流程用文字描述关键步骤异常处理列出可能出现的错误码和提示信息。开题报告的重点在选题背景和技术方案背景部分说清楚为什么超市需要这个系统技术方案部分把 Vue SpringBoot MySQL 的分工写明白不要堆砌技术名词。PPT 控制在 12 到 15 页结构是封面、选题背景、技术栈、系统架构图、数据库设计、核心功能演示、难点与解决、总结与展望。演示环节提前录好屏现场只做讲解避免网络或环境问题导致翻车。答辩时老师最常问的三个问题是库存并发怎么处理、数据库为什么这样设计、系统还有什么不足。前两个前面已经讲清楚了第三个可以坦诚说当前是单机部署后续可以引入 Redis 缓存和消息队列做异步处理。提示文档和 PPT 里的截图要统一分辨率代码截图放大到能看清关键行不要放整屏代码。这套方案从数据库建表到前端联调再到文档撰写覆盖了超市商品管理系统交付的完整链路。我自己的习惯是先把数据库和接口跑通再做前端页面最后补文档这样每一步都有可验证的产出不会写到一半发现底层设计有问题要推倒重来。希望帮到你。本文还有配套的精品资源点击获取
简介这是一套基于VueSpringBootMySQL的超市商品管理系统完整项目资料面向计算机相关专业正在做毕业设计的学生以及需要Java项目实战练习的学习者也可直接用作课程设计或期末大作业。系统划分为超市区域、超市货架、商品类型、商品档案等核心模块区分用户网页端与管理后台采用基于角色的访问控制权限可精确到按钮级别并配有简单的图表分析功能。压缩包为zip格式整体约24.18MB内含源码、数据库脚本、功能文档、开题文献外翻及PPT等材料覆盖从开发实现到答辩展示的完整环节。目前已有2604人学习下载下载后无需修改即可直接运行能帮助读者快速理解前后端分离架构、权限控制设计与数据库表结构省去从零搭建的时间适合作为毕设参考或项目实战练手素材。1. 超市商品管理系统从课程设计到能跑通的完整交付物做过课程设计的人都有一个共识最难的从来不是写代码而是把一堆零散的东西拼成一个能演示、能答辩、能交差的完整系统。超市商品管理系统这个题目几乎每年都会出现在各类实践环节的选题清单里原因很简单——业务逻辑清晰、功能边界明确、技术栈覆盖面广。但真正动手做的时候很多人会卡在几个地方前端页面怎么和后端接口对上、数据库表怎么设计才不用返工、功能文档和开题报告到底要写到什么颗粒度。这篇内容面向的是需要完整交付一套超市商品管理系统的开发者技术栈锁定 Vue SpringBoot MySQL。我会把从环境搭建、数据库设计、接口开发、前端联调到文档撰写的全流程拆开讲重点放在那些真正会卡住你的环节。代码部分可以直接抄作业参数部分会说明为什么这样设。如果你正在做类似的管理系统这套思路同样适用。2. 技术选型与环境搭建为什么是 Vue SpringBoot MySQL2.1 选型理由与版本搭配超市商品管理系统本质上是一个典型的 CRUD 密集型应用核心诉求是开发效率高、调试成本低、部署简单。Vue 做前端的原因很直接组件化开发让商品列表、分类管理、库存预警这些模块可以独立维护而且 Vue 的响应式机制在处理表格数据更新时比手动操作 DOM 省心得多。SpringBoot 做后端则是看中它的自动配置和起步依赖一个spring-boot-starter-web就能把 REST 接口跑起来不用像传统 SSM 那样配一堆 XML。MySQL 作为关系型数据库在商品、分类、库存、订单这些实体关系明确的情况下比 NoSQL 更合适。版本搭配上我一般会选 Vue 3 SpringBoot 2.7.x MySQL 8.0 这个组合。Vue 3 的 Composition API 在逻辑复用上比 Options API 更灵活SpringBoot 2.7 是 2.x 的最后一个稳定版本社区资料最全MySQL 8.0 的窗口函数和 CTE 在后续做报表统计时能省不少事。Node.js 建议用 16.x 或 18.x LTSJDK 用 8 或 11 都可以Maven 用 3.8 以上。注意不要盲目追新版本。Vue 3.4 和 SpringBoot 3.x 虽然更新但部分教学场景下的依赖库还没跟上容易出现兼容性问题。2.2 项目骨架搭建与依赖配置后端用 Spring Initializr 生成骨架勾选 Spring Web、MyBatis Plus、MySQL Driver、Lombok 四个依赖。MyBatis Plus 比原生 MyBatis 省去了大量手写 SQL 的工作单表 CRUD 直接用BaseMapper就能搞定。前端用 Vite 创建 Vue 3 项目安装 axios、vue-router、pinia、element-plus 四个核心库。# 后端骨架生成后pom.xml 核心依赖确认 # spring-boot-starter-web: 提供 REST 能力 # mybatis-plus-boot-starter: 简化数据库操作 # mysql-connector-j: MySQL 8.0 驱动 # lombok: 减少 getter/setter 样板代码 # 前端项目初始化 npm create vitelatest supermarket-frontend -- --template vue cd supermarket-frontend npm install axios vue-router pinia element-plus依赖装完后后端在application.yml里配置数据源和 MyBatis Plus 的日志输出前端在vite.config.js里配好代理把/api开头的请求转发到后端端口。这一步不做的话后面联调时跨域问题会反复出现。# application.yml 关键配置 spring: datasource: url: jdbc:mysql://localhost:3306/supermarket?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_password driver-class-name: com.mysql.cj.jdbc.Driver mybatis-plus: configuration: log-impl: org.apache.ibatis.logging.stdout.StdOutImpl # 控制台打印 SQL调试用 global-config: db-config: logic-delete-field: deleted # 逻辑删除字段 logic-delete-value: 1 logic-not-delete-value: 0serverTimezone必须设成Asia/Shanghai否则插入时间会差 8 小时。logic-delete-field配好后删除操作自动变成更新deleted字段数据不会真丢后面查历史记录时能救命。3. 数据库设计从商品表到库存流水3.1 核心表结构与字段说明超市商品管理系统的数据库设计有几个关键决策点商品和分类的关系、库存是直接存在商品表还是单独建流水表、价格变动要不要留痕。我的做法是商品表存基础信息和当前库存分类表独立库存变动单独建一张流水表。这样查当前库存快查变动历史也方便。-- 商品分类表 CREATE TABLE category ( id BIGINT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL COMMENT 分类名称, sort_order INT DEFAULT 0 COMMENT 排序权重, deleted TINYINT DEFAULT 0, create_time DATETIME DEFAULT CURRENT_TIMESTAMP ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 商品表 CREATE TABLE product ( id BIGINT PRIMARY KEY AUTO_INCREMENT, barcode VARCHAR(50) UNIQUE COMMENT 条形码, name VARCHAR(100) NOT NULL COMMENT 商品名称, category_id BIGINT NOT NULL COMMENT 分类ID, price DECIMAL(10,2) NOT NULL COMMENT 售价, cost DECIMAL(10,2) COMMENT 进价, stock INT DEFAULT 0 COMMENT 当前库存, stock_warn INT DEFAULT 10 COMMENT 库存预警值, unit VARCHAR(10) DEFAULT 件 COMMENT 单位, deleted TINYINT DEFAULT 0, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, INDEX idx_category (category_id), INDEX idx_name (name) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4; -- 库存流水表 CREATE TABLE stock_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT, product_id BIGINT NOT NULL, change_type TINYINT NOT NULL COMMENT 1入库 2出库 3盘点调整, change_num INT NOT NULL COMMENT 变动数量正数增加负数减少, before_stock INT NOT NULL, after_stock INT NOT NULL, operator VARCHAR(50) COMMENT 操作人, remark VARCHAR(200), create_time DATETIME DEFAULT CURRENT_TIMESTAMP, INDEX idx_product (product_id), INDEX idx_time (create_time) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;price和cost用DECIMAL(10,2)而不是FLOAT因为浮点数在金额计算时会出现精度丢失0.1 0.2 不等于 0.3 这种问题在库存金额汇总时会直接翻车。stock_record表里存了before_stock和after_stock这样对账时不用从头累加直接看最后一条记录就知道当前库存对不对。3.2 初始化数据与索引策略建完表后需要灌入一些基础数据方便开发和演示。分类至少要有饮料、零食、日用品、生鲜四个商品每个分类下放 5 到 10 条库存预警值设成 10 左右这样演示库存预警功能时能触发。INSERT INTO category (name, sort_order) VALUES (饮料, 1), (零食, 2), (日用品, 3), (生鲜, 4); INSERT INTO product (barcode, name, category_id, price, cost, stock, stock_warn, unit) VALUES (6901234567890, 矿泉水 550ml, 1, 2.00, 1.20, 100, 20, 瓶), (6901234567891, 可乐 330ml, 1, 3.00, 1.80, 80, 20, 罐), (6901234567892, 薯片 原味, 2, 6.50, 4.00, 50, 10, 袋), (6901234567893, 抽纸 3层, 3, 12.90, 8.50, 30, 10, 提), (6901234567894, 鸡蛋 500g, 4, 8.80, 6.50, 15, 5, 盒);索引方面product表的barcode加了唯一索引收银台扫码时能快速定位商品。category_id和name各加一个普通索引分类筛选和名称搜索都用得上。stock_record表的product_id和create_time索引是为了查某个商品的库存变动历史时不用全表扫描。提示如果后续要做商品名称模糊搜索LIKE %关键词%走不了索引数据量超过几万条时需要考虑全文索引或者搜索引擎方案。4. 后端接口开发商品 CRUD 与库存扣减逻辑4.1 商品管理接口实现后端接口按 RESTful 风格设计商品模块的核心接口包括分页查询、新增、编辑、删除、库存调整。用 MyBatis Plus 的IPage做分页LambdaQueryWrapper做条件构造代码量比手写 SQL 少很多。RestController RequestMapping(/api/product) public class ProductController { Autowired private ProductService productService; // 分页查询支持按名称和分类筛选 GetMapping(/page) public ResultIPageProduct page( RequestParam(defaultValue 1) Integer pageNum, RequestParam(defaultValue 10) Integer pageSize, RequestParam(required false) String name, RequestParam(required false) Long categoryId) { LambdaQueryWrapperProduct wrapper new LambdaQueryWrapper(); wrapper.like(StringUtils.hasText(name), Product::getName, name) .eq(categoryId ! null, Product::getCategoryId, categoryId) .orderByDesc(Product::getCreateTime); return Result.success(productService.page(new Page(pageNum, pageSize), wrapper)); } // 新增商品同时记录初始库存流水 PostMapping Transactional(rollbackFor Exception.class) public ResultVoid add(RequestBody Product product) { productService.save(product); if (product.getStock() ! null product.getStock() 0) { stockRecordService.record(product.getId(), 1, product.getStock(), 0, product.getStock(), 系统初始化); } return Result.success(); } }Transactional注解加在新增方法上保证商品插入和库存流水记录要么都成功要么都回滚。Result是统一返回封装包含code、msg、data三个字段前端拦截器根据code判断请求是否成功。4.2 库存扣减与并发处理库存扣减是超市系统里最容易出问题的地方。两个人同时买最后一件商品如果代码写得不严谨库存会变成 -1。我的做法是在 SQL 层面加条件更新而不是先查再改。// 库存扣减使用乐观锁思路更新时检查库存是否充足 Update(UPDATE product SET stock stock - #{num} WHERE id #{productId} AND stock #{num}) int deductStock(Param(productId) Long productId, Param(num) Integer num); // Service 层调用 Transactional(rollbackFor Exception.class) public void sellProduct(Long productId, Integer num, String operator) { Product product productService.getById(productId); if (product null) { throw new BusinessException(商品不存在); } int affected productMapper.deductStock(productId, num); if (affected 0) { throw new BusinessException(库存不足); } // 记录流水 stockRecordService.record(productId, 2, -num, product.getStock(), product.getStock() - num, operator); }deductStock的 SQL 里stock #{num}这个条件很关键它保证了只有库存充足时才会执行更新返回影响行数为 0 就说明库存不够。这种写法比在 Java 里if (stock num)再更新要安全因为数据库层面的判断和更新是原子的。注意如果并发量再高一些比如秒杀场景还需要考虑数据库行锁竞争的问题可以引入 Redis 做预扣减。但超市管理系统的日常场景上面的写法已经够用。5. 前端页面与联调商品列表、库存预警与数据看板5.1 商品列表页与接口对接前端用 Element Plus 的el-table做商品列表el-pagination做分页el-dialog做新增和编辑弹窗。axios 封装一个 request 实例统一处理 token、错误提示和 loading 状态。// request.js 封装 import axios from axios import { ElMessage } from element-plus const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.msg || 请求失败) return Promise.reject(new Error(res.msg)) } return res.data }, error { ElMessage.error(error.message || 网络异常) return Promise.reject(error) } ) export default request拦截器里判断res.code ! 200就弹错误提示并 reject这样业务组件里只需要处理成功逻辑不用每个请求都写一遍错误处理。baseURL设成/api配合 Vite 的代理配置开发时不用关心后端端口。5.2 库存预警与数据看板库存预警的逻辑是查stock stock_warn的商品在首页用红色标签标出来。数据看板用 ECharts 展示分类商品数量占比和近 7 天库存变动趋势数据从后端聚合接口拿。// 库存预警查询 export function getWarnProducts() { return request({ url: /product/warn, method: get }) } // 后端对应接口 GetMapping(/warn) public ResultListProduct warnList() { LambdaQueryWrapperProduct wrapper new LambdaQueryWrapper(); wrapper.apply(stock stock_warn) .orderByAsc(Product::getStock); return Result.success(productService.list(wrapper)); }apply(stock stock_warn)直接写 SQL 片段因为 MyBatis Plus 的 Lambda 写法不支持字段之间的比较。这个接口返回的数据在前端用el-tag的typedanger渲染运营人员一眼就能看到哪些商品需要补货。6. 避坑与排查那些让你加班到凌晨的问题6.1 跨域问题反复出现现象前端请求后端接口时浏览器控制台报Access-Control-Allow-Origin错误接口明明能通但数据拿不到。原因开发环境下前端跑在 5173 端口后端跑在 8080 端口浏览器同源策略拦截了响应。解决后端加CrossOrigin注解或者全局配置 CORS前端在vite.config.js里配代理。两个都做最稳妥生产环境用 Nginx 反向代理时再把代理去掉。// vite.config.js 代理配置 export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })6.2 时间字段差 8 小时现象新增商品后数据库里的create_time比实际时间少 8 小时。原因JDBC 连接串没设时区或者设成了 UTC。解决连接串加serverTimezoneAsia/Shanghai同时检查 MySQL 全局时区设置。如果用的是 Docker 起的 MySQL容器时区也要改。6.3 逻辑删除后唯一索引冲突现象删除一个条形码为6901234567890的商品后再新增同样条形码的商品报唯一键冲突。原因逻辑删除只是把deleted改成 1数据还在表里唯一索引依然生效。解决把唯一索引改成联合索引(barcode, deleted)或者删除时把条形码改成一个带时间戳的值。我一般用前者改索引更干净。6.4 分页查询总数不对现象前端分页组件显示总共 100 条但翻到第 3 页后面全是空的。原因MyBatis Plus 的分页插件没配或者配了但没生效导致LIMIT没拼上。解决确认配置类里加了MybatisPlusInterceptor并注册了PaginationInnerInterceptor同时检查pageSize有没有被前端传成 0。Configuration public class MybatisPlusConfig { Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }6.5 库存流水与当前库存对不上现象盘点时发现product.stock和stock_record最后一条的after_stock不一致。原因某次库存调整只更新了product表忘了写流水或者事务回滚了一半。解决所有库存变动必须走同一个 Service 方法方法上加Transactional。另外写一个对账接口定期跑一遍全量比对发现不一致时以流水为准回写商品表。7. 文档撰写与答辩准备功能文档、开题报告和 PPT 的落地技巧功能文档不是把代码注释复制一遍而是要写清楚每个模块的输入、处理逻辑和输出。我一般按「模块概述 → 接口清单 → 核心流程 → 异常处理」四段式来写。接口清单用表格列清楚 URL、方法、参数、返回值核心流程用文字描述关键步骤异常处理列出可能出现的错误码和提示信息。开题报告的重点在选题背景和技术方案背景部分说清楚为什么超市需要这个系统技术方案部分把 Vue SpringBoot MySQL 的分工写明白不要堆砌技术名词。PPT 控制在 12 到 15 页结构是封面、选题背景、技术栈、系统架构图、数据库设计、核心功能演示、难点与解决、总结与展望。演示环节提前录好屏现场只做讲解避免网络或环境问题导致翻车。答辩时老师最常问的三个问题是库存并发怎么处理、数据库为什么这样设计、系统还有什么不足。前两个前面已经讲清楚了第三个可以坦诚说当前是单机部署后续可以引入 Redis 缓存和消息队列做异步处理。提示文档和 PPT 里的截图要统一分辨率代码截图放大到能看清关键行不要放整屏代码。这套方案从数据库建表到前端联调再到文档撰写覆盖了超市商品管理系统交付的完整链路。我自己的习惯是先把数据库和接口跑通再做前端页面最后补文档这样每一步都有可验证的产出不会写到一半发现底层设计有问题要推倒重来。希望帮到你。本文还有配套的精品资源点击获取
