vue+elementUI+django 实现分页处理

 前端

<template>
    <div>
         <el-container style="height:100%;">
              <el-aside width="200px">
               <Menu></Menu>
              </el-aside>
               <el-container>
                  <el-header>
                    <div style="float:right"><Logout></Logout></div>
                    <div style="margin-top:10px;">
                    <h1>导出postman用例</h1>
                    </div>
                  </el-header>
                  <el-main >
                    <div style="width:80%; margin-left: auto;margin-right: auto;">
                    <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                        <el-table-column type="index" label="序号" width="100">
                          <!-- 使用 scoped slot 自定义列内容 -->
                          <template slot-scope="scope">
                            {{ scope.$index + 1 }}
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          label="语料名称"
                          width="300">
                        </el-table-column>
                        <el-table-column
                          prop="user"
                          label="操作人"
                          width="180">
                        </el-table-column>
                        <el-table-column
                          prop="ctime"
                          label="执行时间"
                          width="200">
                        </el-table-column>
                        <el-table-column  label="操作" >
                        <template slot-scope="scope">
                           <el-button-group>
                             <el-button type="success" @click="download_postman(scope.row.id)" icon="el-icon-download">下载</el-button>
                             <el-popconfirm  title="确定要删除吗？"  @confirm="delete_postman(scope.row.id)" >
                             <el-button  type="danger" slot="reference" icon="el-icon-delete">删除</el-button>
                             </el-popconfirm>
                           </el-button-group>
                        </template>
                        </el-table-column>
                      </el-table>
                      <br>

                      <el-pagination
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="currentPage"
                          :page-sizes="[10, 20, 50, 100]"
                          :page-size="pageSize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="total">
                      </el-pagination>
                      </div>
                  </el-main>
               </el-container>
         </el-container>
    </div>
</template>
<script>
    import axios from 'axios'
    export default{
        name:"Export2Postman",
            data() {
                return {
                 
                    tableData: [],
                    currentPage: 1,
                    pageSize: 10,
                    total: 10, // 假设总数据量为10

                }
            },
            mounted:function(){
                  this.user = sessionStorage.getItem('user');
                  axios('/get_postmanlist/',{
                    params:{
                        currentPage:this.currentPage
                    }
                  }).then(res=>{
                    this.tableData = res.data.postman
                    this.total = res.data.total
                    console.log('列表数据：',this.tableData)
                    console.log('total：',res.data.total)
                })
              },
            methods: {
              onSubmit() {
                console.log('submit!');
              },

              download_postman(){
                 
              },
              // 页面大小改变时触发
              handleSizeChange(val) {
                  this.searchinput = ''
                  this.pageSize = val;
                  // 重新加载数据
                  axios.get('/get_postmanlist',{
                      params:{
                          currentPage:1,
                          pageSize:this.pageSize
                      }
                    }).then(res=>{
                       this.tableData =  res.data.postman
                       this.total = res.data.total
                       console.log('列表数据：',this.tableData)
                       console.log('total：',this.total)
                  })
                  this.currentPage = 1
              },
              // 当前页码改变时触发
              handleCurrentChange(val) {
                  this.searchinput = ''
                  this.currentPage = val;
                  // 重新加载数据
                  axios.get('/get_postmanlist',{
                    params:{
                        currentPage:this.currentPage,
                        pageSize:this.pageSize
                    }
                  }).then(res=>{
                     this.tableData =  res.data.postman
                     this.total = res.data.total
                     console.log('列表数据：',this.tableData)
                     console.log('total：',this.total)
                  })

              },
              delete_postman(id){
                  console.log(id)
                  //if(confirm('确定是删除记录么？') == false){return}
                  axios.get('/del_postman',{
                    params:{
                        id:id
                    }

                  }).then(res=>{
                     this.tableData =  res.data.postman
                     this.total = res.data.total
                     console.log('列表数据：',this.tableData)
                     console.log('total：',this.total)
                  })
              },
            },
  
    }
</script>

<style>
.flex-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>

路由

    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='index.html')),    
    path('get_postmanlist/', get_postmanlist),  # 获取生成的postmanjson文件
    path('delete_postman/', delete_postman),  # 删除postman

后端

def get_postmanlist(request):
    keys = request.GET.get('searchinput',None)
    currentPage = request.GET.get('currentPage', 1)
    pageSize = request.GET.get('pageSize', 10)
    print('keys:',keys,'currentPage:',currentPage,'pageSize',pageSize)
    res = {}
    try:
        if keys:
            postman = DB_postman.objects.filter(user=request.user.username,name__contains=keys)
            res['total'] = postman.count()
        else:
            projects = DB_postman.objects.filter(user=request.user.username).order_by('-ctime')
            paginator = Paginator(projects, pageSize)
            postmans = paginator.page(currentPage)
            # print(res['total'])
            postman = postmans.object_list
            res['total'] = DB_postman.objects.filter(user=request.user.username).count()
        res['postman'] = list(postman.values('id','name','user'))
        timelist = list(postman.values('ctime'))
        # print(timelist)
        for i in range(len(timelist)):
            # print(localtime(timelist[i]['ctime']).strftime('%Y年%m月%d日 %H:%M'))
            res['postman'][i]['ctime'] = localtime(timelist[i]['ctime']).strftime('%Y年%m月%d日 %H:%M')
        print(res)
        return HttpResponse(json.dumps(res),content_type='application/json')
    except:
        print('异常了')
        res['total'] = 0
        res['postman'] = None
        return HttpResponse(json.dumps(res), content_type='application/json')

def delete_postman(request):
    id = request.GET['id']
    DB_postman.objects.filter(id=id).delete()
    return get_postmanlist(request)

model

class DB_postman(models.Model):
    name = models.CharField(max_length=50, null=True)  # 语料名字
    user = models.CharField(max_length=15, null=True)  # 语料创建者名字
    ctime = models.DateTimeField(auto_now=True)
    filename = models.CharField(max_length=1000, null=True)

    def __str__(self):
        return str(self.name) + str(self.ctime)