web应用技术-课程设计

日常生活用品管理系统 — 项目介绍

一、项目分析

1.1 项目背景

日常生活用品品类繁多、库存管理琐碎。传统的手工记录或电子表格管理方式存在数据分散、查询不便、更新不及时等问题。需要一个统一的商品信息管理平台来提升管理效率。

1.2 功能需求

二、技术简介

2.1 技术栈

2.2 系统架构

前后端分离的B/S架构。前端为单页面应用（SPA），通过Ajax（fetch 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接口清单

六、运行方式

cddaily-goods-management mvn spring-boot:run# 浏览器访问 http://localhost:8080

或使用IDEA打开项目，直接运行DailyGoodsApplication.java。