0、 如何使用server-mock？
server-mock是一款 nodejs 命令行工具，用于搭建 web服務(wù)器，模擬網(wǎng)站后端。方便前端開發(fā)者 Mock 數(shù)據(jù)。
- 下載安裝nodejs
- 打開終端(windows用戶打開GitBash)，執(zhí)行
npm install -g server-mock
如果安裝太慢，也可執(zhí)行
npm install -g server-mock --registry=https://registry.npm.taobao.org
- mock init 可創(chuàng)建范例文件，會生成一個router.js文件
- 在終端 cd到你的文件所在的文件夾；執(zhí)行mock start可將當前文件夾路徑作為根目錄啟動一個 web服務(wù)器；在瀏覽器輸入 http://localhost:8080/xxx.html
- router.js該文件是接收并處理后端請求的文件(可認為是網(wǎng)站的后端)
1、ajax 是什么？有什么作用？
- ajax是什么？
Ajax 是對Asynchronous JavaScript + XML 的簡寫。運用非標準的 XMLHttpRequest 對象，并配合服務(wù)器端的 Script 進行通信。異步發(fā)送并接收各種形式的數(shù)據(jù)，其中包括 XML、HTML 和 text 文本。且無須更新整個頁面。如此便能通過使用者的事件更新頁面的一小部分。 - Ajax特點？
Ajax通過JavaScript發(fā)送請求、接受服務(wù)器傳來的數(shù)據(jù)，然后操作DOM將新數(shù)據(jù)對網(wǎng)頁的某部分進行更新。
Ajax的核心是XMLHttpRequest對象
2、前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？
- 前后端開發(fā)聯(lián)調(diào)需要注意事項：
1、約定接口數(shù)據(jù)：包括接口名稱,前端需要傳的查詢數(shù)據(jù)格式，后臺返回的數(shù)據(jù)格式，請求方式(get/post/...)；2、根據(jù)約定生成接口文檔 - mock數(shù)據(jù)方式：
使用nodejs搭建服務(wù)器，如安裝server-mock，在項目所在的根目錄創(chuàng)建router.js文件，修改router.js代碼，添加方法模擬接收前端請求，并返回數(shù)據(jù)。
3、點擊按鈕，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來之前防止重復(fù)點擊?
var btn=document.querySelector(".btn button");
var input=document.querySelector(".btn input");
var isDataArrive=true; //添加數(shù)據(jù)到達狀態(tài)，初始狀態(tài)為true
btn.addEventListener("click",function(){
if(!isDataArrive) return; //假如isDataArrive為false,說明xhr.readyState還未到第4步，直接返回
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
if(xhr.status===200||xhr.status===304){
var friends=JSON.parse(xhr.responseText);
....
}
else console.log("出錯了");
isDataArrive=true;
}
};
xhr.open("get","/friends?username="+input.value,true);
xhr.send();
isDataArrive=false; //設(shè)置isDataArrive為false
});
4、實現(xiàn)加載更多的功能，效果范例323，后端在本地使用server-mock來模擬數(shù)據(jù)
(mission 12)
