后端开发与分页处理

QQ邮箱发验证码

• 
• 
• 
• 
• 
• 
• 效果：
  
  

用户信息列表

• 后端控制器调service
  
• UserService调用mapper从数据库中获取用户列表
  
• 测试：
  

问题：返回user所有信息不安全

• 解决方案： 使用response封装服务端响应到客户端的的信息
  
• selectByMobile(String mobile)：根据手机号码查询用户信息
  list()：获取所有用户信息，并将其转换为UserResponse对象列表
  
• UserController： list()：获取用户列表，并将其转换为UserResponse对象列表
  

为用户列表做分页

• 添加Maven依赖项，用于分页插件
  
• PageRequest：控制分页查询，验证页码不能小于1，每页不得大于100条
  
• UserListRequest继承自PageRequest类，用于封装用户列表请求参数
  
• 用户列表请求的响应，返回了一个包含用户信息的JSON数组
  
  
  注意： 需要登录后才能获取信息
• 控制器方法： 接收一个UserListRequest对象作为请求参数，并返回一个UserResponse对象列表
  @Valid：验证传入的UserListRequest对象是否符合验证规则
  
• UserService： 使用PageHelper进行分页查询，并将结果转换为UserResponse对象列表
  

若想返回统一的格式，需对分页的数据进行封装

• PageResponse<T>泛型类用于封装分页数据
  
• UserService： 从数据库中查询用户数据并封装到PageInfo<User>对象中
  将PageInfo<User>对象转换为PageResponse<UserResponse>对象
  并设置总记录数和当前页码的具体数据
  
• UserController（包装）： list方法接收一个UserListRequest对象，并返回一个R<PageResponse<UserResponse>>对象。 调用userService.list(request)方法获取用户数据。
  
• 测试：
  

日志输出

• 日志记录
  
• 效果：
  

问题：控制台乱码

自动生成SQL语句（Mapper 层代码）

• 在sb-app下new一个module： 专门用于代码生成的子模块（Maven 模块）
  
  
• 执行代码生成： 双击mybatis-generator:generate
  
• 自动生成： 实体类、Mapper接口和XML映射文件
  

建收货地址表

• 创建一个包专门存放sql建表语句
  
• 执行建表语句： 选中sb-app-user控制台标志console输入建表语句
  
• 配置MyBatis Generator： 把address表生成为Address类
  
• 自动生成： 双击mybatis-generator:generate
  自动生成实体类Address和AddressExample、Mapper接口AddressMapper和XML映射文件 AddressMapper.xml

address的总记录数

收货地址管理页面

• 路由配置：

  {
      path: 'address',
      name: 'Address',
      component: () => import('../views/user/Address.vue'),
      meta: { title: '空白页面' }
  }

• 侧边栏菜单配置： 在AppLayout.vue侧边栏菜单中配置了一个多级菜单项
  
• 收货地址列表页面
  
• 加载状态：
  • tableLoading = true：表示正在加载数据
    
  • 使用onMounted钩子调用getAddressList()与后端对接
    
    

收货地址列表分页相关

1. 前端部分:
   • 分页参数：
     
   • API访问后端： 从外层的http引进来（封装分页请求并配置Axios实例,baseURL指向后端地址）
     
2. 后端部分：
   • 请求参数封装： 接收前端分页参数
     
   • AddressService逻辑： 使用PageHelper.startPage()启动分页并日志记录：
     返回封装为PageResponse<Address>的结构：setTotal()：总记录数 & setList()：当前页数据列表
     
   • AddressController接口：
     接收包含分页信息的AddressListRequest
     返回R<PageResponse<Address>>统一响应结构，包含code,msg,data
     
3. 接口测试：
   
4. 页面效果：