使用server-mock
1.安裝nodejs
2.打開(kāi)gitbash,執(zhí)行npm install -g server-mock
使用：搭建web服務(wù)器
- 在終端cd到你的文件所在的文件夾
- 執(zhí)行
mock start可將當(dāng)前文件夾路徑作為根目錄啟動(dòng)一個(gè)web服務(wù)器 - 在瀏覽器中輸入http://localhost:8080/xx.html
題目1： ajax 是什么？有什么作用？
Ajax(Asynchronous JavaScript + XML)是一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的開(kāi)發(fā)技術(shù)，利用Ajax可以向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而無(wú)須卸載頁(yè)面，會(huì)帶來(lái)更好的用戶(hù)體驗(yàn)。
Ajax特點(diǎn)：
- Ajax通過(guò)JavaScript發(fā)送請(qǐng)求、接受服務(wù)器傳來(lái)的數(shù)據(jù)，然后操作DOM將新數(shù)據(jù)對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
- Ajax的核心是XMLHttpRequest對(duì)象
題目2： 前后端開(kāi)發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？
前后端開(kāi)發(fā)聯(lián)調(diào)需要注意事項(xiàng)：
- 約定接口數(shù)據(jù)：包括接口名稱(chēng),前端需要傳的查詢(xún)數(shù)據(jù)格式，后臺(tái)返回的數(shù)據(jù)格式，請(qǐng)求方式(get/post/...)
- 根據(jù)約定生成接口文檔
mock數(shù)據(jù)方式：
使用nodejs搭建服務(wù)器，如安裝server-mock，在項(xiàng)目所在的根目錄創(chuàng)建router.js文件，修改router.js代碼，添加方法模擬接收前端請(qǐng)求，并返回?cái)?shù)據(jù)。
3：點(diǎn)擊按鈕，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來(lái)之前防止重復(fù)點(diǎn)擊?
添加一個(gè)判斷數(shù)據(jù)是否到來(lái)的isDataArrive變量，4中有實(shí)現(xiàn)。
4：實(shí)現(xiàn)加載更多的功能，效果范例312，后端在本地使用server-mock來(lái)模擬數(shù)據(jù)
//router.js
app.get('/loadMore', function(req, res) {
var curIdx = req.query.index
var len = req.query.length
var data = []
for(var i = 0; i < len; i++) {
data.push('新聞' + (parseInt(curIdx) + i))
}
setTimeout(function(){
res.send(data);
},3000);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
加載更多
</title>
<style>
ul,li{
margin: 0;
padding: 0
}
#ct li{
list-style:none;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
cursor:pointer;
}
#load-more{
display: block;
margin: 10px auto;
text-align: center;
cursor: pointer;
}
#load-more img{
width: 40px;
height: 40px;
}
.btn{
display: inline-block;
height: 40px;
line-height: 40px;
width: 80px;
border: 1px solid #E27272;
border-radius: 3px;
text-align: center;
text-decoration: none;
color: #E27272;
}
.btn:hover{
background: green;
color: #fff;
}
</style>
</head>
<body>
<ul id="ct">
</ul>
<a id="load-more" class="btn" href="javascript:void(0);">
加載更多
</a>
</body>
<script>
var btn = document.querySelector("#load-more");
var ct = document.querySelector('#ct');
var pageIndex = 0;
var isDateArrive = true; //防止多次點(diǎn)擊造成的多次請(qǐng)求
btn.onclick = function(){
if(!isDateArrive){
return;
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200 || xhr.statue === 304){
var result = JSON.parse(xhr.responseText);
var fragment = document.createDocumentFragment();
for(var i=0;i<result.length;i++){
var li = document.createElement('li');
li.innerText = result[i];
fragment.appendChild(li);
}
ct.appendChild(fragment);
pageIndex += 5;
isDateArrive = true;
}
else {
console.log('出錯(cuò)了');
}
}
}
xhr.open('get','/loadMore?index='+pageIndex+'&length=5',true);
xhr.send();
isDateArrive = false;
}
</script>
</html>
