[demo]完整的无限懒加载demo(后台到前台)

demo目标：

实现完整的懒加载demo，包括后台服务器数据到前台展示。

提示：

文末有彩弹，如果急于看结果的同学可以直接到移步到最后一段。

环境：

win10+XAMPP(开启Apache和MySql)+VSCode

框架：

Vue

基本思路：

一，搭建数据库---MySql；

二，查询数据库数据并返回到前端---php；

三，前端请求获取数据---js vue axios；

四，前端展示数据，并依据页面滚动情况反复触发请求获取更多数据---html css js vue-infinite-scroll；

具体实现：

一，搭建数据库---MySql：

#重建数据库newxiaoa

    SET NAMES UTF8;

    DROP DATABASE IF EXISTS newxiaoa;

    CREATE DATABASE newxiaoa CHARSET=UTF8;

    USE newxiaoa;

#栏目1 

    #创建表content:

    #cid--内同容排序id

    #content--主内容块

    #isDel--是否删除

    #isDan--是否是危险内容

    CREATE TABLE content(

        cid INT PRIMARY KEY AUTO_INCREMENT,

        content VARCHAR(1024) NOT NULL,

        isDel INT NOT NULL DEFAULT 0,

        isDan INT NOT NULL DEFAULT 1

    );

#插入一段测试内容-1

INSERT INTO content VALUES(

    '',

    '中学时暗恋班花，被同班的女汉子知道了，

    连忙请她保密，本以为向来爽朗不羁的她是不屑告密的，

    结果丫飞快的把我出卖了。 后来想想，也可能是我拜托她的方式不对，

    不该说什么这是男人之间的约定。',

        0,

        0

);    

#插入一段测试内容-2

INSERT INTO content VALUES(

    '',

    '中学时暗恋班花，被同班的女汉子知道了，

    连忙请她保密，本以为向来爽朗不羁的她是不屑告密的，

    结果丫飞快的把我出卖了。 后来想想，也可能是我拜托她的方式不对，

    不该说什么这是男人之间的约定。',

        0,

        0

); 

#插入一段测试内容-3

INSERT INTO content VALUES(

    '',

    '中学时暗恋班花，被同班的女汉子知道了，

    连忙请她保密，本以为向来爽朗不羁的她是不屑告密的，

    结果丫飞快的把我出卖了。 后来想想，也可能是我拜托她的方式不对，

    不该说什么这是男人之间的约定。',

        0,

        0

); 

#插入一段测试内容-4

INSERT INTO content VALUES(

    '',

    '中学时暗恋班花，被同班的女汉子知道了，

    连忙请她保密，本以为向来爽朗不羁的她是不屑告密的，

    结果丫飞快的把我出卖了。 后来想想，也可能是我拜托她的方式不对，

    不该说什么这是男人之间的约定。',

        0,

        0

); 

#插入一段测试内容-5

INSERT INTO content VALUES(

    '',

    '中学时暗恋班花，被同班的女汉子知道了，

    连忙请她保密，本以为向来爽朗不羁的她是不屑告密的，

    结果丫飞快的把我出卖了。 后来想想，也可能是我拜托她的方式不对，

    不该说什么这是男人之间的约定。',

        0,

        0

); 

#插入一段测试内容-6

INSERT INTO content VALUES(

    '',

    '中学时暗恋班花，被同班的女汉子知道了，

    连忙请她保密，本以为向来爽朗不羁的她是不屑告密的，

    结果丫飞快的把我出卖了。 后来想想，也可能是我拜托她的方式不对，

    不该说什么这是男人之间的约定。',

        0,

        0

);    

#插入一段测试内容-7

INSERT INTO content VALUES(

    '',

    '中学时暗恋班花，被同班的女汉子知道了，

    连忙请她保密，本以为向来爽朗不羁的她是不屑告密的，

    结果丫飞快的把我出卖了。 后来想想，也可能是我拜托她的方式不对，

    不该说什么这是男人之间的约定。',

        0,

        0

); 

#插入一段测试内容-8

INSERT INTO content VALUES(

    '',

    '中学时暗恋班花，被同班的女汉子知道了，

    连忙请她保密，本以为向来爽朗不羁的她是不屑告密的，

    结果丫飞快的把我出卖了。 后来想想，也可能是我拜托她的方式不对，

    不该说什么这是男人之间的约定。',

        0,

        0

); 

