一、前端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
}
})
})
},
}
}