koa+elementUI前后端实现分页

一、前端Vue+elementUI

思路：

 1. 写一个方法用来发送请求数据的请求
 2. :page-sizes="pageSizeData"绑定data里的pageSizeData设置为一个数组
 3. @size-change="handleSizeChange"页面数据大小发生变化的时候改变:page-sizes="pageSizeData"的pageSizeData这个数组，并且重新设置当前页码，设置currentPage1=1，把当前的页面数据大小设置为该数组的第一个，方便点击页码的时候，传页面数据大小
 4.  页码发生变化@current-change="handleCurrentChange"拿到当前页码和data里面的pageSizeData，一起发送请求，并且把点击的当前页面的页码复制给:current-page="currentPage1"的currentPage1

注意：

 - 按照逻辑，页面数据大小发生变化的时候，已经把页码改成第一页了，但是不会有效果，然后页码变化的时候把当前页码赋值给currentPage1，才能解决不起效果的bug

<template>
  <div class="SysUsers">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户信息表</span>
      </div>
      <div class="SysUsersForm">
        <el-table
          :data="usersData.filter(data => !search || data.username.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
        >
          <el-table-column label="用户ID" prop="id"></el-table-column>
          <el-table-column label="用户名" prop="username"></el-table-column>
          <el-table-column label="身份" prop="identity"></el-table-column>
          <el-table-column label="状态" prop="status"></el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope>
              <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
            </template>
            <template slot-scope="scope">
              <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" v-show="scope.row.status == '启用'" type="danger" @click="handleDelete(scope.$index, scope.row)">禁用</el-button>
              <el-button size="mini" v-show="scope.row.status == '禁用'" type="success" @click="handleDelete(scope.$index, scope.row)">启用</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage1"
          :page-sizes="pageSizeData"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getUsers, delUser } from "@/api/userManage";
export default {
  data() {
    return {
      currentPage1: 1,
      pageSizeData:[5,10,20,40,80],
      total:0,
      usersData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ],
      search: ""
    };
  },
  methods: {
    async getUsers(data){
      await getUsers(data)
      .then(res => {
        if (res.data.code == 1000) {
          const users = res.data.users
          users.forEach(item => {
            if(item.identity == 0){
              return item.identity = '超管'
            }else if(item.identity == 1){
              return item.identity = '管理员'
            }else if(item.identity == 2){
              return item.identity = '用户'
            }else if(item.identity == 3){
              return item.identity = '游客'
            }
          });
          const userss = users
          userss.forEach(item=>{
            if(item.status == 0){
              item.status = "启用"
            }else{
              item.status = "禁用"
            }
          })
          this.usersData = userss
          this.total = res.data.total
        }
        
      })
      .catch(err => {
        this.$message({
            type: 'info',
            message: '取消改变'
          });     
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      this.$confirm('是否要改变用户状态', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const data = {'id':row.id, 'status':row.status} 
          console.log(data);
          await delUser(data).then(async res=>{
            if(res.data.code == 200){
              await this.getUsers()
            }
          }).catch(err=>{
            this.$message({
            type: 'error',
            message: err
          });    
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消改变'
          });          
        });
    },
    async handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        //把页面的数据大小给data里的pageSizeData的第一个，让下面点击页码的时候，拿到现在应该是每页多少条数据
        this.pageSizeData = [val,5,10,20,40,80]
        this.currentPage1 = 1 
        const data = {'pageNum':this.currentPage1,'pageSize':val }
        await this.getUsers(data)
      },
    async handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage1 = val
        const data = {'pageNum':val,'pageSize':this.pageSizeData[0]}
        await this.getUsers(data)
      }
  },
  async mounted() {
    await this.getUsers()
  }
};
</script>

<style lang="less" scoped>
.SysUsers{
  height: 80vh;
}
.SysUsersForm{
  height: 70vh;
  overflow: auto;
}
</style>

二、后端koa

const db = require('../db/db')
module.exports = {
    getUsers: async (ctx,next)=>{
        // 1.获取客户端传来的信息
        const msg = ctx.request.body
        console.log(msg);
        // 2.传来的页数(第几页)
        const pageNum = !msg ? 1 : msg.pageNum
        // 3.传来的每页的条数
        const pageSize = !msg ? 10 : msg.pageSize
        console.log('13',pageNum,pageSize);
        // 4.计算出第几页pageNum = 1 ,pageNum = 5
        const startPage = (pageNum-1) * pageSize// 1=5 2=5  3=10
        const endPage =  pageSize *1// 5=5 5=10 5=15
        console.log('从第' + startPage + '条数据起取' + endPage + '数据');
        // 5.获取所有数据库用户拿到总数返回前端
        await db.promise().query('select * from users').then(async results=>{
            const [resultss] = results
            const total = resultss.length
            await db.promise().query('select * from users limit ?,?' , [startPage,endPage]).then(res=>{
                const [users] = res
                ctx.body = {
                    code:1000,
                    msg:'获取成功',
                    total:total,
                    users:users,
    
                }
            }).catch(err=>{
                ctx.body = {
                    code:1001,
                    msg:'获取失败'+err
                }
            })
        })
        
    },
    
    }
}