一、前言

歡迎來到本期的博客！本篇文章是 PC 端的結(jié)尾了,前面經(jīng)歷過九個章節(jié)到本章節(jié)剛剛好十章節(jié)感謝觀看我的文章,那么接下來我們將要編寫的是我的訂單頁面. GGBOM!

本篇完畢后將是 UniApp 的篇章感受移動端的誘惑

💗 本次為前端知識點如果不懂前段可以去倉庫直接 copy 出來使用,如果有什么問題可以在評論區(qū)留言,我會第一時間回復(fù)大家的.關(guān)注我不迷路，如果本篇文章對你有所幫助，或者你有什么疑問，歡迎在評論區(qū)留言，我一般看到都會回復(fù)的。大家點贊支持一下喲~ 💗

注意: 如果不懂 Vue 語言沒關(guān)系我會講或直接 Copy 主要是學(xué)習(xí)如何實現(xiàn)的嘛

• 第一章從零玩轉(zhuǎn)系列之微信支付開篇 ^[1]
• 第二章從零玩轉(zhuǎn)系列之微信支付安全 ^[2]
• 第三章從零玩轉(zhuǎn)系列之微信支付實戰(zhàn)基礎(chǔ)框架搭建 ^[3]
• 第四章從零玩轉(zhuǎn)系列之微信支付實戰(zhàn) PC 端支付下單接口搭建 ^[4]
• 第五章從零玩轉(zhuǎn)系列之微信支付實戰(zhàn) PC 端支付微信回調(diào)接口搭建 ^[5]
• 第六章從零玩轉(zhuǎn)系列之微信支付實戰(zhàn) PC 端支付微信取消訂單接口搭建 ^[6]
• 第七章從零玩轉(zhuǎn)系列之微信支付實戰(zhàn) PC 端支付微信退款訂單接口搭建 ^[7]
• 第八章從零玩轉(zhuǎn)系列之微信支付實戰(zhàn) PC 端項目構(gòu)建 Vue3+Vite+頁面基礎(chǔ)搭建 ^[8]
• 第九章從零玩轉(zhuǎn)系列之微信支付實戰(zhàn) PC 端裝修下單頁面 ^[9]
• 第十章從零玩轉(zhuǎn)系列之微信支付實戰(zhàn) PC 端裝修我的訂單頁面 ^[10]

本次項目使用技術(shù)棧

后端: SpringBoot3.1.x、Mysql8.0、MybatisPlus

前端: Vue3、Vite、ElementPlus

小程序: Uniapp、Uview

演示地址查看 WEB 端^[11] 小程序^[12]

注意: 上一篇裝修下單頁面我們已經(jīng)完成了但是遺漏了一個價格顯示的問題給同學(xué)自己添加一下吧 如下圖

二、介紹

本篇我們將實現(xiàn)我的訂單頁面,我的訂單頁面組成為表格、分頁、退款接口、取消訂單接口、簡單的 CRUD

設(shè)計圖:

🦌 思路: 編寫后端 我的訂單 分頁接口 拿到數(shù)據(jù)后渲染到前端頁面典型的 CRUD 操作

由于前端沒有條件則默認(rèn)查詢?nèi)?/p>

布置作業(yè): 新增查詢條件 可以是狀態(tài)、訂單號、商品名稱、下單時間

三、后端接口制作中

封裝前端分頁參數(shù) PageQuery.java(com/yby6/reponse/PageQuery.java)

它可以幫助你更輕松地管理分頁參數(shù)，并與后端更有效地交互

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;

????/**
?????*?當(dāng)前頁數(shù)
?????*/
????private?Integer?pageNum;

????/**
?????*?排序列
?????*/
????private?String?orderByColumn;

????/**
?????*?排序的方向desc或者asc
?????*/
????private?String?isAsc;

????/**
?????*?當(dāng)前記錄起始索引?默認(rèn)值
?????*/
????public?static?final?int?DEFAULT_PAGE_NUM?=?1;

????/**
?????*?每頁顯示記錄數(shù)?默認(rèn)值?默認(rèn)查全部
?????*/
????public?static?final?int?DEFAULT_PAGE_SIZE?=?Integer.MAX_VALUE;

