1. 模糊搜索商品功能
-
前端实现:
-
通过解析URL参数(如
search=联想
)获取搜索关键字,发送AJAX GET请求到后端接口/product/searchGoodsMessage
。 -
动态渲染搜索结果:若结果非空,循环遍历返回的商品数据,生成商品卡片(包含图片、价格、标题),并绑定收藏和购物车功能按钮;若结果为空,显示"无商品信息"。
-
使用
replace()
方法动态替换模板中的占位符(如#{id}
、#{price}
)。
-
-
后端实现:
-
控制器接收关键字
info
,调用服务层执行模糊查询。 -
SQL逻辑 :
SELECT * FROM t_product WHERE title LIKE '%#{info}%' AND status=1 ORDER BY priority DESC LIMIT 0,12
,限制返回前12条数据。 -
返回JSON格式的商品列表数据。
-
2. 添加收藏功能
-
前端实现:
-
点击"加入收藏"按钮触发
addFavoriteUse(pid)
函数,弹出确认框后发送AJAX请求到/favorite/addFavoriteUse
。 -
成功回调后更新按钮状态(如图标变为"取消收藏")。
-
-
后端实现:
-
控制器从会话中获取用户ID和用户名,调用服务层插入收藏记录。
-
服务层逻辑:
-
根据商品ID查询商品详情(
Product
表)。 -
将商品信息(标题、价格、图片)与用户ID一起存入收藏表
t_favorites
。
-
-
SQL逻辑 :
INSERT INTO t_favorites
插入完整收藏记录,返回生成的自增收藏ID(fid
)。
-
3. 添加购物车功能
-
前端实现:
-
点击"加入购物车"按钮触发
addProToCart(id, price)
,发送POST请求到/cart/addProToCart
,参数包含商品ID、价格和数量(默认1)。 -
根据后端返回状态码弹出成功或失败提示。
-
-
后端实现:
-
核心逻辑:
-
检查当前用户的购物车中是否已存在该商品。
-
若存在,更新商品数量(
num = num + 1
);若不存在,新增购物车记录。
-
-
SQL逻辑:
-
查询:
SELECT * FROM t_cart WHERE pid=#{pid} AND uid=#{uid}
。 -
插入:
INSERT INTO t_cart
记录商品、用户、数量、价格等信息。 -
更新:
UPDATE t_cart SET num=#{num}
。
-
-
4. 商品详情展示
-
前端实现:
-
从URL参数中提取商品ID(
pid
),请求接口/product/getProDetail
获取详情数据。 -
动态渲染商品标题、价格、库存,并加载多张商品图片(如
1_big.png
、1.jpg
)。
-
-
后端实现:
- SQL逻辑 :
SELECT * FROM t_product WHERE id=#{pid}
,直接返回商品完整信息。
- SQL逻辑 :
5. 购物车展示
-
前端实现:
-
请求接口
/cart/showCartInfo
获取当前用户的购物车列表数据。 -
动态生成表格,展示商品图片、标题、单价、数量(支持增减操作)、小计和删除按钮。
-
使用模板替换占位符(如
#{cid}
、#{image}
)填充数据。
-
-
后端实现:
-
SQL逻辑 :联表查询
t_cart
和t_product
,返回视图对象CartVo
,包含购物车ID、商品信息、数量、小计等字段。 -
查询语句:
sqlSELECT c.cid, c.pid, c.uid, c.num, p.price, p.image, p.title FROM t_cart c LEFT JOIN t_product p ON c.pid = p.id WHERE c.uid=#{uid} ORDER BY c.modified_time DESC;
-
6. 关键技术点
-
前后端交互:
- 使用AJAX异步请求,数据格式为JSON,通过RESTful风格接口通信。
-
数据库操作:
-
MyBatis实现SQL映射,动态拼接查询条件(如模糊搜索
LIKE
)。 -
联表查询优化数据展示(如购物车关联商品表)。
-
-
功能扩展性:
-
分页逻辑(
LIMIT 0,12
)支持后续扩展更多商品加载。 -
收藏和购物车通过用户会话(
HttpSession
)隔离不同用户数据。
-