Vue3学习（十二）之 前后端分页功能整合之axios的使用

本文主要是介绍Vue3学习（十二）之 前后端分页功能整合之axios的使用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、写在前面

我可能和其他同学不太一样，睡不着就喜欢写写东西，看看文章啥的。
正巧，之前有写过后端关于封装分页请求参数和返回参数的文章，接下来，我们将要进行整合，即将后端接口返回分页功能与前端分页进行整合。

二、如何进行整合

接口部分不用调整沿用之前调整过的分页查询功能，使用axios进行参数修改。

axios发送get请求参数的两种写法

• 拼接url
• 使用固定的params参数

1、首页前端修改列表查询分页参数

对home.vue调整，示例代码如下：

onMounted(() => {
      axios.get("/ebook/list", {
        params: {
          page: 1,
          size: 4
        }
      }).then(response => {
        const data = response.data;
        ebooks.value = data.content.list;
        ebooks1.books = data.content.list;
      })
    })

效果如下图所示：

2、电子书管理页面前端修改列表查询分页参数

对admin-ebook.vue进行调整，示例代码如下：

    onMounted(() => {
      axios.get("/ebook/list",{
        params:{
          page:1,
          size:3
        }
      }).then(response => {
        const data = response.data;
        ebooks.value = data.content.list;
        ebooks1.books = data.content.list;
      })
    })

效果如下图所示：

三、写在最后

关于前后端分页功能整合之axios的使用，分享完毕，感兴趣的同学请自行尝试，今天就不在更新了，晚安，好梦！

这篇关于Vue3学习（十二）之 前后端分页功能整合之axios的使用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！