从零玩转系列之微信支付实战PC端装修我的订单页面 | 技术创作特训营第一期

news2024/10/5 16:27:06

一、前言

欢迎来到本期的博客!本篇文章是 PC 端的结尾了,前面经历过九个章节到本章节刚刚好十章节感谢观看我的文章,那么接下来我们将要编写的是我的订单页面. GGBOM!

本篇完毕后将是 UniApp 的篇章感受移动端的诱惑

💗 本次为前端知识点如果不懂前段可以去仓库直接 copy 出来使用,如果有什么问题可以在评论区留言,我会第一时间回复大家的.关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

注意: 如果不懂 Vue 语言没关系我会讲或直接 Copy 主要是学习如何实现的嘛

  • 第一章从零玩转系列之微信支付开篇 [1]
  • 第二章从零玩转系列之微信支付安全 [2]
  • 第三章从零玩转系列之微信支付实战基础框架搭建 [3]
  • 第四章从零玩转系列之微信支付实战 PC 端支付下单接口搭建 [4]
  • 第五章从零玩转系列之微信支付实战 PC 端支付微信回调接口搭建 [5]
  • 第六章从零玩转系列之微信支付实战 PC 端支付微信取消订单接口搭建 [6]
  • 第七章从零玩转系列之微信支付实战 PC 端支付微信退款订单接口搭建 [7]
  • 第八章从零玩转系列之微信支付实战 PC 端项目构建 Vue3+Vite+页面基础搭建 [8]
  • 第九章从零玩转系列之微信支付实战 PC 端装修下单页面 [9]
  • 第十章从零玩转系列之微信支付实战 PC 端装修我的订单页面 [10]
输入图片说明
输入图片说明

本次项目使用技术栈

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

前端: Vue3、Vite、ElementPlus

小程序: Uniapp、Uview

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

注意: 上一篇装修下单页面我们已经完成了但是遗漏了一个价格显示的问题给同学自己添加一下吧 如下图

输入图片说明
输入图片说明

二、介绍

本篇我们将实现我的订单页面,我的订单页面组成为表格、分页、退款接口、取消订单接口、简单的 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<Timplements 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 请求。
  • 参数
    • orderInfoOrderInfo类的实例,代表订单信息,包含查询条件。
    • pageQueryPageQuery类的实例,代表分页信息(页码、每页大小等)。
  • 方法描述:该方法根据提供的查询条件和分页详细信息检索分页的订单信息。
  • 代码解释
1. `LambdaQueryChainWrapper<OrderInfo> order = orderInfoService.lambdaQuery();`
    - 初始化基于`OrderInfo`类的`LambdaQueryChainWrapper`实例,该实例提供了一个用于查询订单数据的流式API。
2. `order.orderByDesc(OrderInfo::getCreateTime);`
    - 根据订单的创建时间以降序对查询结果进行排序。
3. `return TableDataInfo.build(order.page(pageQuery.build()));`
    - 根据提供的`pageQuery`参数对查询结果进行分页。
    - 将分页结果包装在`TableDataInfo`实例中,该实例为前端提供了一个标准化的响应格式。
  • 注意:代码中的注释提到,作业添加新的查询条件,如状态、订单号、商品名称和订单创建时间。

同学们手动敲代码:

编写分页代码
编写分页代码

启动测试接口

分页大小为 10,查询第 1 页的订单信息

分页数据
分页数据

四、装修前端页面

设计图
设计图

可以看到设计图,他的样式和下单页面是一样的只是中间的内容不一样周围的边框和阴影都一样,所以我们可以直接复制下单页面的代码,然后修改一下就可以了

创建我的订单页面

views 目录下面创建 order.vue 组合 API

输入图片说明
输入图片说明

新增路由、刷新页面查看

输入图片说明
输入图片说明
输入图片说明
输入图片说明

在分析一下里面的标题也一样啊,所以我们直接复制就行了

输入图片说明
输入图片说明

效果

输入图片说明
输入图片说明

编写数据表格

直接前往https://element-plus.gitee.io/zh-CN/component/table.html[13]官网查看数据表格的使用方法

输入图片说明
输入图片说明

看上哪个用哪个直接 CV

输入图片说明
输入图片说明

将标签复制到 html 当中 将参数复制到 script 当中 刷新页面查看

输入图片说明
输入图片说明
输入图片说明
输入图片说明

分页插件

看上哪个用哪个老规矩直接 CV 放到 el-table 标签下面 刷新页面查看

输入图片说明
输入图片说明
输入图片说明
输入图片说明

总结: 以上我们已经对组件库的功能大致了解了我们直接对接后端数据进行渲染

编写分页查询请求

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

params 参数表示路径后面带的参数

data 参数表示传递的 JSON 数据

