vuejs之springboot+vue+element-ui之分页显示相关信息

接：

vue与springboot进行通讯：https://www.cnblogs.com/xiximayou/p/12336033.html

vue与element-ui搭建后台管理页面：https://www.cnblogs.com/xiximayou/p/12336619.html

一、在后端中对返回的json数据进行分页处理

package com.gong.springbootvue.controller;

import com.gong.springbootvue.entity.User;
import com.gong.springbootvue.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    UserRepository userRepository;

    @ResponseBody
    @RequestMapping("/findAll/{page}/{size}")
    public Page<User> getAll(@PathVariable("page") Integer page,
                             @PathVariable("size") Integer size) {
        System.out.println(page);
        System.out.println(size);
        PageRequest pageRequest = PageRequest.of(page,size);
        return userRepository.findAll(pageRequest);
    }

}

其中page表示从第几页开始，size表示每页显示几页。

运行之后：

 

二、在前端页面中接收并分页显示

（1）首先去element官网上找到表格样式和分页样式，然后进行修改，比如修改PageOne.vue

<template>
  <div>
    <el-table :data="tableData"
              border
              style=" 100%">
      <el-table-column fixed
                       prop="id"
                       label="编号"
                       width="150">
      </el-table-column>
      <el-table-column prop="username"
                       label="姓名"
                       width="120">
      </el-table-column>
      <el-table-column prop="age"
                       label="年龄"
                       width="120">
      </el-table-column>
      <el-table-column prop="gender"
                       label="性别"
                       width="80">
      </el-table-column>
      <el-table-column prop="email"
                       label="邮箱"
                       width="160 ">
      </el-table-column>
      <el-table-column prop="hobby"
                       label="爱好"
                       width="120">
      </el-table-column>
      <el-table-column prop="introduce"
                       label="介绍"
                       width="140">
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="120">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)"
                     type="text"
                     size="small">查看</el-button>
          <el-button type="text"
                     size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   layout="prev, pager, next"
                   :page-size="pageSize"
                   :total="total"
                   @current-change="page">
    </el-pagination>
  </div>

</template>

<script>
export default {
  methods: {
    handleClick (row) {
      console.log(row);
    },
    page (currentPage) {
      const that = this;
      axios.get('http://localhost:8181/user/findAll/' + (currentPage - 1) + '/3')
        .then(function (response) {
          console.log(response);
          that.tableData = response.data.content;
          that.pageSize = response.data.size;
          that.total = response.data.totalElements;
        })
    },
  },
  data () {
    return {
      pageSize: 0,
      total: 0,
      tableData: [],
    }
  },
  created () {
    const that = this;
    axios.get('http://localhost:8181/user/findAll/0/3')
      .then(function (response) {
        //console.log(response);
        that.tableData = response.data.content;
        that.pageSize = response.data.size;
        that.total = response.data.totalElements;
      })
  },
}
</script>

created()方法在页面刷新时就会调用，此时将返回的数据绑定给tableData，同时将页数size赋给pageSize，将总记录数赋给total。

给el-pagination绑定一个current-change事件，该事件使用page方法。

最后效果：