Paging query separated from front and back ends, based on Springboot + vue + Element Ui implementation process with source code

Paging query
The emergence of paging query in the front end is to allow pages with a certain amount of data to be displayed more reasonably. At the same time, combined with the paging component provided by Element Ui, it can do more operations on the data displayed on the front end.

Front-end code

  <!--分页组件-->
 <div style="display:inline-block;">
          <el-pagination
            style="padding-top: 15px"
            @size-change="findSizeChange"
            @current-change="findPage"
            :current-page.sync="pageNow"
            :page-sizes="[2,4,6,8,10]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>

 export default {
    
    
    name: "Users",
    data() {
    
    
      return {
    
    
       //每页显示的条数
        size: 4,
        //总条数
        total: 0,
        //当前页码
        pageNow: 1,
        },
        methods: {
    
    
      //用来处理每页显示记录发生变化的方法
      findSizeChange(size) {
    
    
        console.log("当每页条数改变的时候" + size);
        //将val赋值给size
        this.size = size;
        //重新去后台查询数据
        this.findAll()
      },
      //当前页码改变的时候
      findPage() {
    
    
        console.log(this.pageNow)
        this.findAll(this.pageNow, this.size)
      },
        //查询所有用户信息
      findAll(page, size) {
    
    
        var that = this
        //首次进入该页面时会是created调用这个方法，是不会进行传参的
        page = page ? page : this.pageNow;
        size = size ? size : this.size;
        // this.$http.get("http://localhost:8989/zs/user/findByPage?pageNow="+page+"&pageSize="+size).then(response => {
    
    
        this.$http.get("http://localhost:8989/zs/user/findByPage",{
    
    
          params:{
    
    
            pageNow:page,
            pageSize:size
          }}
        ).then(response => {
    
    
          that.userList = response.data.users;
          that.total = response.data.total;
        }).catch(err => {
    
    
          console.log(err )
        })
        // console.log("显示用户所有信息" + response.data.users);
      },

Back-end code (here, Springboot is taken as an example)

dao layers

//分页查询
    List<UserInfo> findByPage(@Param("start") Integer start,@Param("rows") Integer rows);

mapper file

<!--分页查询-->
    <select id="findByPage" resultType="UserInfo">
        select id,  username, sex, dept,   birth, email,  phoneNumber, status, address,  name
        from vue.zs_userinfo limit #{start},#{rows}
    </select>

Service

public interface UserInfoService {
    
    
//分页查询
  List<UserInfo> findByPage(Integer start, Integer rows);
}
@Service
@Transactional
public class UserInfoServiceImpl implements UserInfoService {
    
    
 @Override
	public List<UserInfo> findByPage(Integer pageNow, Integer rows) {
    
    
    	int start = (pageNow-1)*rows;
    	return userInfoDao.findByPage(start,rows);
  }

Controller

  /**
  * 分页查询方法
  */
 @GetMapping("findByPage")
 public Map<String, Object> findByPage(String pageNow,String pageSize) {
    
    
   Map<String, Object> result = new HashMap<>();
   int page = 0;
   int size = 0;
   try {
    
    
     page = Integer.parseInt(pageNow);
     size = Integer.parseInt(pageSize);
   } catch (NumberFormatException e) {
    
    
     e.printStackTrace();
     /*result("error","类型转换错误！".);*/
   }

   //这里我们做一个初始化页面定义，防止空指针错误
   page = page <= 0 ? 1 : page;
   size = size <= 0 ? 4 : size;
   List<UserInfo> users = userInfoService.findByPage(page, size);
   Long totals = userInfoService.findTotals();
   result.put("users", users);
   result.put("total", totals);
   return result;
 }

Effect picture