输入图片说明
输入图片说明

编写方法发送请求

复制下面到 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

思路: 后端请求需要 分页参数 我们需要定义一个请求参数变量用来存储

// 请求参数
const formData = ref({
  pageSize: 10,
  pageNum: 1,
  totalPage: 0,
})

使用 ref 响应式存储那么在使用的时候需要 .value 例如 formData.value 才能拿到数据

输入图片说明
输入图片说明

修改表格

      <!-- 订单列表 -->
      <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="订单标题" 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="订单状态" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"/>
        <el-table-column label="操作" width="70" align="center"></el-table-column>
      </el-table>

介绍 #default="scope"

在 Vue3 中,#default="scope"是一种用于处理列表渲染的语法。它允许我们在父组件中定义一个插槽,并通过子组件将数据传递给插槽。这样我们就可以在父组件中使用子组件的数据,并根据需要进行渲染。

重新刷新页面请求成功

输入图片说明
输入图片说明

编写分页插件

WARNING 我们现在会检查一些不合理的用法,如果发现分页器未显示,可以核对是否违反以下情形: totalpage-count 必须传一个,不然组件无法判断总页数;优先使用 page-count; 如果传入了 current-page,必须监听 current-page 变更的事件(@update:current-page),否则分页切换不起作用; 如果传入了 page-size,且布局包含 page-size 选择器(即 layout 包含 sizes),必须监听 page-size 变更的事件(@update:page-size),否则分页大小的变化将不起作用。

API#[14]

属性#[15]

属性名说明类型默认值
small是否使用小型分页样式booleanfalse
background是否为分页按钮添加背景色booleanfalse
page-size / v-model:page-size每页显示条目个数number
default-page-size每页默认的条目个数,不设置时默认为 10number
total总条目数number
page-count总页数, totalpage-count 设置任意一个就可以达到显示页码的功能;如果要支持 page-sizes 的更改,则需要使用 total 属性number
pager-count设置最大页码按钮数。 页码按钮的数量,当总页数超过该值时会折叠number7
current-page / v-model:current-page当前页数number
default-current-page当前页数的默认初始值,不设置时默认为 1number
layout组件布局,子组件名用逗号分隔stringprev, pager, next, jumper, ->, total
page-sizes每页显示个数选择器的选项设置object10, 20, 30, 40, 50, 100
popper-class每页显示个数选择器的下拉框类名string''
prev-text替代图标显示的上一页文字string''
prev-icon上一页的图标, 比 prev-text 优先级更高string / ComponentArrowLeft
next-text替代图标显示的下一页文字string''
next-icon下一页的图标, 比 next-text 优先级更高string / ComponentArrowRight
disabled是否禁用分页booleanfalse
hide-on-single-page只有一页时是否隐藏booleanfalse

事件#[16]

名称说明类型
size-changepage-size 改变时触发Function
current-changecurrent-page 改变时触发Function
prev-click用户点击上一页按钮改变当前页时触发Function
next-click用户点击下一页按钮改变当前页时触发Function

上面的 API 属性都有对应的介绍是干啥的那么我们只需用到 当前页数、每页数、和监听分页的点击事件

同学们手动敲一遍吧

输入图片说明
输入图片说明

页面测试

都有可以正常触发并且调用成功

输入图片说明
输入图片说明
输入图片说明
输入图片说明

最后

本期结束咱们下次再见 👋~

,关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

【选题思路】

"技术源于生活" 为什么写微信支付这种项目的文章呢? 因为我看到市面上的文章都不全面不细节不小白话更加没有配套 Demo!!!

从而我的从零玩转微信支付诞生啦~ 搭配 PC 端、Uniapp 端的不同实现.

【写作提纲】

一、前言

通过前言表达我每次的文章内容是什么东西和注意事项,以及本篇文章的目录和彩蛋

二、介绍

介绍设计图的样式和功能,思路,以及后端接口的编写

三、后端接口制作中

教同学们搭建后端接口,并且测试接口是否正常

四、装修前端页面

介绍设计图当中的样式和功能,并且教同学们如何使用组件库、如何编写请求、如何渲染数据、如何监听事件

以及完成了基

参考资料

[1]

第一章从零玩转系列之微信支付开篇: https://cloud.tencent.com/developer/article/2302242

[2]

第二章从零玩转系列之微信支付安全: https://cloud.tencent.com/developer/article/2302251

[3]

第三章从零玩转系列之微信支付实战基础框架搭建: https://cloud.tencent.com/developer/article/2302252

[4]

第四章从零玩转系列之微信支付实战PC端支付下单接口搭建: https://cloud.tencent.com/developer/article/2312574

[5]

第五章从零玩转系列之微信支付实战PC端支付微信回调接口搭建: https://cloud.tencent.com/developer/article/2312581

