django vue 分页

Django 和 Vue 分页通常是在前端和后端分离的应用场景下进行的。以下是简要介绍：

**在 Django 中分页：**
Django 的 ORM（Object-Relational Mapper）提供了一个内置的分页功能。你可以使用 `Paginator` 类来自 Django 的 `django.core.paginator` 模块来进行分页。例如，在视图中获取数据并分页：

from django.core.paginator import Paginator

def list_view(request):
    queryset = YourModel.objects.all()
    paginator = Paginator(queryset, per_page=10)  # 设置每页显示的数量
    page_number = request.GET.get('page', 1)  # 获取请求中的页码，默认第一页
    page_obj = paginator.get_page(page_number)
    context = {'page_obj': page_obj}
    return render(request, 'your_template.html', context)

在模板中，你可以通过循环遍历 `page_obj.object_list` 来显示每个页面的内容。

**在 Vue.js 中分页：**
Vue 本身并不直接支持分页，但可以配合其他库如 `vue-paginate` 或者 `axios` 跟 Django API 进行交互。一般的做法是创建一个 Vue 组件，处理用户点击事件来发送分页请求到 Django API，并接收返回的数据更新组件的状态：

<template>
  <div v-for="item in items">
    <!-- 渲染列表项 -->
  </div>
  <button @click="fetchPage">Next</button>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      currentPage: 1,
      items: [],
      totalPages: null,
    };
  },
  methods: {
    fetchPage() {
      axios.get('/api/v1/list?page=' + this.currentPage)
        .then(response => {
          this.items = response.data;
          // 更新totalPages如果包含在响应中
          this.totalPages = response.headers['X-Total-Pages'];
        });
    },
  },
  created() {
    this.fetchPage();
  },
};
</script>