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

基于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

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

猜你喜欢