[6]

第六章从零玩转系列之微信支付实战PC端支付微信取消订单接口搭建: https://cloud.tencent.com/developer/article/2308342

[7]

第七章从零玩转系列之微信支付实战PC端支付微信退款订单接口搭建: https://cloud.tencent.com/developer/article/2308396

[8]

第八章从零玩转系列之微信支付实战PC端项目构建Vue3+Vite+页面基础搭建: https://cloud.tencent.com/developer/article/2309798

[9]

第九章从零玩转系列之微信支付实战PC端装修下单页面: https://cloud.tencent.com/developer/article/2312398

[10]

第十章从零玩转系列之微信支付实战PC端装修我的订单页面: https://cloud.tencent.com/developer/article/2313653

[11]

WEB端: https://lzys522.cn/wx

[12]

小程序: https://foruda.gitee.com/images/1685673930068447278/c20a6a06_5151444.png

[13]

https://element-plus.gitee.io/zh-CN/component/table.html: https://element-plus.gitee.io/zh-CN/component/table.html

[14]

#: https://element-plus.gitee.io/zh-CN/component/pagination.html#api

[15]

#: https://element-plus.gitee.io/zh-CN/component/pagination.html#%2525E5%2525B1%25259E%2525E6%252580%2525A7

[16]

#: https://element-plus.gitee.io/zh-CN/component/pagination.html#%2525E4%2525BA%25258B%2525E4%2525BB%2525B6

本文由 mdnice 多平台发布

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/894134.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于OpenCV的人脸识别和模型训练系统(万字详解)

前言 我们身边的人脸识别有车站检票&#xff0c;监控人脸&#xff0c;无人超市&#xff0c;支付宝人脸支付&#xff0c;上班打卡&#xff0c;人脸解锁手机。 人脸检测是人脸识别系统组成的关键部分之一&#xff0c;其目的是检测出任意给定图片中的包含的一个或多个人脸&#…

Echarts升级7:环状图+标题设置+legend属性

效果 注意的点&#xff1a; title样式颜色设置legend颜色设置legend textStyle 样式设置&#xff1b;formatter样式设置&#xff0c;文字拆分 代码&#xff1a; <template><div style"width: 100%; height: 100%;"><div id"siteStatusStatis…

使用python3编写代码比对excle表格中的日期

表格类似如下&#xff1a; 需要提取H列和I列的日期&#xff0c;并且进行日期分割&#xff0c;提取出日期&#xff0c;将日期倒置&#xff0c;倒置后&#xff0c;拿 关闭时间减去创建时间&#xff0c;得出超过3天的数据&#xff0c;提取出相应的行&#xff1a; # #-* -编码&…

【.net】本地调试运行只能用localhost的问题

【.net】本地调试运行只能用localhost的问题 解决方案 找到到项目目录下 隐藏文件夹 .vs /项目名称/config/applicationhost.config <bindings><binding protocol"http" bindingInformation"*:1738:localhost" /></bindings> 再加一条你…

期待相聚|2023 Google 谷歌开发者大会现场见

直达科技前沿 点亮技术灵感 激发新思妙想 收获多元共进 长按下方图片&#xff0c;扫码报名参会 *仅出于确认身份&#xff0c;请填写与身份证件一致的姓名&#xff0c;并确认邮箱地址及联系电话准确无误。 2023 Google 开发者大会主旨演讲将会分享 Google 如何通过更智能、更…

Harvard transformer NLP 模型 openNMT 简介入门

项目网址&#xff1a; OpenNMT - Open-Source Neural Machine Translation logo&#xff1a; 一&#xff0c;从应用的层面先跑通 Harvard transformer GitHub - harvardnlp/annotated-transformer: An annotated implementation of the Transformer paper. ​git clone http…

跟左神刷算法02 基础

题目1 先根据难度拍个序&#xff0c;难度一样的按收入大的排序&#xff0c;因为他每份都有招无数份人。难度相同的就留一个最大的。难度增加了&#xff0c;而薪水变小了&#xff0c;直接丢掉。难度和薪水保持一个单调性就可以了。 用有序表取做。 key是排序的。 迅速查到小于…

用gdal库读取tif影像并填充边缘,并根据窗口大小滑动裁剪裁剪(包含gdal转PIL)

相关文章 PIL&#xff0c;OPENCV之间的转换关系_pil cvtcolor(image)_番茄就要炒鸡蛋的博客-CSDN博客 python GDAL和PIL图像转换_gdal.readasarray和pil_llc的足迹的博客-CSDN博客 一、原始数据 二、分别读取数据 1、gdal读取的array 2、pil读取的array 三、 gdal转pil image …

交换2个元素的值(3种方法)

