web应用技术-课程设计

📅 2026/7/9 2:33:22 👁️ 阅读次数 📝 编程学习
web应用技术-课程设计

屏幕录制 2026-07-08 202313

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


一、项目分析

1.1 项目背景

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

1.2 功能需求

模块功能说明
商品管理支持商品的新增、编辑、删除、查询
商品搜索支持按名称关键词模糊搜索、按分类筛选、按价格区间筛选
分页展示支持自定义每页显示数量(5/10/20/50),前后端结合分页
商品详情点击商品名称查看完整信息,可选择购买数量
购物车管理支持加入购物车、修改数量、删除单项、清空、结算

二、技术简介

2.1 技术栈

技术选型
后端框架Spring Boot 3.5.16
ORM框架MyBatis 3.0.5
数据库MySQL 8.0
前端HTML5 + CSS3 + JavaScript ES6
构建工具Maven 3.9.16
开发语言Java 17
开发工具IntelliJ IDEA

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接口清单

方法路径功能
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