(自用)Java学习-5.16(取消收藏,批量操作,修改密码,用户更新,上传头像)
1. 取消收藏功能
-
前端实现:
-
用户点击“取消收藏”按钮时,前端通过变量
status
判断当前状态(0
为未收藏,1
为已收藏)。 -
发送AJAX请求到后端接口:
-
添加收藏:
/favoriteise/addFavoriteise?pid=商品ID
,成功后将按钮状态更新为“取消收藏”(图标变为实心)。 -
取消收藏:
/favoriteise/dropFavoriteise?fid=收藏记录ID
,成功后恢复为“加入收藏”(图标变为空心)。
-
-
使用
confirm()
弹窗确认操作。
-
-
后端实现:
-
控制器:接收
fid
参数,调用服务层删除收藏记录。 -
SQL逻辑:
DELETE FROM t_favorites WHERE fid=#{fid}
,直接删除指定收藏记录。
-
2. 购物车操作
-
增减商品数量:
-
前端:点击“+”或“-”按钮触发
addNum(cid)
或reduceNum(cid)
,发送请求到/cart/addNum
或/cart/reduceNum
,动态更新页面显示的数量和小计。 -
后端:
-
查询购物车记录:
SELECT * FROM t_cart WHERE cid=#{cid}
。 -
更新数量:
UPDATE t_cart SET num=#{num}
,并记录修改时间。
-
-
-
全选操作:
-
勾选“全选”按钮触发
checkAll()
,请求/cart/getTotalNum
获取所有购物车数据,计算总数量和总金额,更新页面显示。 -
SQL逻辑:
SELECT * FROM t_cart
,返回全部购物车数据。
-
-
批量删除:
-
勾选多个商品后,前端将选中的
cid
数组发送到/cart/batchDelete
。 -
SQL逻辑:
DELETE FROM t_cart WHERE cid IN (id1, id2, ...)
,通过<foreach>
动态拼接ID列表。
-
3. 修改密码功能
-
前端实现:
-
输入原密码时触发异步校验(
/users/checkoldval
),验证通过后允许提交新密码。 -
提交时校验两次新密码一致性,发送请求到
/users/modifiedPass
。
-
-
后端实现:
-
密码加密:使用
getMd5Password()
结合盐值加密新密码。 -
SQL逻辑:
UPDATE t_user SET password=新密码 WHERE uid=用户ID
。 -
修改成功后清除用户会话,跳转至登录页。
-
4. 用户资料更新
-
展示资料:
-
请求
/users/showOneUser
获取当前用户信息(如用户名、电话、性别),动态填充表单。 -
根据性别动态渲染单选按钮(男/女)。
-
-
更新资料:
-
提交表单数据到
/users/editUserInfo
,后端更新t_user
表中对应字段(如phone
、email
、gender
)。 -
SQL逻辑:动态生成
UPDATE
语句,仅更新非空字段。
-
5. 上传头像功能
-
前端实现:
-
使用
<form>
表单提交文件,设置enctype="multipart/form-data"
,提交到/uploadpic/savepic
。
-
-
后端实现:
-
阿里云OSS配置:通过
application.yml
读取OSS参数(Endpoint、AccessKey等)。 -
文件处理:
-
生成唯一文件名(UUID + 文件后缀)。
-
上传文件到OSS指定路径(如
userName/新文件名
)。 -
将OSS文件路径存入用户表
t_user
的avatar
字段。
-
-
SQL逻辑:
UPDATE t_user SET avatar=文件路径 WHERE uid=用户ID
。
-
6. 关键技术点
-
前后端交互:
-
使用AJAX异步请求,配合JSON数据格式,实现无刷新操作(如购物车数量更新)。
-
RESTful风格接口设计(如
/cart/addNum
、/users/modifiedPass
)。
-
-
数据库操作:
-
MyBatis动态SQL(如
<if>
条件判断、<foreach>
批量删除)。 -
联表查询优化数据展示(如购物车关联商品信息)。
-
-
安全与扩展:
-
用户会话管理(
HttpSession
存储用户ID和用户名)。 -
文件上传通过OSS实现分布式存储,提升系统扩展性。
-