← 返回笔记列表

收货地址管理功能

学习要点：收货地址功能实现，包含新增、编辑、删除、查询、分页展示、权限控制等。
功能导航

刷新的功能

刷新功能实现 刷新按钮示例

实现方式

通过调用API重新获取数据并更新视图

新增收货地址的功能

前端表单组件

前端表单组件代码

表单重置

关闭对话框时触发@closed事件，调用resetForm重置表单

表单重置代码

新增地址对话框

新增地址对话框示例

取消操作

点击"取消"按钮关闭对话框并重置表单

取消操作代码

新增地址流程

  1. 点击"确定"调用submitForm方法

    提交表单代码

  2. 发送POST请求到/address/save

    API请求代码
  3. Controller处理：
    • 使用@PostMapping处理保存请求
    • @RequestBody映射JSON到AddressRequest
    • @Valid验证请求参数
    Controller代码

  4. Controller校验逻辑

    校验逻辑代码
  5. Service处理：
    • 创建Address对象
    • 使用SnowflakeUtil.getId()生成唯一ID
    • 设置地址信息（用户ID暂写死为1）
    • 调用addressMapper.insert插入数据库
    Service处理代码

  6. 测试结果

    测试结果

  7. 实际效果

    实际效果截图

让UserId从用户的token获取到，而不是写死为1

注意： address表的UserId会和user表的id一样，因为都是从token中获取的

用户上下文管理

用户上下文代码

请求头包含Authorization字段（Bearer Token）

请求头示例

注册拦截器并配置路径

拦截器配置

Service通过UserContext获取当前用户ID

获取用户ID代码

为地址列表排序，使最新添加的在最上（倒序）

在Mapper层添加排序条件

排序代码

优化：除管理员外不能看到不属于自己的地址（过滤）

从UserContext获取当前用户ID作为查询条件

过滤代码

删除收货地址功能

前端实现

单个删除

接收row参数表示要删除的地址行

单个删除代码1 单个删除代码2
批量删除
批量删除代码1 批量删除代码2 批量删除代码3
删除请求函数
删除请求代码

后端实现

Controller

使用@DeleteMapping处理批量删除

Controller删除代码
Service
Service删除代码

效果展示

删除效果1 删除效果2

问题：long类型精度问题

解决方案： 将ID转为字符串处理
精度问题代码1 精度问题代码2 精度问题解决方案

编辑收货地址的功能

  1. 前端：
    • handleEdit函数接收一个row参数，并将该行数据赋值给addressForm，然后显示一个对话框 编辑功能前端代码
    • dialogTitle计算属性根据addressForm.id是否存在来决定对话框的标题是"编辑收货地址"还是"新增收货地址" 对话框标题逻辑
  2. 后端：
    • 共用save方法判断
      后端保存逻辑1 后端保存逻辑2
    • AddressService的save方法，检查request.getId()是否为空或为0
      • 如果是，则执行新增操作，雪花生成一个新的ID，设置用户ID和创建时间，然后调用addressMapper.insert(address)插入数据库
      • 如果不为空，则执行编辑操作，设置更新时间，然后调用addressMapper.updateByPrimaryKeySelective(address)更新数据库
      Service保存逻辑
    改错：不管新增还是编辑，直接将request.getId()设置到address对象中（id有值的话set进去） ID处理修正

查询收货地址功能