屏幕录制 2026-07-08 202313日常生活用品管理系统 — 项目介绍一、项目分析1.1 项目背景日常生活用品品类繁多、库存管理琐碎。传统的手工记录或电子表格管理方式存在数据分散、查询不便、更新不及时等问题。需要一个统一的商品信息管理平台来提升管理效率。1.2 功能需求模块功能说明商品管理支持商品的新增、编辑、删除、查询商品搜索支持按名称关键词模糊搜索、按分类筛选、按价格区间筛选分页展示支持自定义每页显示数量5/10/20/50前后端结合分页商品详情点击商品名称查看完整信息可选择购买数量购物车管理支持加入购物车、修改数量、删除单项、清空、结算二、技术简介2.1 技术栈技术选型后端框架Spring Boot 3.5.16ORM框架MyBatis 3.0.5数据库MySQL 8.0前端HTML5 CSS3 JavaScript ES6构建工具Maven 3.9.16开发语言Java 17开发工具IntelliJ IDEA2.2 系统架构前后端分离的B/S架构。前端为单页面应用SPA通过Ajaxfetch API异步调用后端RESTful API。后端按Controller → Service → Mapper三层结构组织使用MyBatis操作MySQL数据库。2.3 技术亮点MyBatis动态SQL使用where和if标签根据参数有无自动拼接查询条件实现灵活的关键词搜索、分类筛选、价格区间过滤前后端分离JSON格式数据交换前端渲染后端专注业务逻辑可独立开发和部署原生JS单页面一个index.html文件包含全部前端逻辑通过JavaScript控制路由和视图切换无需页面刷新分页组件后端用MySQL的LIMIT COUNT实现高效分页前端页码导航自动处理页码范围页数多时显示省略号三、核心界面3.1 商品列表页表格展示所有商品编号、名称、分类、价格、库存、描述、更新时间每行提供加入一键加购物车、“编辑”、删除按钮商品名称可点击查看详情3.2 筛选栏位于列表上方包含关键词输入框输入后300ms防抖自动搜索分类下拉选择框食品/饮料/日用品/清洁/个人护理/调味品/文具/家电价格区间输入最低价 ~ 最高价3.3 分页控件位于表格下方包含每页条数下拉选择5/10/20/50上一页 / 下一页按钮页码导航当前页前后各2页超过5页自动省略统计信息共 N 条记录第 X/Y 页3.4 商品详情弹窗点击商品名称弹出展示名称、价格、分类、库存、编号、更新时间、描述支持选择数量后加入购物车。3.5 购物车面板点击右上角购物车按钮从右侧滑入功能加减数量、删除单项、清空购物车、显示合计金额、结算。3.6 商品管理表单新增和编辑共用同一个弹窗表单包含商品名称、分类、价格、库存、描述。四、项目结构daily-goods-management/ ├── pom.xml # Maven配置 ├── sql/init.sql # 数据库初始化脚本 ├── src/main/java/org/example/dailygoods/ │ ├── DailyGoodsApplication.java # 启动类 │ ├── config/WebConfig.java # CORS跨域配置 │ ├── controller/ # 控制器层 │ │ ├── GoodsController.java # 商品API含分页条件查询 │ │ └── CartController.java # 购物车API │ ├── mapper/ # 数据访问层 │ │ ├── GoodsMapper.java # 商品Mapper接口 │ │ └── CartMapper.java # 购物车Mapper接口 │ ├── pojo/ # 实体类 │ │ ├── Goods.java, Cart.java, Result.java, PageResult.java │ └── service/ # 业务层 │ ├── GoodsService.java impl/GoodsServiceImpl.java │ └── CartService.java impl/CartServiceImpl.java └── src/main/resources/ ├── application.yml # 数据源配置 ├── mapper/GoodsMapper.xml # SQL映射动态SQL └── static/index.html # 前端页面五、API接口清单方法路径功能GET/api/goods商品列表支持keyword/category/minPrice/maxPrice参数GET/api/goods/{id}按ID查询GET/api/goods/page分页查询支持page/pageSize及筛选参数POST/api/goods新增商品PUT/api/goods修改商品DELETE/api/goods/{id}删除商品GET/api/cart购物车列表POST/api/cart加入购物车PUT/api/cart/{id}修改数量DELETE/api/cart/{id}删除购物车项DELETE/api/cart清空购物车六、运行方式cddaily-goods-management mvn spring-boot:run# 浏览器访问 http://localhost:8080或使用IDEA打开项目直接运行DailyGoodsApplication.java。