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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了基于Vue+node.js+Mysql实现分页功能及动态渲染按钮，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2486字，纯文字阅读大概需要4分钟。

内容图文

基于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实现分页功能及动态渲染按钮全部内容，希望文章能够帮你解决基于Vue+node.js+Mysql实现分页功能及动态渲染按钮所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---