ElementUI 分页+django rest framework

最新推荐文章于 2024-09-16 23:46:36 发布

原创

最新推荐文章于 2024-09-16 23:46:36 发布 · 567 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#python #javascript #vue #web #js

本文介绍了一种前后端联合实现分页的方法，通过前端Vue和后端Django的配合，实现了动态分页功能。具体包括前端代码示例、后端Django配置及数据库操作。

一、概述

在之前的文章中，链接如下：https://www.cnblogs.com/xiao987334176/p/14313471.html

介绍了ElementUI 分页，前端请求一次接口，获取所有数据，由ElementUI 分页组件实现分页，也就是说由前端来完成了分页功能。

但是，在实际项目中，不可能一次性返回所有数据，比如几十万条数据。

比较理想的方案是，前端配合后端，一起来实现分页功能。大概思路如下：

1. 默认访问api，比如：http://127.0.0.1:8000/api/book/list/ ，接口返回10条数据。

2. 前端点击页码时，比如第二页，请求接口：http://127.0.0.1:8000/api/book/list/?page=2，这里的page=2，表示当前页码数，接口返回10条数据。

3. 后面的以此类推，总之，每点击一次，请求一次接口，返回10条数据。

效果如下：

二、前端代码

test.vue

<template>
  <div>
    <!-- 表格 -->
    <el-table :data="tableData.list" style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="120">
      </el-table-column>           <!--设置列标-->
      <el-table-column
        prop="title"
        label="书名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        width="120">
      </el-table-column>
      <el-table-column
        prop="pub_date"
        label="出版日期"
        width="200">
      </el-table-column>
      <el-table-column
        prop="publish"
        label="出版社"
        width="120">
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="block" style="margin-top:15px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: "test2",
    data() {
      return {
        tableData: {},
        currentPage: