springboot+vue+elementUI实现分页功能

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

• 前言
• 一、前端
• 二、后端
• 总结

springboot+vue+elementUI做分页还是非常简单的，这里简单写个demo。

controller代码：

import com.example.myblog.service.TestService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.Map;

@RestController
@RequestMapping("/test")
public class TestController {

    @Autowired
    private TestService testService;

    @RequestMapping(value="/search",method={RequestMethod.GET})
    @ResponseBody
    public Map search(Integer pageNo){
        return testService.search(pageNo);
    }
}

service代码：

import java.util.Map;

public interface TestService {
    Map search(Integer pageNo);
}

serviceImpl

import com.example.myblog.mapper.TestMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.Map;

@Service
public class TestServiceImpl implements TestService{

    @Autowired
    private TestMapper testMapper;

    @Override
    public Map search(Integer pageNo) {
        Integer pageSize = 5;
        Integer startIndex = pageSize * (pageNo-1);
        Map map = new HashMap();
        map.put("data",testMapper.search(startIndex,pageSize));
        map.put("count",testMapper.searchCount());
        return map;
    }
}

mapper代码：

import com.example.myblog.pojo.Test;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;


import java.util.List;
@Mapper
public interface TestMapper {
    @Select("select * from test limit #{startIndex},#{pageSize}")
    List search(Integer startIndex,Integer pageSize);
    @Select("select count(*) from test")
    Integer searchCount();
}

数据库数据：

效果图：

利用element-UI做分页还是很简单的，查询时，得到分页数据和总数据量，传到前端赋值即可。