Consulta de paginación separada de front-end y back-end, basada en el proceso de implementación Springboot + vue + Element Ui con código fuente

Consulta
de paginación La aparición de la consulta de paginación en el front-end es permitir que las páginas con una cierta cantidad de datos se muestren de manera más razonable. Al mismo tiempo, combinado con el componente de paginación proporcionado por Element Ui, puede realizar más operaciones en los datos. se muestra en la parte frontal.

Código de front-end

  <!--分页组件-->
 <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);
      },

Código de back-end (aquí, Springboot se toma como ejemplo)

capas de dao

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

archivo de mapeador

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

Servicio

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);
  }

Controlador

  /**
  * 分页查询方法
  */
 @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;
 }

Imagen de efecto