解决springboot+vue+mybatis中，将后台数据分页显示在前台，并且根据页码自动跳转对应页码信息

文章目录

• 先看效果
• 1、要考虑的问题，对数据进行分页查询
• 2、前端和后台的交互

先看效果

1、要考虑的问题，对数据进行分页查询

mapper文件这样写
从每次开始查询的位置，到每页展示的条数，

<!--    分页查询-->
    <select id="queryBookList" parameterType="Map" resultType="com.zheng.pojo.Books">
        select * from bookss limit  #{startIndex},#{pageSize}
    </select>

dao、service、serviceimpl略
看controller
关键在这边，传入的page和size是从前台改变页码到指定页

    @GetMapping("/findAll/{page}/{size}")
    public Map<String,Object> findAll(@PathVariable("page") Integer Page,@PathVariable("size") Integer size) {

 //查询所有的书籍信息

    @GetMapping("/findAll/{page}/{size}")
    public Map<String,Object> findAll(@PathVariable("page") Integer Page,@PathVariable("size") Integer size) {

        //准备数据 通过这两个参数，可以算出start   计算方法 start=size(page-1)
        int currentPage = Page;//当前是第几页
        int pageSize = size; //页面大小

        Map<String, Integer> map = new HashMap<String, Integer>();
        map.put("startIndex",(currentPage-1)*pageSize);
        map.put("pageSize",pageSize);
        List<Books> booklist =  bookService.queryBookList(map);
        HashMap<String,Object> result = new HashMap<>();
        Long totals = bookService.findTotals();
        result.put("books",booklist);
        result.put("totals",totals);
        return result;


    }

此外还要向前台传输查询到的所有的数量的个数，目的是计算根据总条数和页面大小计算出分几页。
mapper

    <select id="findTotals" resultType="Long">
        select count(*) from bookss
    </select>

dao中的方法

    //查询总数
    Long findTotals();

2、前端和后台的交互

关键部分代码：

• 这个是请求地址，页面首次加载展示的信息，默认从1开始，页面展示6条信息
• const _this = this区分对象
• resp.data.books获取后台的数据
• resp.data.totals获取后台的数据
• _this.tableData，前台数据变量
• prop="address"和后台的属性一致，获取哪个属性的信息

   created(){
      const _this = this
      axios.get('http://localhost:8181/book/findAll/1/6').then(function (resp) {
         _this.tableData = resp.data.books
        _this.total = resp.data.totals
      })
    }

分页

• :page-size="6"：自定义页面展示几条数据
• :total="total"：查询到的数据总数
  通过这两个数据就可以计数出有几个页面

    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="6"
      :total="total"

     @current-change="page">
    </el-pagination>

动态改变页面展示信息

   page(currentPage){
        const _this = this
        axios.get('http://localhost:8181/book/findAll/'+currentPage+'/6').then(function (resp) {
          _this.tableData = resp.data.books
          _this.total = resp.data.totals
        })
      }

<template>

  <div>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      fixed
      prop="bookName"
      label="书籍名称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="bookAuthor"
      label="书籍作者"
      width="120">
    </el-table-column>
    <el-table-column
      prop="price"
      label="书籍价格"
      width="120">
    </el-table-column>

    <el-table-column
      prop="address"
      label="书籍出版社"
      width="120">
    </el-table-column>

    <el-table-column
      prop="impression"
      label="印刷次数"
      width="120">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <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="6"
      :total="total"

     @current-change="page">
    </el-pagination>

  </div>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      },
      page(currentPage){
        const _this = this
        axios.get('http://localhost:8181/book/findAll/'+currentPage+'/6').then(function (resp) {
          _this.tableData = resp.data.books
          _this.total = resp.data.totals
        })
      }
    },
    created(){
      const _this = this
      axios.get('http://localhost:8181/book/findAll/1/6').then(function (resp) {
         _this.tableData = resp.data.books
        _this.total = resp.data.totals
      })
    },
    data() {
      return {
        total:null,
        tableData: []
      }
    }
  }
</script>