vue+elenemt分页+springboot

1、编写模板

2、发请求调接口

export default {
  data() {
      tableData: [], // 数据列表
      keyWord: '',//搜素框的值
      total: 0, // 数据总数
      pageNum: 0,//当前页码
      pageSize: 10,//每页显示的条数
    },
      //生命周期钩子函数在组件挂载后被调用，它会执行 selectUser(1, 10, "") 方法，用于初始化数据并展示第一页的用户数据。
    mounted() {
    this.selectUser(1, 10, "");
  },


  methods: {

    //分页方法、当页码发生变化是被调用
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.selectUser();
    },
    //上一页
    prevClick(pageNum) {
      this.pageNum = pageNum
      this.selectUser();
    },
     //下一页
    nextClick(pageNum) {
      this.pageNum = pageNum
      this.selectUser();
    },
    //当改变每页显示条数时被调用
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.selectUser();
    },
    //查询用户数据的方法
    selectUser() {
      this.$axios({
        method: 'post',
        url: "http://localhost:8080/api/user/selectUser",
        data: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          keyWord: this.keyWord,
        }
      }).then((res) => {
        let result = res.data.data;
        this.tableData = result.list;
        this.total = result.total;
      })
    },
}

3、后端返回数据

1.编写实体类

注意： User extends Page

package com.example.goods_admin.entity;

public class Page {
    private int pageNum;

    private int pageSize;

    private String keyWord;

    public Page() {

    }

    public String getKeyWord() {
        return keyWord;
    }

    public void setKeyWord(String keyWord) {
        this.keyWord = keyWord;
    }

    public Page(int pageNum, int pageSize, String keyWord) {
        this.pageNum = pageNum;
        this.pageSize = pageSize;
        this.keyWord = keyWord;
    }

    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }
}

2、UserController

@RestController
//@RequestMapping用于将 HTTP 请求映射到控制器方法上
@RequestMapping("/user")
public class UserController {

    @Autowired
    Userservice userservice;

        @PostMapping("/selectUser")
    //   @RequestBody 用于将 HTTP 请求的内容（或者请求体）绑定到方法的参数上。
    public Result selectUser(@RequestBody User user) {
        return userservice.selectUser(user);
    }
}

3、Userservice接口

public interface Userservice {
      Result selectUser(User user);

}

4、Service层（UserserviceImpl）

@Service
public class UserserviceImpl implements Userservice {

    @Autowired
    UserMapper userMapper;

     @Override
    public Result selectUser(User user) {
        int pageNum = user.getPageNum()==0?1:user.getPageNum();
        int pageSize = user.getPageSize()==0?10:user.getPageSize();

        //1、开启分页查询
        PageHelper.startPage(pageNum,pageSize);

        //2、查询结果
        List userList  = userMapper.seleteUser(user);

        //3、封装结果
        PageInfo userPageInfo = new PageInfo<>(userList);

        //4、返回
        return Result.succeed("查询成功",userPageInfo);

    }



}

4、（mapper接口）UserMapper

@Mapper
public interface UserMapper {
    List seleteUser(User user);
}

5、xml

    
        
        
        
        
        
        
        
    

    
        select * from user
            
                
                    userName like concat('%', #{keyWord}, '%')