sql逻辑
#从下表为1的往后查三个
SELECT * FROM `sys_user` LIMIT 1,3
SELECT * from sys_user limit 0,2; --第一页
-- (2 -1) * 2 = 2
SELECT * from sys_user limit 2,2; --第二页
-- （3-1）* 2 = 4
SELECT * from sys_user limit 4,2; --第三页
-- 结论： limit第一个参数 = (pageNum - 1) * pageSizecontroller
//实现分页查询
//前端传来两个
//页码pageNum
//每页长度pageSize
//127.0.0.1:9090/user/findPage?pageNum=1&pageSize=3
@GetMapping("/findPage")
public Map<String, Object> findPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize,@RequestParam String username){
//前端传来第几页,计算sql的第几页值
pageNum = (pageNum-1)*pageSize;
List<User> data = userMapper.findPage(pageNum, pageSize,username);
//查询全部数据个数
Integer total = userMapper.selectTotal(username);
//将两个值放入map传给前端
Map<String,Object> map = new HashMap<>();
map.put("data",data);
map.put("total",total);
return map;
}编写mapper文件
@Select("SELECT * from sys_user where username like concat('%', #{username}, '%')limit #{pageNum},#{pageSize};")
List<User> findPage(Integer pageNum, Integer pageSize, String username);
@Select("SELECT count(*) from sys_user where username like concat('%', #{username}, '%')")
Integer selectTotal(String username);
hello.vue
<template>
<el-container style="height: 100%">
<!--侧边栏-->
<el-aside width="250px" style="background-color: rgb(238, 241, 246);height: 100%">
<!--设置背景颜色，设置字体颜色，设置选中字体颜色-->
<!--overflow-x: hidden超出部分隐藏-->
<el-menu :default-openeds="['1', '3']" style="min-height: 100%; overflow-x: hidden"
background-color="rgb(48,65,86)"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group title="分组1">
<el-menu-item index="1-3">选项1</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项2</template>
<el-menu-item index="1-4-1">选项2-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group title="分组1">
<el-menu-item index="1-3">选项1</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项2</template>
<el-menu-item index="1-4-1">选项2-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group title="分组1">
<el-menu-item index="1-3">选项1</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项2</template>
<el-menu-item index="1-4-1">选项2-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<!--主体容器-->
<el-container>
<!--头部-->
<el-header style="text-align: right; font-size: 12px; border: 1px solid #ccc; line-height: 60px"><!--border(边界)定义1px的solid(实线)颜色-->
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<!--主体-->
<el-main>
<!--搜索-->
<div style="margin: 10px 0">
<el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="username"></el-input>
<el-input style="width: 200px" placeholder="请输入邮箱" suffix-icon="el-icon-message" class="ml-5"></el-input>
<el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5"></el-input>
<el-button class="ml-5" type="primary" icon="el-icon-search" @click="load">搜索</el-button>
</div>
<div style="margin: 10px 0">
<el-button type="primary">新增<li class="el-icon-circle-plus-outline"></li></el-button>
<el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i></el-button>
<el-button type="primary">导入 <i class="el-icon-bottom"></i></el-button>
<el-button type="primary">导出 <i class="el-icon-top"></i></el-button>
</div>
<!--表格-->
<el-table :data="tableData" stripe>
<el-table-column prop="id" label="ID" width="60">
</el-table-column>
<el-table-column prop="username" label="姓名" width="140">
</el-table-column>
<el-table-column prop="nickname" label="昵称" width="120">
</el-table-column>
<el-table-column prop="email" label="邮箱">
</el-table-column>
<el-table-column prop="phone" label="电话">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column prop="" label="操作" width="200px" align="center">
<template>
<el-button type="success">编辑</el-button>
<el-button type="danger">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--分页查询-->
<div style="padding: 20px 0px">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:page-sizes="[2, 5, 10, 20]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: 'Home',
components: {
},
data() {
return {
tableData: [],
total: 0,
pageNum: 1,
pageSize: 2,
username:"",
}
},
created() {
// 请求分页查询数据
this.load()
},
methods:{
load(){
//拼接请求地址
fetch("http://localhost:9090/user/findPage?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&username="+this.username).then( res => res.json())
.then(res=>{
console.log(res)
//从后端拿到total和data并绑定
this.total=res.total
this.tableData=res.data
})
},
handleSizeChange(pageSize){
this.pageSize=pageSize
this.load()
},
handleCurrentChange(pageNum){
this.pageNum=pageNum
this.load()
}
}
}
</script>
版权声明：本文为zxy18455原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。