mysql懒加载数据_完整的无限懒加载demo(后台到前台)

原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：

笔名：来碗鸡蛋面

简书主页：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：

//允许跨域请求

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)

//页面中使用

v-infinite-scroll="loadMore"

infinite-scroll-disabled="switchForMore"

infinite-scroll-distance="20">

vue-infinite-scroll示例

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里面。