原創(chuàng)聲明
本文系作者辛苦碼字所得，歡迎分享和轉載，但請在明顯位置注明作者的如下信息：
筆名：來碗雞蛋面
簡書主頁：http://www.reibang.com/u/4876275b5a73
郵箱：job_tom@foxmail.com
CSDN ID：tom_wong666
demo目標：
實現(xiàn)完整的懶加載demo，包括后臺服務器數(shù)據(jù)到前臺展示。
提示：
文末有彩彈蟋定，如果急于看結果的同學可以直接到移步到最后一段。
環(huán)境：
win10+XAMPP(開啟Apache和MySql)+VSCode
框架：
Vue
基本思路：
一草添，搭建數(shù)據(jù)庫---MySql驶兜；
二，查詢數(shù)據(jù)庫數(shù)據(jù)并返回到前端---php远寸；
三抄淑，前端請求獲取數(shù)據(jù)---js vue axios；
四驰后，前端展示數(shù)據(jù)肆资，并依據(jù)頁面滾動情況反復觸發(fā)請求獲取更多數(shù)據(jù)---html css js vue-infinite-scroll；
具體實現(xiàn)：
一灶芝，搭建數(shù)據(jù)庫---MySql：
#重建數(shù)據(jù)庫newxiaoa
SET NAMES UTF8;
DROP DATABASE IF EXISTS newxiaoa;
CREATE DATABASE newxiaoa CHARSET=UTF8;
USE newxiaoa;
#欄目1
#創(chuàng)建表content:
#cid--內(nèi)同容排序id
#content--主內(nèi)容塊
#isDel--是否刪除
#isDan--是否是危險內(nèi)容
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
);
#插入一段測試內(nèi)容-1
INSERT INTO content VALUES(
'',
'中學時暗戀班花郑原，被同班的女漢子知道了唉韭，
連忙請她保密，本以為向來爽朗不羈的她是不屑告密的犯犁，
結果丫飛快的把我出賣了属愤。 后來想想，也可能是我拜托她的方式不對酸役，
不該說什么這是男人之間的約定住诸。',
0,
0
);
#插入一段測試內(nèi)容-2
INSERT INTO content VALUES(
'',
'中學時暗戀班花，被同班的女漢子知道了簇捍，
連忙請她保密只壳，本以為向來爽朗不羈的她是不屑告密的，
結果丫飛快的把我出賣了暑塑。 后來想想吼句，也可能是我拜托她的方式不對，
不該說什么這是男人之間的約定事格。',
0,
0
);
#插入一段測試內(nèi)容-3
INSERT INTO content VALUES(
'',
'中學時暗戀班花惕艳，被同班的女漢子知道了，
連忙請她保密驹愚，本以為向來爽朗不羈的她是不屑告密的远搪，
結果丫飛快的把我出賣了。 后來想想逢捺，也可能是我拜托她的方式不對谁鳍，
不該說什么這是男人之間的約定。',
0,
0
);
#插入一段測試內(nèi)容-4
INSERT INTO content VALUES(
'',
'中學時暗戀班花劫瞳，被同班的女漢子知道了倘潜，
連忙請她保密，本以為向來爽朗不羈的她是不屑告密的志于，
結果丫飛快的把我出賣了涮因。 后來想想，也可能是我拜托她的方式不對伺绽，
不該說什么這是男人之間的約定养泡。',
0,
0
);
#插入一段測試內(nèi)容-5
INSERT INTO content VALUES(
'',
'中學時暗戀班花，被同班的女漢子知道了奈应，
連忙請她保密澜掩，本以為向來爽朗不羈的她是不屑告密的，
結果丫飛快的把我出賣了杖挣。 后來想想肩榕，也可能是我拜托她的方式不對，
不該說什么這是男人之間的約定程梦。',
0,
0
);
#插入一段測試內(nèi)容-6
INSERT INTO content VALUES(
'',
'中學時暗戀班花点把，被同班的女漢子知道了，
連忙請她保密屿附，本以為向來爽朗不羈的她是不屑告密的郎逃，
結果丫飛快的把我出賣了。 后來想想挺份，也可能是我拜托她的方式不對褒翰，
不該說什么這是男人之間的約定。',
0,
0
);
#插入一段測試內(nèi)容-7
INSERT INTO content VALUES(
'',
'中學時暗戀班花匀泊，被同班的女漢子知道了优训，
連忙請她保密，本以為向來爽朗不羈的她是不屑告密的各聘，
結果丫飛快的把我出賣了揣非。 后來想想，也可能是我拜托她的方式不對躲因，
不該說什么這是男人之間的約定早敬。',
0,
0
);
#插入一段測試內(nèi)容-8
INSERT INTO content VALUES(
'',
'中學時暗戀班花，被同班的女漢子知道了大脉，
連忙請她保密搞监，本以為向來爽朗不羈的她是不屑告密的，
結果丫飛快的把我出賣了镰矿。 后來想想琐驴，也可能是我拜托她的方式不對，
不該說什么這是男人之間的約定秤标。',
0,
0
);
#插入一段測試內(nèi)容-9
INSERT INTO content VALUES(
'',
'中學時暗戀班花绝淡，被同班的女漢子知道了，
連忙請她保密抛杨，本以為向來爽朗不羈的她是不屑告密的够委，
結果丫飛快的把我出賣了。 后來想想怖现，也可能是我拜托她的方式不對茁帽，
不該說什么這是男人之間的約定。',
0,
0
);
#插入一段測試內(nèi)容-10
INSERT INTO content VALUES(
'',
'中學時暗戀班花屈嗤，被同班的女漢子知道了潘拨，
連忙請她保密，本以為向來爽朗不羈的她是不屑告密的饶号，
結果丫飛快的把我出賣了铁追。 后來想想，也可能是我拜托她的方式不對茫船，
不該說什么這是男人之間的約定琅束。',
0,
0
);
二扭屁，查詢數(shù)據(jù)庫數(shù)據(jù)并返回到前端---php：
<?php
//允許跨域請求
header('Access-Control-Allow-Origin:*');
//鏈接數(shù)據(jù)庫
$conn=mysqli_connect("127.0.0.1","root","","newxiaoa",3306);
//設置數(shù)據(jù)庫字符集
$sql="SET NAMES UTF8";
//鏈接數(shù)據(jù)庫并設置
mysqli_query($conn,$sql);
//獲取前臺發(fā)來的cid
$cid=$_REQUEST["cid"];
//定義查詢語句
$find="SELECT content FROM content WHERE cid=$cid AND isDel=0";
//執(zhí)行查詢語句
$res=mysqli_query($conn,$find);
//抓取查詢到的信息
$row=mysqli_fetch_row($res);
//定義返回值并賦值和拋出
$output=[];
$output[]=["code"=>200,"data"=>$row];
echo json_encode($output);
三，前端請求獲取數(shù)據(jù)---js vue axios涩禀；
1料滥，安裝axios
//安裝：
npm install --save axios vue-axios
//main.js設置
import axios from 'axios'
Vue.prototype.$http = axios
//組件內(nèi)使用
this.$http.post('http://127.0.0.1/main.php?cid=1')
.then(res=>{
//驗證是否成功獲取數(shù)據(jù)
console.log(res);
}).catch(error=>{
//數(shù)據(jù)錯誤時的異常處理
console.log(error);
})
2，頁面內(nèi)請求和處理數(shù)據(jù)：
methods:{
//定義請求函數(shù)
async fetch(){
//請求數(shù)據(jù)
const res = await this.$http.get('http://127.0.0.1/main.php?cid='+this.num);
//定義數(shù)據(jù)格式
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);
}
}
},
四艾船，前端展示數(shù)據(jù)葵腹，并依據(jù)頁面滾動情況反復觸發(fā)請求獲取更多數(shù)據(jù)---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的參數(shù)說明：
v-infinite-scroll="loadMore" 中的loadMore事件綁定處理函數(shù)践宴，在達到條件(滾動到一定像素)時觸發(fā)此函數(shù)。
infinite-scroll-disabled="switchForMore" 中的switchForMore===true阻止觸發(fā)loadMore爷怀，反之不阻止阻肩；
3，數(shù)據(jù)獲取的this.fetch()函數(shù)的觸發(fā)時機：
//時機1：dom掛載時
mounted() {
this.fetch();
},
//時機2：頁面滾動時
methods:{
loadMore(){
alert('觸發(fā)loadMore'+this.num);
this.num+=1;
//數(shù)據(jù)庫目前只有10條數(shù)據(jù),mounted時已加載一條了
if(this.num>9){
this.switchForMore=true;
return;
}
this.fetch();
},
}
