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

骑猪看日落 2023-10-11 17:41 32阅读 0赞

今天我们来完成一下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">
        
        <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文件。

![79eb8d0612ed4566a221fbadcfbc1deb.png][]

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

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

![ac8222b5d7fd4c8c9544243a8321c45e.png][]

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

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

三、放好后，点击

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

![7593e03d3bd14dceb82ab8d6e5960cc3.png][]

四、点击查看效果。

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

![4f9772f9e6cc4f65948522e39b1d1741.png][]

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

![03820d8b7ab04c6facdd276fdee79df8.png][]

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

[79eb8d0612ed4566a221fbadcfbc1deb.png]: https://img-blog.csdnimg.cn/79eb8d0612ed4566a221fbadcfbc1deb.png
[ac8222b5d7fd4c8c9544243a8321c45e.png]: https://img-blog.csdnimg.cn/ac8222b5d7fd4c8c9544243a8321c45e.png
[7593e03d3bd14dceb82ab8d6e5960cc3.png]: https://img-blog.csdnimg.cn/7593e03d3bd14dceb82ab8d6e5960cc3.png
[4f9772f9e6cc4f65948522e39b1d1741.png]: https://img-blog.csdnimg.cn/4f9772f9e6cc4f65948522e39b1d1741.png
[03820d8b7ab04c6facdd276fdee79df8.png]: https://img-blog.csdnimg.cn/03820d8b7ab04c6facdd276fdee79df8.png