vue+springboot实现分页

1、方法1（简单）、

可参照Element-UI的官方分页

   //返回数据即可
   @GetMapping
    public CommonResult getListCourse() {
        List<EduCourse> list = eduCourseService.list(null);
        return  CommonResult.success().data("list", list);
    }

  <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      v-show="list.total>0"   //返回数据data值大于0时，展示
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>

 export default {
 data() {
      return {
        list:null, //查询之后接口返回集合
        page: 1, // 当前页，
        limit: 10,
        total: 0,
        currentPage4
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      getList(){
       course.getListCourse()
          .then(response=>{
            this.list=response.data.list  //返回成功的数据返回至list集合中
          }) //请求成功
          .catch(error=>{
            console.log(error)
          })  //请求失败
      },
    },
   }

2、方法2、

   	//Java部分的主要实现的业务逻辑
    public Map<String, Object> getTeacherFrontList(Page<EduTeacher> pageTeacher) {
        QueryWrapper<EduTeacher> wrapper = new QueryWrapper<>();
        wrapper.orderByDesc("id");
        Page<EduTeacher> teacherPage = baseMapper.selectPage(pageTeacher, wrapper);
        List<EduTeacher> teacherRecords = teacherPage.getRecords();
        long total = teacherPage.getTotal();
        long current = teacherPage.getCurrent();
        long pages = teacherPage.getPages();
        boolean next = teacherPage.hasNext();
        long size = teacherPage.getSize();
        boolean previous = teacherPage.hasPrevious();
        Map<String, Object> teacherMap = new HashMap<>();
        teacherMap.put("items",teacherRecords);
        teacherMap.put("total",total);
        teacherMap.put("current",current);
        teacherMap.put("size",size);
        teacherMap.put("hasNext",next);
        teacherMap.put("hasPrevious",previous);
        teacherMap.put("pages",pages);
        return teacherMap;
    }

 //JS部分的主要实现业务逻辑
  <div>
          <div class="paging">
            <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
            <a
              :class="{undisable: !teacherData.hasPrevious}"
              href="#"
              title="首页"
              @click.prevent="gotoPage(1)">首</a>
            <a
              :class="{undisable: !teacherData.hasPrevious}"
              href="#"
              title="前一页"
              @click.prevent="gotoPage(teacherData.current-1)">&lt;</a>
            <a
              v-for="page in teacherData.pages"
              :key="page"
              :class="{current: teacherData.current == page, undisable: teacherData.current == page}"
              :title="'第'+page+'页'"
              href="#"
              @click.prevent="gotoPage(page)">{{ page }}</a>
            <a
              :class="{undisable: !teacherData.hasNext}"
              href="#"
              title="后一页"
              @click.prevent="gotoPage(teacherData.current+1)">&gt;</a>
            <a
              :class="{undisable: !teacherData.hasNext}"
              href="#"
              title="末页"
              @click.prevent="gotoPage(teacherData.pages)">末</a>
            <div class="clear"/>
          </div>
        </div>



		<script>
		export default {
		    asyncData({ params, error }) {
		    return teacher.getTeacherList(1, 8).then(response => {
		      console.log("teacher数据",response.data.data);
		      return { teacherData: response.data.data }
		    });
		  },
		    methods:{
		      gotoPage(page){
		        teacher.getTeacherList(page, 8)
		        .then(response => {
		          this.teacherData = response.data.data
		        })
		      }
		    }
		};
		</script>


//请求的js部分
 getTeacherList(current,limit) { //查询讲师列表
    return request({
      url: `/eduservice/teacherfront/getTeacherFrontList/${current}/${limit}`,
      method: 'get'
    })
  },