un629:uni-pagination实现表格分页查询

今天我们来完成一下limit分页查询，需要用到的工具有idea和hbuilderX。

下面让我们一起来完成吧！我们分为两个大的步骤来完成。

一、打开idea工具，创建一个实体类，HttpResult，代码如下：

package com.jf.util;

import lombok.AllArgsConstructor;
import lombok.Data;

@Data
@AllArgsConstructor//生成所有字段的构造方法
public class HTTPResult {
    private int code;//200=请求成功，500=请求失败
    private String msg;//请求失败的提示信息
    private Object data;//请求成功后响应的结果
    private int totle;//列表的总条数
}

二、创建一个mapper接口，将modify方法和selectByLimit方法写好，代码如下：

package com.jf.dao;

import com.jf.entity.User;

import tk.mybatis.mapper.common.Mapper;

import java.util.List;

public interface UserMapper extends Mapper<User> {
    public int modify(User user);
    public List<User> selectByLimit(int start,int pageSize);
}

三、创建一个UserMapper.xml文件，代码内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jf.dao.user.UserMapper">
  <resultMap id="BaseResultMap" type="com.jf.entity.user.User">
    <!--
      WARNING - @mbg.generated
    -->
    <result column="id" jdbcType="BIGINT" property="id" />
    <result column="name" jdbcType="VARCHAR" property="name" />
    <result column="age" jdbcType="INTEGER" property="age" />
    <result column="email" jdbcType="VARCHAR" property="email" />
  </resultMap>
  <update id="modify" parameterType="com.jf.entity.user.User">
    update user set name =@{name} where id=#{id}
  </update>
  
  <select id="selectByLimit" resultType="BaseResultMap" parameterType="com.jf.entity.user.User">
    select * from user ORDER BY id DESC limit #{start},#{pageSize}
  </select>
</mapper>

四、创建一个UserConller类，代码如下：

package com.jf.controller;

import com.jf.dao.UserMapper;

import com.jf.entity.User;
import com.jf.util.HTTPResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired(required = false)
    private UserMapper userMapper;

    //测试查询
    @GetMapping("/show")
    @ResponseBody
    @CrossOrigin(origins = "*")
    public HTTPResult show(int pagIndex,int pageSize) {
        List<User> users = userMapper.selectByLimit((pagIndex-1)*pageSize,pageSize);
        int rows=userMapper.selectCount(null);
        return new HTTPResult(200,null,users,rows);
    }

截止到这里，我们后台的代码就完成了，接下来我们打开前端Hbuilder-X

一、打开Hbuilder-X后，我们会看到很多的界面，选择pages——>user下的user.vue文件。

二、打开user.vue文件后，我们可以看到写好的代码。不急，我们一步一步的操作。

 1、首先，我们要把分页器写到我用红色方框框住的template里边，这代表着我们在HbuilderX中的UI样式，我们所展示的页面数据就是往这里边放的，图片及代码如下：

<!-- 分页器 -->
		<uni-pagination
		:current="pageIndex"
		:pageSize="pggeSize"
		:total="pageTotle"
		@change="pageChanged"
		/>

 二、其次，我们把数据和函数放入script里边，代码如下：

<script>
	export default {
		data() {
			return {
				nice:"遇到你很高兴！",
				userList: null,
				pageIndex:1,//页码
				pggeSize:6,//每页展示数据的条数
				pageTotle:10, //数据总条数
			}
		},
		/*当页面显示成功之后执行*/
		onShow() {
			this.requestUsers();/*定义请求用户列表的函数，通过http请求微服务用户列表*/
		},
		methods: {
			/*请求用户列表*/
			requestUsers(){
				/*uni_app的API发生http请求*/
			uni.request({
			    url: 'http://localhost:8082/user/t1', //仅为示例，并非真实接口地址。
			    data:{
				pagIndex: this.pageIndex,
				pageSize: this.pggeSize
				},
				method: "GET",
				success: (res) => {
			        console.log(res.data);/*打印数据到控制台*/
					this.userList = res.data.data;
					this.pageTotle=res.data.totle;
			    }
			});	
			},
			//*当分页器被点击时触发*/
			pageChanged(e){//*当分页器被点击时触发
				console.log(e.current);//打印出当前点击的页码
				this.pageIndex=e.current;//给页码赋值
			    this.requestUsers();
			}
		}
	}
</script>

三、放好后，点击

点击上方的运行，选择运行至内置浏览器，选择火狐浏览器。 

 四、点击查看效果。

1、现在我把页数调整为第一页，显示以下姓名。 

2、我把页数改为第三页，则姓名有变化，如图：

这样，我们的分页设置就成功啦！