一、简介
欢迎来到本期博客！ 本篇文章PC端就结束了。 到这一章我已经经历了九章，现在已经有十章了。 感谢您观看我的文章。 我们要编译的是我的订单页面。 GGBOM！
本文完成后，就是UniApp体验联通诱惑的篇章了
这次是后端知识点。 如果前面的部分看不懂，可以直接去仓库复制。 如果有任何疑问，可以在评论区留言，我会尽快回复您。 跟着我，别迷路。 如果这篇文章对你有帮助的话，或者有什么问题，欢迎在评论区留言。 我一般看到后都会回复。 点个赞支持一下吧~
注意：如果你不懂Vue语言，也没有关系。 我可以说出来，也可以直接抄写。 主要目的是学习如何实施。
输入图片描述
本项目使用技术栈
前端：SpringBoot3.1.x、Mysql8.0、MybatisPlus
后端：Vue3、Vite、ElementPlus
小程序：Uniapp、Uview
WEB端查看演示地址[11]小程序[12]
注：我们已经完成了之前的家装订单页面，错过了价格显示问题。 让您的朋友自己添加，如右图所示。
输入图片描述 II. 介绍
在本文中，我们将实现我的订单页面。 我的订单页面由表格、分页、退款套接字、订单取消套接字和简单的 CRUD 组成
设计图：
设计图
思路：编写前端我的订单分页接口来接收数据，然后渲染到后端页面。 典型的CRUD操作
因为后台没有条件，所以默认全部查询
布置作业：新增查询条件可以是状态、订单号、产品名称、订单时间
3.后端插座制作中
封装后端分页参数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
*
*/
@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 Page 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
*
*/
@Data
@NoArgsConstructor
public class TableDataInfo<T> implements Serializable {
@Serial
private static final long serialVersionUID = 1L;
/**
* 总记录数
*/
private long total;
/**
* 列表数据
*/
private List data;
/**
* 消息状态码
*/
private int code;
/**
* 消息内容
*/
private String msg;
/**
* 分页
*
* @param list 列表数据
* @param total 总记录数
*/
public TableDataInfo(List list, long total) {
this.data = list;
this.total = total;
}
public static TableDataInfo build(IPage page) {
TableDataInfo rspData = new TableDataInfo();
rspData.setCode(HttpStatus.HTTP_OK);
rspData.setMsg("查询成功");
rspData.setData(page.getRecords());
rspData.setTotal(page.getTotal());
return rspData;
}
public static TableDataInfo build(List list) {
TableDataInfo rspData = new TableDataInfo();
rspData.setCode(HttpStatus.HTTP_OK);
rspData.setMsg("查询成功");
rspData.setData(list);
rspData.setTotal(list.size());
return rspData;
}
public static TableDataInfo build() {
TableDataInfo rspData = new TableDataInfo();
rspData.setCode(HttpStatus.HTTP_OK);
rspData.setMsg("查询成功");
return rspData;
}
}
订单列表分页orderPcPage编译获取方法说明
方法说明：该方法根据提供的查询条件和分页明细信息，检索分页订单信息。
代码解释：
1. `LambdaQueryChainWrapper order = orderInfoService.lambdaQuery();`
- 初始化基于`OrderInfo`类的`LambdaQueryChainWrapper`实例，该实例提供了一个用于查询订单数据的流式API。
2. `order.orderByDesc(OrderInfo::getCreateTime);`
- 根据订单的创建时间以降序对查询结果进行排序。
3. `return TableDataInfo.build(order.page(pageQuery.build()));`
- 根据提供的`pageQuery`参数对查询结果进行分页。
- 将分页结果包装在`TableDataInfo`实例中，该实例为前端提供了一个标准化的响应格式。
好友自动输入代码：
编译分页代码启动测试socket
页大小为10，查询第1页的订单信息
分页数据4.装饰后端页面
设计图
可以看到设计图，它的风格和订单页面是一样的，但是中间的内容不一样，周围的边框和阴影也是一样的订单html，所以我们可以直接复制订单页面的代码，然后更改。
创建我的订单页面
在views目录下创建order.vue组合API
输入图片描述添加路线，刷新页面即可查看
输入图片描述
输入图片描述
上面的标题分析也是如此，我们直接复制即可。
输入图片描述
疗效
输入图像描述 编译数据表
直接进入[13]官网查看数据表的使用方法
输入图片描述
看看并使用直接简历
输入图片描述
将标签复制到html并将参数复制到脚本。 刷新页面即可查看。
输入图片描述
输入图像描述分页插件
如果你喜欢某人，请使用旧规则，将简历直接放在 el-table 标签下。 刷新页面即可查看。
输入图片描述
输入图片描述
总结：上面我们已经大致了解了组件库的功能。 我们直接连接前端数据进行渲染。
编译分页查询请求
自己检查一下你前端的URL地址
params参数表示路径前面的参数
data参数代表传递的JSON数据
输入图像描述 撰写方法 发送请求
复制以下内容到订购页面
import {onBeforeMount, ref} from "vue";
// ---------------------------------------------------引入API---------------------------------------------------
import orderInfoApi from "@/api/orderInfo";
// ---------------------------------------------------变量---------------------------------------------------
// 我的订单列表
const tableData = ref([])
// 适配移动端
const widthBox = ref(false)
// ---------------------------------------------------方法---------------------------------------------------
// 获取订单列表方法
const getOrderList = () => {
}
// ---------------------------------------------------生命周期---------------------------------------------------
onBeforeMount(() => {
widthBox.value = window.innerWidth <= 500
// 获取订单列表
getOrderList()
})
创建获取订单列表
思路：前端请求需要分页参数，我们需要定义一个请求参数变量来存储
// 请求参数
const formData = ref({
pageSize: 10,
pageNum: 1,
totalPage: 0,
})
使用ref响应式存储，这样使用时就需要formData.value等.value来获取数据
输入图像描述更改表格
{{ scope.row.totalFee / 100 }} 元
引入#default="scope"
在 Vue3 中，#default="scope" 是用于处理列表渲染的语法。 它允许我们在父组件中定义一个套接字订单html，并通过子组件向该套接字传递数据。 这样我们就可以在父组件中使用子组件的数据，并根据需要进行渲染。
刷新页面请求成功
输入图片描述编译分页插件
警告我们现在将检测一些不合理的用法。 如果发现分页器没有显示，可以验证是否违反了以下条件：total和page-count必须一起传递，否则组件很难确定总页数； 首先使用页数； 如果通过current-page进入的话，必须监听current-page变化的风暴(@update:current-page)，否则分页开关不起作用； 如果传入了page-size，并且布局中包含了page-size选择器（即布局中包含了sizes），则必须监听page-size的变化（@update:page-size），否则会发生变化页面大小不起作用。
API #[14] 属性 #[15]
属性名称 描述 类型 默认值
小的
是否使用大分页样式
布尔值
错误的
背景
是否为分页按钮添加背景颜色
布尔值
错误的
页面大小/v-模型：页面大小
每页条目数
数字
—
默认页面大小
默认每页条目数，如果不设置则默认为10
数字
—
全部的
条目总数
数字
—
页数
可设置总页数、total、page-count，实现显示页脚的功能； 如果要支持page-size的修改，需要使用total属性
数字
—
寻呼机计数
设置页脚按钮的最大数量。当总页数超过此值时将折叠的页脚按钮的数量
数字
当前页/v-模型:当前页
当前页码
数字
—
默认当前页面
当前页码默认初始值，如果不设置则默认为1
数字
—
布局
组件布局，子组件名称用冒号分隔
细绳
上一页,寻呼机,下一页,跳线,->,总计
页面大小
每页显示数字选择器选项设置
目的
10,20,30,40,50,100
波普尔级
每页显示的号码选择器下拉框类名
细绳
”
上一篇文本
发表评论