【Uni-App+SSM 宠物项目实战】Day15：购物车添加

在逃牛马

于 2025-09-16 13:29:07 发布

阅读量551

点赞数 20

CC 4.0 BY-SA版权

分类专栏：宠物项目实战文章标签： uni-app 宠物微信小程序 java

本文链接：https://blog.csdn.net/qq_39499883/article/details/151754604

大家好！今天是学习路线的第15天，我们正式进入订单与购物车核心模块。昨天完成了商家服务列表的分页加载，今天聚焦“购物车添加”功能——这是连接“商品浏览”与“订单提交”的关键环节，用户可将宠物用品（如粮食、玩具）加入购物车，后续统一结算。

为什么学这个？ 购物车功能看似简单，实则包含“数据唯一性校验”“用户身份关联”“前后端交互反馈”等核心逻辑。通过本次实战，你将掌握：MyBatis-Plus条件查询判断重复、JWT Token验证用户身份、Uni-App弹窗组件的灵活运用，这些都是电商类项目的必备技能。即使是零基础，也能通过“分步代码+详细注释”轻松上手！

本日目标：实现“商品详情页→添加购物车”全流程，包括后端重复商品检测（已存在则更新数量）、用户身份验证，以及前端弹窗确认、操作反馈等交互，最终达到“添加成功有提示、重复添加能增量、未登录不让加”的实战效果。

一、前置准备

在开始编码前，请确认以下环境与数据已就绪，避免开发中卡壳：

项目	检查内容	注意事项
数据库表结构	确保`cart`（购物车表）已创建，字段需包含： `id`（主键）、`user_id`（关联用户ID，Long类型）、`goods_id`（关联商品ID，Long类型）、`quantity`（商品数量，INT，默认1）、`create_time`（创建时间，DATETIME，默认当前时间）、`update_time`（更新时间，DATETIME，自动更新）	若表缺失，执行以下建表SQL： `sqlCREATE TABLE cart (id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL COMMENT '用户ID', goods_id BIGINT NOT NULL COMMENT '商品ID', quantity INT DEFAULT 1 COMMENT '商品数量', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, UNIQUE KEY uk_user_goods (user_id, goods_id) COMMENT '用户-商品唯一索引，防止重复添加');`
后端依赖与配置	1. `pom.xml`已引入JWT（Day10登录用）、MyBatis-Plus（3.5.x版本）、Hutool（4.0.12+）；2. MP分页插件已配置；3. JWT密钥与Day10保持一致（如`mypet-secret-2024`）	若JWT依赖缺失，需补充： `xml<dependency><groupId>io.jsonwebtoken</groupId><artifactId>jjwt</artifactId><version>0.9.1</version></dependency>`
前端组件与存储	1. Uni-App项目已安装`uni-popup`（弹窗）、`uni-icons`（图标，可选）组件；2. 登录后`uni.getStorageSync('mypet_token')`能获取有效Token，`mypet_userId`已存储；3. 商品详情页能获取当前商品ID（`goodsId`）	`uni-popup`安装：HBuilder X→插件市场→搜索“uni-ui”→导入“uni-popup”组件；商品ID可通过页面跳转参数传递（如`pages/goods/detail?id=1`）
测试数据	1. `goods`（商品表）已存在测试数据（如`id=1`，商品名称“宠物狗粮10kg”）；2. 存在已登录用户（`user_id=1`，Token有效）	若商品表无数据，执行SQL： `sqlINSERT INTO goods (id, goods_name, price, stock, status, image_url) VALUES (1, '宠物狗粮10kg', 199.00, 100, 1, '/static/images/dog-food.jpg');`