????/**
?????*?構(gòu)建分頁對象
?????*
?????*?@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);
????}

}

封裝前端分頁返回參數(shù) TableDataInfo.java(com/yby6/reponse/TableDataInfo.java)

為前端提供一個標(biāo)準(zhǔn)化的數(shù)據(jù)結(jié)構(gòu)，從而使得前端的開發(fā)更加便捷和高效

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;

/**
?*?表格分頁數(shù)據(jù)對象
?*
?*?@author?Yang?Shuai
?*?Create?By?2023/08/17
?*?<p>
?*/

@Data
@NoArgsConstructor
public?class?TableDataInfo<T>?implements?Serializable?{
????@Serial
????private?static?final?long?serialVersionUID?=?1L;

????/**
?????*?總記錄數(shù)
?????*/
????private?long?total;

????/**
?????*?列表數(shù)據(jù)
?????*/
????private?List<T>?data;

????/**
?????*?消息狀態(tài)碼
?????*/
????private?int?code;

????/**
?????*?消息內(nèi)容
?????*/
????private?String?msg;

????/**
?????*?分頁
?????*
?????*?@param?list??列表數(shù)據(jù)
?????*?@param?total?總記錄數(shù)
?????*/
????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 請求。
• 參數(shù)：

  • orderInfo： OrderInfo類的實例，代表訂單信息，包含查詢條件。
  • pageQuery： PageQuery類的實例，代表分頁信息（頁碼、每頁大小等）。
• 方法描述：該方法根據(jù)提供的查詢條件和分頁詳細(xì)信息檢索分頁的訂單信息。
• 代碼解釋：

1.?`LambdaQueryChainWrapper<OrderInfo>?order?=?orderInfoService.lambdaQuery();`
????-?初始化基于`OrderInfo`類的`LambdaQueryChainWrapper`實例，該實例提供了一個用于查詢訂單數(shù)據(jù)的流式API。

2.?`order.orderByDesc(OrderInfo::getCreateTime);`
????-?根據(jù)訂單的創(chuàng)建時間以降序?qū)Σ樵兘Y(jié)果進(jìn)行排序。

3.?`return?TableDataInfo.build(order.page(pageQuery.build()));`
????-?根據(jù)提供的`pageQuery`參數(shù)對查詢結(jié)果進(jìn)行分頁。
????-?將分頁結(jié)果包裝在`TableDataInfo`實例中，該實例為前端提供了一個標(biāo)準(zhǔn)化的響應(yīng)格式。

• 注意：代碼中的注釋提到，作業(yè)添加新的查詢條件，如狀態(tài)、訂單號、商品名稱和訂單創(chuàng)建時間。

同學(xué)們手動敲代碼:

啟動測試接口

分頁大小為 10，查詢第 1 頁的訂單信息

四、裝修前端頁面

可以看到設(shè)計圖,他的樣式和下單頁面是一樣的只是中間的內(nèi)容不一樣周圍的邊框和陰影都一樣,所以我們可以直接復(fù)制下單頁面的代碼,然后修改一下就可以了

創(chuàng)建我的訂單頁面

在 views 目錄下面創(chuàng)建 order.vue 組合 API

新增路由、刷新頁面查看

在分析一下里面的標(biāo)題也一樣啊,所以我們直接復(fù)制就行了

效果

編寫數(shù)據(jù)表格

直接前往https://element-plus.gitee.io/zh-CN/component/table.html^[13]官網(wǎng)查看數(shù)據(jù)表格的使用方法

看上哪個用哪個直接 CV

將標(biāo)簽復(fù)制到 html 當(dāng)中 將參數(shù)復(fù)制到 script 當(dāng)中 刷新頁面查看

分頁插件

看上哪個用哪個老規(guī)矩直接 CV 放到 el-table 標(biāo)簽下面 刷新頁面查看

總結(jié): 以上我們已經(jīng)對組件庫的功能大致了解了我們直接對接后端數(shù)據(jù)進(jìn)行渲染

編寫分頁查詢請求

