网页分页查询

网页分页查询

前端分析

分页页面JS

前端展示区 

<template><div>...<!-- 用户数据表格展现  border 边框线属性  --><el-table :data="userList" border stripe><el-table-column type="index" label="序号"></el-table-column><el-table-column prop="username" label="用户名"></el-table-column><el-table-column prop="phone" label="电话"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column prop="status" label="状态"><!-- 设置一个修改状态switch的按钮 触发时执行w)--><template slot-scope="scope"><el-switch v-model=&#w.status" @change="w)"active-color="#13ce66" inactive-color="#ff4949"></el-switch></template></el-table-column><el-table-column label="操作">//设置操作中的修改删除按钮<template slot-scope="scope"><el-button type="primary" icon="el-icon-edit" size="small" @click="w)"></el-button><el-button type="danger" icon="el-icon-delete" size="small" @click="w)"></el-button></template></el-table-column></el-table><!-- 定义分页组件 关于分页插件的属性说明1.@size-change 如果分页中每页实现的条数发生变化 则会触发这个该事件2.@current-change 当页数发生改变时,触发该函数3.current-page 当前选中的页4.page-sizes   页面数据展现的选项5.page-size    默认选中的页数6.layout    分页中展现的数据种类7.total     记录总数--><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="queryInfo.pageNum":page-sizes="[5, 10, 20, 40]":page-size="queryInfo.pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></el-card>...</div>

 前端方法区

<script>export default {......return {...userList: [],...//methods方法区methods: {//查询方法async getUserList(){const {data: result} = await this.$('/user/getUserlist',{params: this.queryInfo})if(result.status !== 200) return this.$("用户列表查询失败")this.userList = al = alconsole.log("总记录数:"&#al)},...//分页按钮配置//设置查询的页数方法handleSizeChange(pageSize){//console.log("每页展现的条数"+pageSize)this.queryInfo.pageSize = UserList()},//设置查询的数量方法handleCurrentChange(pageNum){//console.log("页数:"+pageNum)this.queryInfo.pageNum = UserList()},...}//利用生命函数实现自动数据查询mounted(){UserList()}}
</script>

后端代码

方法一：使用SQL的 limit方法分页查询

select * form 表单 limit #{start}，#{size}        //start：开始地点，size：长度

可以使用注解@select写在mapper层文件中

@Mapper
public interface UserMapper extends BaseMapper<User> {//注解方法查询数据库！，只适用于简单的SQL！！！/*** @Insert(),@Update(),@Delect()* */@Select("select * from user limit #{start},#{size}")List<User> getUserlist(int start,int size);
}

可以使用l文件写在mapper配置文件中吗？

使用该方法，需要在user文件中添加start和size属性保证数据的传输。否则无法进行搜索，不符合设计理念（不推荐）

    <select id="getUserlist" resultType="com.jt.pojo.User">select * from user limit #{start},#{size}</select>

UserController方法

   /*** 业务说明: 实现用户列表的分页查询* 使用参数: pageResult接收* 返回值: SysResult对象(pageResult)*/@GetMapping("/list")public SysResult getUserList(PageResult pageResult){//3pageResult = UserList(pageResult);return SysResult.success(pageResult);//5}

编辑UserService方法

/***   分页Sql:*   语法: select * from user limit 起始位置,每页条数*   规则: 数组 含头不含尾*   查询第N页:*         select * from user limit (页数-1)条数,条数*/@Overridepublic PageResult getUserList(PageResult pageResult) {//1.获取总记录数  Integer--long 自动转化long total = userMapper.selectCount(null);//2.获取分页结果int size = PageSize();int start = (PageNum() - 1) * size;List<User> userList = UserList(start,size);//封装pageResult返回对象pageResult.setTotal(total).setRows(userList);return pageResult;}

方法二：MP实现用户分页

使用MP的select.page方法查找

   /**       1.构建MP的分页对象*       2.根据分页对象查询数据.*       3.从分页对象中获取数据*       4.封装PageResult对象*       5.编辑配置类 封装分页拦截器* */@Overridepublic PageResult getUserList(PageResult pageResult) {//1.定义分页对象IPage<User> page = new Page<>(PageNum(),PageSize());//2.定义条件构造器 指定动态查询Sqlboolean flag = StringUtils.Query());QueryWrapper<User> queryWrapper = new QueryWrapper<>();queryWrapper.like(flag, "username",Query());//3.进行分页查询page = userMapper.selectPage(page,queryWrapper);//4.从封装后的分页对象中获取数据pageResult.Total()).Records());return pageResult;}

此时还不能完成封包操作，因为还没有配置spring拦截类

配置spring拦截器

在官网搜索分页工具，直接复制粘贴即可

.html

@Configuration
public class MybatisPlusConfig {// MybatisPlus在执行分页操作时,会被该拦截器拦截// 拦截器的作用 动态拼接where条件!!!@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MARIADB));return interceptor;}
}