vue3+Naive UI+fastapi 前后端分离 Pagination 数据分页实战演练

记录一次vue3+Naive UI+fastapi 前后端分离 Pagination 数据分页实战演练的过程。
Naive UI 是一个 Vue3 的组件库。
FastAPI 是一个用于构建 API 的现代、快速（高性能）的 web 框架，使用 Python 3.6+ 并基于标准的 Python 类型提示。

fastapi-backend 后端目录
vue-frontend 前端目录
这里我只贴一些关键的代码了,文末有代码仓库可以查看完整的代码.

后端

后端fastapi的搭建请看这里，就不在重复了

前端

Vue 及 Naive UI 的创建

在项目的根目录终端下:

npm init vue@latest  # 然后一路回车即可

安装及引入Naive UI

npm i -D naive-ui

安装后 配置前端下边的main.js引入Naive UI框架.

import { createApp } from 'vue'
import App from './App.vue'
import naive from 'naive-ui'

const app = createApp(App);
app.use(naive);
app.mount('#app');

安装axios npm install axios

然后在前端目录的终端下:npm run dev
即可看到项目正常启动了.

前端的数据渲染

创建Home.vue，在App.vue中引入。

Home.vue 中配置一个简单的列表和分页组件：

<template>
  <n-list>
    <n-list-item v-for="item in items" :key="item.id">
      {{ item }}
    </n-list-item>
  </n-list>
  <n-pagination v-model:page="current" :item-count="count" :on-update:page="showSizeChange" />
</template>

其中v-model:page是当前页码数，item-count是数据的总条数。:on-update:page="showSizeChange"是当前页码数发生变化后的响应。

再看Vue中的js代码：

<script setup>
import { ref, watch } from 'vue'
import axios from 'axios'

const baseURL = 'http://localhost:8000'

const items = ref([]) // 数据
const count = ref(0) // 数据总条数
const current = ref(1) // 当前页面
const size = ref(10) // 每页显示的条数

// :on-update:page 事件 来控制获取当前页面的页码数
const showSizeChange = (page,) => {
  console.log(current.value, size.value)
  current.value = page
}

// 翻页方法
const nextPage = () => {
  let skip = size.value * (current.value - 1)
  let limit = size.value
  console.log(skip, limit)
  axios.get(baseURL + '/getitems',
    {
      params: {
        skip: skip,
        limit: limit
      },
    },
  ).then(function (response) {
    console.log(response.data)
    items.value = response.data.items
    count.value = response.data.item_count
  })
}
// 默认加载第一页的数据
nextPage()

// 侦听器，用来检测页码变化后执行翻页方法
watch(current,nextPage)
</script>

nextPage()根据当前页码数加载数据，watch(current,nextPage)用来检测页码变化后执行翻页方法，let skip = size.value * (current.value - 1),这个是比较关键的代码,控制着数据返回的起始点.与后端的return db.query(Item).offset(skip).limit(limit).all()代码时对应的。

最后运行代码效果如下：

本文代码仓库地址：

https://github.com/bosichong/vue3-fastapi-pagination/tree/naive_Pagination