vant pagination 分页(前后端分别介绍)(适合初学者阅读)

目录

前端：(vue)

1.关于vant安装与组件局部引入不做解释，具体介绍参考官网：https://youzan.github.io/vant/#/zh-CN/quickstart

2.基础用法

3.举例说明（实现一个小说章节列表）

1.定义一个div，用于放置章节内容

2.定义分页组件

3.在js中定义事件methods

后端：（node）

---

前端：(vue)

1.关于vant安装与组件局部引入不做解释，具体介绍参考官网：https://youzan.github.io/vant/#/zh-CN/quickstart

2.基础用法

在需要的vue文件中引入：

<van-pagination v-model="page" :total-items="24" :items-per-page="5" />

参数介绍

参数	说明
v-model	当前页码
page-count	总页数
total-items	总记录数

(官网还有很多，这里不过多介绍)

事件

        

change

当页码发生改变时触发

change事件说明：不管是点击（页码）还是点击（上下页）都会触发，并且，此事件有隐藏的实参：page（点击的页码）

3.举例说明（实现一个小说章节列表）：

1.定义一个div，用于放置章节内容

  <div class="zhangjielist">
      <div
        class="zhangjie"
        v-for="item in list"
        :key="item.id"
      >
        {{ item.chapter }}
      </div>
    </div>

介绍：

        v-for中的 list 为章节列表，

        :key：设置唯一值，具体为什么查阅百度，

        {{item.chapter}}：每一个章节列表元素的内容

css（less）：

.zhangjielist {
  height: 18.6667rem;
  margin: 0.5333rem 0;
}
.zhangjie {
   border-bottom: 1px solid rgb(226, 226, 243);
   padding: 0 0.5333rem;
   height: 0.9333rem;
   margin-right: 0.8rem;
   line-height: 0.9333rem;
}

一定要给div设置高度，不然当章节过多，会找不到下面的分页组件

2.定义分页组件

   <van-pagination
      v-model="page"
      :total-items="number_page"
      :items-per-page="perpage"
      @change="pagechange"
    />

介绍：

        page为页码初始值为1

        number_page为总页数初始值为0

        perpage为每页展示数量初始值为20

        @change="pagechange" ：虽说change事件有实参，但是可以省略不写

3.在js中定义事件methods

created() {
  this.location();
},
methods: {
    async location() {
      const { data } = await this.$axios.get(
        `http://127.0.0.1:3000/api/lista/${this.page}`
      );
      this.list = data;
      const { data: res } = await this.$axios.get(
        `http://127.0.0.1:3000/api/list/`
      );
      this.number_page = res.length / this.perpage;
    },
    async pagechange(page) {
      this.page = page;
      const { data } = await this.$axios.get(
        `http://127.0.0.1:3000/api/lista/${this.page}`
      );
      this.list = data;
    },
  },

介绍：

1.根据页码查询20个章节（因为我们每一页要展示20个章节）

请求接口：http://127.0.0.1:3000/api/lista/:id

返回值：对象，其中值：data为20个章节组成的数组

2.查询所有章节（此时我们查询所有章节只是为了获取所有章节的长度length）

请求接口：http://127.0.0.1:3000/api/list

返回值：对象，其中值：data为所有章节组成的数组

3.this.list=data

page传给接口（初始值值为1），当接口返回内容时，让list等于返回内容，会在页面初次渲染时展示1-20的章节内容，

4.this.number_page = res.length / this.perpage;

将总页数 等于 全部章节的长度 除以 每一页的长度

 5.pagechange(page)

change事件，page为点击的页数，上面有介绍

6.this.page = page;

让当前页码等于点击后的页码数，实时更新数据

后端：（node）

这里只展示需要调用的接口

router.get('/api/list', function (req, res) {
    let sel = 'select * from a'
    db.query(sel, function (err, results) {
        if (err) return
        res.send(results)
    })
})
router.get('/api/lista/:id', function (req, res) {
    var numbera = 0
    var number_end = 0
    if (Number(req.params.id) === 1) {
        numbera = Number(req.params.id)
        number_end = numbera + 19
    } else {
        numbera = Number(req.params.id + '0') * 2 - 20
        number_end = numbera + 20
    }
    let sel = `select * from a where id between ${numbera} and ${number_end}`
    db.query(sel, function (err, results) {
        if (err) return
        res.send(results)
    })
})

介绍：

1.接口：http://127.0.0.1:3000/api/list

当调用此接口在数据库中查询章节表内容，并全部返回

章节表展示：

2.接口：http://127.0.0.1:3000/api/lista/:id

(1)

 if (Number(req.params.id) === 1) {
        numbera = Number(req.params.id)
        number_end = numbera + 19
    } else {
        numbera = Number(req.params.id + '0') * 2 - 20
        number_end = numbera + 20
    }

解释：

        当传到后端的id为1时，让开始值为1，让结束值为1+19=20

        当传到后端的id不为1时，让开始值为值的10倍*2-20（这里不了解可以自己演算一下）

（2）

let sel = `select * from a where id between ${numbera} and ${number_end}`

解释：

        查询id值为开始值到结束值内的所有数据

(3)

db.query(sel, function (err, results) {
        if (err) return
        res.send(results)
    })

当查询结果为err为查询失败，返回return，并结束查询

当查询成功，返回前端此20条章节数据