基于Vue+node.js+Mysql实现分页功能
不多BB ,直接上干货
代码如下:
<!-- HTML部分切换页码的循环 -->
<ul class="yema">
<li @click="kko(index,item.id)" v-for="(item,index) in fenye" :key="item.id">{{item}} </li>
<!-- 给fenye数组直接循环出来,并且点击的时候传过去两个值(下标和数据库里的ID值) -->
</ul>
</div>
以下是我data里面定义的yema属性:
data() {
return {
fenye:[],
<!--注意,由于之后我用了动态渲染按钮里面数字的方法,所以给这个值定义为空,如若不使用,直接在数组里面写12345等数字就能简单实现分页-->
};
},
逻辑层(核心部分代码):
Node里面操作数据库的部分(后台)
var express = require('express');
var router = express.Router();
let db=require('../db')
router.post('/', function(req, res, next) {
let sql='SELECT * FROM bingli ';
db.base(sql,null,(result)=>{
res.send(result)
});
})
module.exports = router;
献上数据库的内容:
重点来了(Vue的前端部分:)
//分页功能
kko(neirong){
this.$axios.post("http://localhost:3000/Bingli")
.then(response => {
this.infos= response.data.splice(neirong*12,12)
// 接收的neirong即为点击Li的下标 前端点击的时候,如果点击1则渲染数据库里面从0开始的12条数据
});
},
是的,宁没看错,就需要这么简简单单的一行代码
主要的思路是:
拿到后端接口所发过来的所有数据,利用kko(neirong)里面传过来的下标值来动态渲染页面上的数据,拿我的Vue页面来举例,如下图
同样,点击2的时候传过去的下标是1,则渲染的数据为从12个开始的之后12个数据。
点击3的时候传过去的下标是2,同理渲染的是从第24个开始的之后12个数据
如果看不懂,可以看图(图自己画的,我是灵魂画师)
渲染页面的数据就好像一个多边形的柱状体,只有我可以看到它时,我才让它显示对应的数据
例如我现在只能看到123,那么456的数据我就不进行渲染
通过splice(点击的li的下标,每个分页有多少个数据)来进行动态渲染
之前有看到一个问题,数据库里面如果有十万个数据,
如何实现功能的同时不让页面崩溃(因为渲染的数据过多)
使用这个分页的话,可以很大程度上减少浏览器数据渲染的压力,再利用Lazyload相信可以很好的解决这个问题
好了。主要的分页功能就到这了 以下是根据数据库里面数据的长度来动态渲染分页的按钮的代码
created() {
this.bingli();
this.jak();
}
};
首先在钩子函数里面先调用jak函数
jak(){
this.$axios.post("http://localhost:3000/Bingli")
.then(response => {
var mu= response.data.length;
for(var i=0;i<=mu;i++){
if(Math.ceil(i%12)==0 ){
this.fenye.push(Math.ceil(i/12)+1)
}
}
})
},
同样,为了减少接口请求。这俩用的是同一个接口,这个逻辑更加简单易懂。
简单的循环。如果循环的时候除以页数没有余数,就让页面渲染一个按钮,
我的数据库里面有49个数据,分别会在12,24,36,48,49(因为49/12大于4,会向上取整为5)
对应的我页面上将会渲染5个按钮,由于我设置了+1,内容分别会是12345,
如下图:
崔战神 2020年6月25日21:58:49