#插入一段测试内容-9

INSERT INTO content VALUES(

    '',

    '中学时暗恋班花，被同班的女汉子知道了，

    连忙请她保密，本以为向来爽朗不羁的她是不屑告密的，

    结果丫飞快的把我出卖了。 后来想想，也可能是我拜托她的方式不对，

    不该说什么这是男人之间的约定。',

        0,

        0

); 

#插入一段测试内容-10

INSERT INTO content VALUES(

    '',

    '中学时暗恋班花，被同班的女汉子知道了，

    连忙请她保密，本以为向来爽朗不羁的她是不屑告密的，

    结果丫飞快的把我出卖了。 后来想想，也可能是我拜托她的方式不对，

    不该说什么这是男人之间的约定。',

        0,

        0

);                                 

二，查询数据库数据并返回到前端---php：

<?php

  //允许跨域请求

  header('Access-Control-Allow-Origin:*');

  //链接数据库

  $conn=mysqli_connect("127.0.0.1","root","","newxiaoa",3306);

  //设置数据库字符集

  $sql="SET NAMES UTF8";

  //链接数据库并设置

  mysqli_query($conn,$sql);

  //获取前台发来的cid

  $cid=$_REQUEST["cid"];

  //定义查询语句

  $find="SELECT content FROM content WHERE cid=$cid AND isDel=0";

  //执行查询语句

  $res=mysqli_query($conn,$find);

  //抓取查询到的信息

  $row=mysqli_fetch_row($res);

  //定义返回值并赋值和抛出

  $output=[];

  $output[]=["code"=>200,"data"=>$row];

  echo json_encode($output);

三，前端请求获取数据---js vue axios；

1，安装axios

//安装：
npm install --save axios vue-axios
//main.js设置
import axios from 'axios'
Vue.prototype.$http = axios
//组件内使用
this.$http.post('http://127.0.0.1/main.php?cid=1')

 .then(res=>{

   //验证是否成功获取数据

   console.log(res);

   }).catch(error=>{

   //数据错误时的异常处理

   console.log(error);
})

2，页面内请求和处理数据：

  methods:{
    //定义请求函数
    async fetch(){
      //请求数据
      const res = await this.$http.get('http://127.0.0.1/main.php?cid='+this.num);
      //定义数据格式
      const contentAdd=[
        {
          header:{},
          body:{
            article:"",
          },
          footer:{
            viewNum:999,
            commentNum:888,
          }
        },
      ];
      //赋值
      contentAdd[0].body.article=res.data[0].data[0];
      //判断是否是第一次请求
      if(!this.content.length){
        //首次直接赋值
        this.content=contentAdd;
      }else{
        //以后获取的拼接上去
        this.content=this.content.concat(contentAdd);  
      }
    }
  },

四，前端展示数据，并依据页面滚动情况反复触发请求获取更多数据---html css js vue-infinite-scroll：
1，配置vue-infinite-scroll

//安装
npm i vue-infinite-scroll -D
//main.js中通过如下方式注册全局引用
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
//页面中使用

<div 

v-infinite-scroll="loadMore" 

infinite-scroll-disabled="switchForMore" 

infinite-scroll-distance="20">

  vue-infinite-scroll示例

</div>

2，vue-infinite-scroll的参数说明：

v-infinite-scroll="loadMore" 中的loadMore事件绑定处理函数，在达到条件(滚动到一定像素)时触发此函数。

infinite-scroll-disabled="switchForMore" 中的switchForMore===true阻止触发loadMore，反之不阻止；

3，数据获取的this.fetch()函数的触发时机：

//时机1：dom挂载时 
 mounted() {
    this.fetch();
  },
//时机2：页面滚动时
  methods:{
    loadMore(){
      alert('触发loadMore'+this.num);
      this.num+=1;
      //数据库目前只有10条数据,mounted时已加载一条了
      if(this.num>9){
        this.switchForMore=true;
        return;  
      }     
      this.fetch();
    },
}

以上可以运行的代码地址如下，可以直接clone到本地参考，vue的部分在home.vue和main.js里面，sql在main.sql里面，php的在main.php里面。

demo的github地址：https://github.com/tom-wong666/xiaoa.git

博文通览提示：

点击此超链接跳转到Tom哥的博文分类和索引页面 

Tom哥的博客博文分类和索引页面地址：https://blog.csdn.net/tom_wong666/article/details/84137820