1.创建临时变量 int main() {int a10;int b20;int tmp0;printf("before:a:%d,b:%d\n",a,b);tmpa;ab;btmp;printf("after :a:%d,b:%d\n",a,b);return 0; }2.加减法 int main() {int a10;int b20;printf("before:a:%d,b:%d\n",a,b);aab;ba-b;aa-…

470. 用 Rand7() 实现 Rand10()

470. 用 Rand7 实现 Rand10 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a; 原题链接&#xff1a; 470. 用 Rand7() 实现 Rand10() https://leetcode.cn/problems/implement-rand10-using-rand7/description/ 完成情况&#xff1a; 解…

公司内部测试团队可以替代专业的软件检测机构吗,性能测试怎么收费?

第三方软件测试 尽管软件测试是伴随着软件开发的发展而产生的&#xff0c;但是在信息技术日新月异的今天&#xff0c;软件测试逐渐走出开发附庸的定位。 一方面&#xff0c;很多大型企业都在内部设置了专门的测试团队以承接软件系统的测试工作&#xff0c;为产品质量把关。另…

掌握指针进阶:一篇带你玩转函数指针、函数指针数组及指向函数指针数组的指针!!

&#x1f341;博客主页&#xff1a;江池俊的博客 &#x1f4ab;收录专栏&#xff1a;C语言进阶之路 &#x1f4a1;代码仓库&#xff1a;江池俊的代码仓库 &#x1f3aa;我的社区&#xff1a;GeekHub &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐ 文章目录 一…

如何恢复QQ聊天记录,教你3个好方法

有没有这样一款软件&#xff0c;你很久不使用但却不舍得卸载&#xff0c;这款软件便是QQ。作为腾讯最出色的社交产品&#xff0c;其影响力之大不言而喻。 虽然现在微信的普及程度远远超过了QQ&#xff0c;但大多数用户还保留着QQ。QQ在传输文件数据方面也确实更加方便&#xf…

【高级程序设计语言C++】位图

1. 位图1.1. 位图的模型图1.2. 判断一个数是否存在 2. 位图的实现2.1. 位图的基础模型2.2. 位图开辟空间的大小2.3. 位图的插入2.4. 位图的删除2.5. 位图的查询 3. 位图的应用4. 哈希切分5. 位图的优缺点 1. 位图 C中的位图&#xff08;Bitset&#xff09;是一种用于存储和操作…

Windows下问题定位

1、内存相关知识点&#xff1b; 1&#xff09;windows下32位进程&#xff0c;用户态为2G内存&#xff0c;内核态也为2G内存&#xff1b;却别于linux操作系统&#xff1b; 备注&#xff1a;可以通过命令行与管理员权限&#xff0c;启动3G的用户态空间&#xff0c;但是部…

【数学建模】-- 数学规划模型

概述&#xff1a; 什么是数学规划&#xff1f; 数学建模中的数学规划是指利用数学方法和技巧对问题进行数学建模&#xff0c;并通过数学规划模型求解最优解的过程。数学规划是一种数学优化方法&#xff0c;旨在找到使目标函数达到最大值或最小值的变量取值&#xff0c;同时满足…

免费内网穿透哪个好?

神卓互联是一种内网穿透技术&#xff0c;可以实现在外部网络访问公司内网的服务。通过建立一个加密的通道&#xff0c;神卓互联可以将内网的动态IP绑定技术&#xff0c;实现远程访问。 使用神卓互联进行内网穿透的步骤如下&#xff1a; 在公司内网中&#xff0c;安装并配置神卓…

Linux 进程间通信——有名管道和无名管道

一、管道的概念 当从一个进程连接数据流到另一个进程时&#xff0c;我们使用管道。通常把一个进程的输出通过管道连接到另一个进程的输入。 管道可以用来在两个进程之间传递数据&#xff0c;如&#xff1a; ps -ef | grep “bash”, 其中‘|’就是管道&#xff0c;其作用就是…

CH32V203 单片机 I2C 使用

CH32V203系列是基于32位RISC-V内核设计的工业级增强型低功耗通用微控制器&#xff0c;高性能&#xff0c;最高支持144MHz系统主频&#xff0c;低功耗&#xff0c;运行功耗低至45uA/MHz。CH32V203集成双路USB接口&#xff0c;支持USB Host主机及USB Device设备功能&#xff0c;具…

[NAS4]Tiny adversarial multi-objective one-shot neural architecture search

论文链接&#xff1a;https://arxiv.org/abs/2103.00363v1 代码链接&#xff1a; 摘要&#xff1a;移动设备中广泛使用的微小神经网络&#xff08;TNN&#xff09;容易受到对抗性攻击&#xff0c;对TNN鲁棒性的更先进研究需求也越来越大。 本文关注于如何在不损失模型精度的…