分页--前后端联调

2024-02-06 16:11:53

前面，我们写了element Table+Pagination实现分页https://blog.csdn.net/hejingfang123/article/details/118875170，但是，只是静态页面，后面，我们写了真分页后端实现--Mybatishttps://blog.csdn.net/hejingfang123?spm=1001.2101.3001.5343，接下来，轮到前后端联调了---

<script>
export default {
  data() {
    return {
      query: {
        //模糊查询的文件名
        name: "",
        //默认展示第一页
        pageNum: 1,
        //默认每页显示10条记录
        pageSize: 10,
        //定义排序规则:根据id降序排列
        orderBy: "id desc",
      },
      //定义数据总条数
      total: 0,
      //用于接收调用接口查到的数据
      dataList: []
     }
   }
   //页面最先调用查询文件列表方法
   created() {
     this.handleSearch();
   },

  methods: {
    // 获取文件列表
    handleSearch() {
      //查询列表分为两种情况，一个是查询所有，一个是根据名称查询；查询所有加载页面的时候就查询了，默认页码是第一页，在data里我们定义了
      //如果是根据文件名搜索的话，刚开始没有页码，我们给根据名称查询设置一个类型，档类型为commonSearch时，设置默认页码是1；
      //(根据文件名称查询列表没有初始页码的坏处：如果我先查询所有列表，然后切换到第五页，这时候，由于我们没有给根据文件名称搜索赋初始页码，它会按照刚刚查询所有的页码查询，刚好根据名称没有那么多数据，就会造成查询为空的情况)
      //后面切换页码的时候可以根据handleCurrentChange方法获取页码
       if (type=="commonSearch") {
        this.query.pageNum = 1;
      }
      //查询前先清空list，不然会一直往集合里累加数据
      this.tableData = [];
      //定义后端公共地址
      let template = this.GLOBAL.BASE_URL;
      //拼接后端全部地址
      const url = template + "videoInformation/selectInformations/";
      //封装到一个body体里面
      const body = JSON.stringify(this.query);
      //调用接口
      this.$http.post(url, JSON.parse(body)).then((res) => {
        //接收返回值--文件列表
        this.dataList = res.data.data.informationData;
        //接收返回值--文件总数
        this.total = res.data.data.informationCount;
        //循环文件列表中的每一条
        for (let i = 0; i < this.dataList.length; i++) {
          //new一个新对象
          var o = new Object();
          //给对象的变量们赋值
          o.id = this.dataList[i].id;
          o.name = this.dataList[i].name;
          o.type = this.dataList[i].type;
          o.length = this.dataList[i].length;
          o.url = this.dataList[i].url;
          //将0对象puch到table组件的tableData中
          this.tableData.push(o);
        }
      });
    },
    //切换页码事件，每次切换页码，都调用分页查询接口
    handleCurrentChange(val) {
      //获取当前页数
      this.query.pageNum = val;
      //根据页数真分页查询数据
      this.handleSearch();
    },
    //添加问题方法，选中某一行的按钮，能获取当前选中行的数据
    addQuestion(row) {
      this.drawer = true,
      this.information = row
    }
}
</script>

另外，要注意一个问题：当我们应用分页而且可以支持删除的时候，如果我们删除页面的最后一条数据或者其他情况，页码可能会出现问题，不过，下面的三段代码可以完美的帮我们避免：

//定义一个总页数=(数据总条数-1)/每页条数
//Math.ceil():向上取整
//假设数据总条数为21，每页10条数据，总页数=向上取整(21/10)=3
//删除一条数据，数据总条数=21-1=20，总页数=向上取整(20/10)=2
const totalPage = Math.ceil((this.totalQuestion - 1) / this.queryQuestion.pageSize);
//当前页数=当前页数>总页数?总页数:当前页数(如果当前页数>总页数，当前页数就是总页数，否则还是当前页数)
//假设删除之前当前页码为最后一页，也就是第3页
//删除之后总页数就变成了上面我们算出的2
//因此，当前页就变成了第2页
this.queryQuestion.pageNum =this.queryQuestion.pageNum > totalPage? totalPage: this.queryQuestion.pageNum;
//当前页数=当前页数<1?1:当前页数(如果当前页数<1,当前页数就是1，否则还是当前页数)
//这个场景是针对于只有一条数据，我们将它删除，此时我们将当前页码设置为1
this.queryQuestion.pageNum =this.queryQuestion.pageNum < 1 ? 1 : this.queryQuestion.pageNum;

首先，肯定是有一个前提的，就是我们会每次删除完之后就查询一次

下面我们来假设一个场景，一共有21条数据，每页10条数据，我们现在在第3页，第3页一共1条数据，我们将这条数据删除，如果没有上面的三句话，大家猜测一下会出现什么情况？

总数据为20条，当前页码还在第三页，第三页数据为空。但是正常情况是不是这一页的数据删除完了，就会自动切换到上一页呢，如何实现呢？

首先用到了第一条：

总页数为（21-1）/10=2

const totalPage = Math.ceil((this.totalQuestion - 1) / this.queryQuestion.pageSize);

然后是第二条：

当前页数3>总页数2，因此当前页数应该为2

this.queryQuestion.pageNum =this.queryQuestion.pageNum > totalPage? totalPage: this.queryQuestion.pageNum;

这样，就自动切换到第二页啦啦啦啦啦！

总结：第一次使用分页，目前我们实现的功能只是最基础的，优化空间还是超级大的，比如每页大小可以根据用户选择来定义；数据很多，可以定义更多搜索方式等等等等。

首次做，在此做下小小的总结，留个纪念，望大家多多指正~~~

码农公寓

相关文章