分页功能的实现_{"page":{"from":1,"size":10}}-CSDN博客

本文链接：https://blog.csdn.net/weixin_47020721/article/details/119819057

本文详细阐述了如何在后端通过Spring Boot实现分页查询，包括创建UserDao接口、UserMapping映射，以及如何配合前端Element UI完成数据分页展示。重点讲解了如何设置查询参数、使用LIMIT关键字和返回数据结构，以及前端如何监听页码和大小变更并调用API获取数据。

摘要由CSDN通过智能技术生成

分页功能的实现

后端

创建查询类

作用：pageNum 当作

 private   String query; //查询信息
 private  int pageNum=1; //当前页
 private  int pageSize =1; //每页最大数

UserDao接口中添加函数

public List<User> getAllUser(@Param("username")String username, @Param("pageStart") int PageStart,@Param("pageSize")int pageSize);  
 public int getUserCounts(@Param("username")String username);

UserMapping 映射

目的：第一个select 查询出从pageStar+1开始的pageSize条数据并封存在User类中 resultType代表封存类型

第二个 select查询出总的条数 resultType 为Integer 代表int类型

    <select id="getAllUser" resultType="com.example.demo.bean.User">
        SELECT * FROM easyUser
        <if test="username !=null">
            WHERE username like #{username}
        </if>
<!--        limit 表示搜索出从pageStar+1开始的pageSize条数据 -->
        LIMIT #{pageStart},#{pageSize}
    </select>
<!--    java.lang.Integer 表示int类型-->
    <select id="getUserCounts" resultType="java.lang.Integer">
        SELECT count(*) FROM easyUser
    <if test="username != null">
        WHERE username like  #{username}
    </if>
    </select>

创建UserDao类

@Autowired 代表自动装配与接口相适应定义接口类时使用

@RequestMapping("/alluser") 给前端的一个访问路径

@RestController
public class UserController {
    @Autowired
    private UserDao udao;
    @RequestMapping("/alluser")
    public  String getUserList(QueryInfo queryInfo)
    {   //获取最大列表数和当前编号
        int numbers= udao.getUserCounts("%"+ queryInfo. ()+"%");
        int pageStart =(queryInfo.getPageNum()-1) *queryInfo.getPageSize();

        List<User> users= udao.getAllUser("%"+queryInfo.getQuery()+"%",pageStart,queryInfo.getPageSize());
        HashMap<String,Object>res =new HashMap<>();
        res.put("numbers",numbers); // 获取当前页条数
        res.put("data",users); //获取当前页的users
        String res_string = JSON.toJSONString(res);
        return res_string;
    }
}

前端

完整分页element

:page-sizes="[100, 200, 300, 400]" 表示可选

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qIZPagix-1629428655344)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\image-20210811222900409.png)]

:page-size=“100” 当前页的最大值 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IDK2e0DY-1629428655345)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\image-20210811223003097.png)]

:total=“400” 数据总的条数 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fIOd2g2v-1629428655346)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\image-20210811223020791.png)]

@size-change=“handleSizeChange” 监听当前页变化 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mrv1rJK4-1629428655349)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\image-20210811223240687.png)]即1、2、3、4的变化
@current-change=“handleCurrentChange” 监听最大页数变化

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-znKYFWMQ-1629428655352)(C:\Users\86159\AppData\Roaming\Typora\typora-user-images\image-20210811223403280.png)]即确定是100条每页还是500条每页

		 <el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="queryInfo.pageNum"
			      :page-sizes="[1, 2, 5, 100]"
			      :page-size="queryInfo.pageSize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total">
			    </el-pagination>

函数的编写

created函数在页面加载时就开始加载，

created()
		{this.getUserList();
			console.log(userList);
		},
		methods:{
		// 获取所有用户信息
			async getUserList()
			{const {data:res} = await this.$http.get("alluser",{params:this.queryInfo});
			 this.userList =res.data;
			 this.total =res.numbers;
				
			},
			// size-change 最大数
			//监听pageSize改变的事件
			handleSizeChange(newSize)
			{
			this.queryInfo.pageSize = newSize;
			this.getUserList();
				
			},
			// @current-change 
			//监听pageNum改变的事件
			handleCurrentChange(newPage)
			{
				this.queryInfo.pageNum=newPage;
				this.getUserList();
			}
		},