一、前言
作者: 杨不易呀
欢迎来到本期的博客！本篇文章是PC端的结尾了,前面经历过九个章节到本章节刚刚好十章节感谢观看我的文章,那么接下来我们将要编写的是我的订单页面. GGBOM!
本篇完毕后将是UniApp的篇章感受移动端的诱惑
💗 本次为前端知识点如果不懂前段可以去仓库直接copy出来使用,如果有什么问题可以在评论区留言,我会第一时间回复大家的.关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
注意: 如果不懂Vue语言没关系我会讲或直接Copy主要是学习如何实现的嘛
- 第一章从零玩转系列之微信支付开篇
- 第二章从零玩转系列之微信支付安全
- 第三章从零玩转系列之微信支付实战基础框架搭建
- 第四章从零玩转系列之微信支付实战PC端支付下单接口搭建
- 第五章从零玩转系列之微信支付实战PC端支付微信回调接口搭建
- 第六章从零玩转系列之微信支付实战PC端支付微信取消订单接口搭建
- 第七章从零玩转系列之微信支付实战PC端支付微信退款订单接口搭建
- 第八章从零玩转系列之微信支付实战PC端项目构建Vue3+Vite+页面基础搭建
- 第九章从零玩转系列之微信支付实战PC端装修下单页面
- 第十章从零玩转系列之微信支付实战PC端装修我的订单下单页面
- 第十一章从零玩转系列之微信支付实战PC端我的订单接入退款取消接口
- 第十二章从零玩转系列之微信支付实战Uni—App基础项目搭建
本次项目使用技术栈
后端: SpringBoot3.1.x、Mysql8.0、MybatisPlus
前端: Vue3、Vite、ElementPlus
小程序: Uniapp、Uview
演示地址查看 WEB端 小程序
注意: 上一篇装修下单页面我们已经完成了但是遗漏了一个价格显示的问题给同学自己添加一下吧 如下图
二、介绍
本篇我们将实现我的订单页面,我的订单页面组成为表格、分页、退款接口、取消订单接口、简单的CRUD
设计图:
🦌思路: 编写后端 我的订单 分页接口 拿到数据后渲染到前端页面典型的CRUD操作
由于前端没有条件则默认查询全部
布置作业: 新增查询条件 可以是状态、订单号、商品名称、下单时间
三、后端接口制作中
封装前端分页参数 PageQuery.java(com/yby6/reponse/PageQuery.java)
它可以帮助你更轻松地管理分页参数，并与后端更有效地交互
package com.yby6.reponse; import cn.hutool.core.util.ObjectUtil; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import lombok.Data; import java.io.Serial; import java.io.Serializable; /** * 分页查询实体类 * * @author Yang Shuai * Create By 2023/08/17 * <p> */ @Data public class PageQuery implements Serializable { @Serial private static final long serialVersionUID = 1L; /** * 分页大小 */ private Integer pageSize; /** * 当前页数 */ private Integer pageNum; /** * 排序列 */ private String orderByColumn; /** * 排序的方向desc或者asc */ private String isAsc; /** * 当前记录起始索引 默认值 */ public static final int DEFAULT_PAGE_NUM = 1; /** * 每页显示记录数 默认值 默认查全部 */ public static final int DEFAULT_PAGE_SIZE = Integer.MAX_VALUE; /** * 构建分页对象 * * @return {@link Page}<{@link T}> */ public <T> Page<T> build() { Integer pageNum = ObjectUtil.defaultIfNull(getPageNum(), DEFAULT_PAGE_NUM); Integer pageSize = ObjectUtil.defaultIfNull(getPageSize(), DEFAULT_PAGE_SIZE); if (pageNum <= 0) { pageNum = DEFAULT_PAGE_NUM; } return new Page<>(pageNum, pageSize); } }
封装前端分页返回参数 TableDataInfo.java(com/yby6/reponse/TableDataInfo.java)
为前端提供一个标准化的数据结构，从而使得前端的开发更加便捷和高效
package com.yby6.reponse; import cn.hutool.http.HttpStatus; import com.baomidou.mybatisplus.core.metadata.IPage; import lombok.Data; import lombok.NoArgsConstructor; import java.io.Serial; import java.io.Serializable; import java.util.List; /** * 表格分页数据对象 * * @author Yang Shuai * Create By 2023/08/17 * <p> */ @Data @NoArgsConstructor public class TableDataInfo<T> implements Serializable { @Serial private static final long serialVersionUID = 1L; /** * 总记录数 */ private long total; /** * 列表数据 */ private List<T> data; /** * 消息状态码 */ private int code; /** * 消息内容 */ private String msg; /** * 分页 * * @param list 列表数据 * @param total 总记录数 */ public TableDataInfo(List<T> list, long total) { this.data = list; this.total = total; } public static <T> TableDataInfo<T> build(IPage<T> page) { TableDataInfo<T> rspData = new TableDataInfo<>(); rspData.setCode(HttpStatus.HTTP_OK); rspData.setMsg("查询成功"); rspData.setData(page.getRecords()); rspData.setTotal(page.getTotal()); return rspData; } public static <T> TableDataInfo<T> build(List<T> list) { TableDataInfo<T> rspData = new TableDataInfo<>(); rspData.setCode(HttpStatus.HTTP_OK); rspData.setMsg("查询成功"); rspData.setData(list); rspData.setTotal(list.size()); return rspData; } public static <T> TableDataInfo<T> build() { TableDataInfo<T> rspData = new TableDataInfo<>(); rspData.setCode(HttpStatus.HTTP_OK); rspData.setMsg("查询成功"); return rspData; } }
编写获取订单列表分页
orderPcPage 方法解释
- 请求映射：该方法映射到/orderPcPage URL端点，并处理HTTP GET请求。
- 参数：
orderInfo：OrderInfo类的实例，代表订单信息，包含查询条件。
pageQuery：PageQuery类的实例，代表分页信息（页码、每页大小等）。
- 方法描述：该方法根据提供的查询条件和分页详细信息检索分页的订单信息。
- 代码解释：
LambdaQueryChainWrapper<OrderInfo> order = orderInfoService.lambdaQuery();
初始化基于OrderInfo类的LambdaQueryChainWrapper实例，该实例提供了一个用于查询订单数据的流式API。
order.orderByDesc(OrderInfo::getCreateTime);
根据订单的创建时间以降序对查询结果进行排序。
return TableDataInfo.build(order.page(pageQuery.build()));
根据提供的pageQuery参数对查询结果进行分页。
将分页结果包装在TableDataInfo实例中，该实例为前端提供了一个标准化的响应格式。
- 注意：代码中的注释提到，作业添加新的查询条件，如状态、订单号、商品名称和订单创建时间。
同学们手动敲代码:
启动测试接口
分页大小为10，查询第1页的订单信息
