文章目录

先看效果
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>

解决springboot+vue+mybatis中，将后台数据分页显示在前台，并且根据页码自动跳转对应页码信息的相关教程结束。