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的使用，分享完畢，感興趣的同學請自行嘗試，今天就不在更新了，晚安，好夢！