自己查看自己后端的 URl 地址

params 參數(shù)表示路徑后面帶的參數(shù)

data 參數(shù)表示傳遞的 JSON 數(shù)據(jù)

編寫方法發(fā)送請求

復(fù)制下面到 order 頁面

<script setup>
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()
})</script>

完善 getOrderList

思路: 后端請求需要 分頁參數(shù) 我們需要定義一個請求參數(shù)變量用來存儲

// 請求參數(shù)
const formData = ref({pageSize: 10,pageNum: 1,totalPage: 0,
})

使用 ref 響應(yīng)式存儲那么在使用的時候需要 .value 例如 formData.value 才能拿到數(shù)據(jù)

修改表格

      <!-- 訂單列表 --><el-table v-loading="loading" :data="tableData" border style="width: 100%; height: 600px"><el-table-column v-if="!widthBox" type="index" width="50"/><el-table-column v-if="!widthBox" prop="orderNo" label="訂單編號" width="230"/><el-table-column prop="title" label="訂單標(biāo)題" align="center"/><el-table-column prop="totalFee" label="訂單金額" align="center"><template #default="scope"> {{ scope.row.totalFee / 100 }} 元</template></el-table-column><el-table-column label="訂單狀態(tài)" align="center"></el-table-column><el-table-column prop="createTime" label="創(chuàng)建時間" align="center"/><el-table-column label="操作" width="70" align="center"></el-table-column></el-table>

介紹 #default="scope"

在 Vue3 中，#default="scope"是一種用于處理列表渲染的語法。它允許我們在父組件中定義一個插槽，并通過子組件將數(shù)據(jù)傳遞給插槽。這樣我們就可以在父組件中使用子組件的數(shù)據(jù)，并根據(jù)需要進(jìn)行渲染。

重新刷新頁面請求成功

編寫分頁插件

WARNING 我們現(xiàn)在會檢查一些不合理的用法，如果發(fā)現(xiàn)分頁器未顯示，可以核對是否違反以下情形： total 和 page-count 必須傳一個，不然組件無法判斷總頁數(shù)；優(yōu)先使用 page-count; 如果傳入了 current-page，必須監(jiān)聽 current-page 變更的事件（@update:current-page），否則分頁切換不起作用； 如果傳入了 page-size，且布局包含 page-size 選擇器（即 layout 包含 sizes），必須監(jiān)聽 page-size 變更的事件（@update:page-size），否則分頁大小的變化將不起作用。

API#^[14]

屬性#^[15]

事件#^[16]

上面的 API 屬性都有對應(yīng)的介紹是干啥的那么我們只需用到 當(dāng)前頁數(shù)、每頁數(shù)、和監(jiān)聽分頁的點擊事件

同學(xué)們手動敲一遍吧

頁面測試

都有可以正常觸發(fā)并且調(diào)用成功

最后

本期結(jié)束咱們下次再見 👋~

，關(guān)注我不迷路，如果本篇文章對你有所幫助，或者你有什么疑問，歡迎在評論區(qū)留言，我一般看到都會回復(fù)的。大家點贊支持一下喲~ 💗

【選題思路】

"技術(shù)源于生活" 為什么寫微信支付這種項目的文章呢? 因為我看到市面上的文章都不全面不細(xì)節(jié)不小白話更加沒有配套 Demo!!!

從而我的從零玩轉(zhuǎn)微信支付誕生啦~ 搭配 PC 端、Uniapp 端的不同實現(xiàn).

【寫作提綱】

一、前言

通過前言表達(dá)我每次的文章內(nèi)容是什么東西和注意事項,以及本篇文章的目錄和彩蛋

二、介紹

介紹設(shè)計圖的樣式和功能,思路,以及后端接口的編寫

三、后端接口制作中

教同學(xué)們搭建后端接口,并且測試接口是否正常

四、裝修前端頁面

介紹設(shè)計圖當(dāng)中的樣式和功能,并且教同學(xué)們?nèi)绾问褂媒M件庫、如何編寫請求、如何渲染數(shù)據(jù)、如何監(jiān)聽事件

以及完成了基

參考資料