基于Vue+node.js+Mysql实现分页功能及动态渲染按钮qq37021136的博客-

基于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("https://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("https://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