原创声明
本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
简书主页：https://www.jianshu.com/u/4876275b5a73
邮箱：job_tom@foxmail.com
CSDN ID：tom_wong666
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();
},
}
