一般在項(xiàng)目的開發(fā)中拇囊，前端有的時(shí)候需要自己寫模擬數(shù)據(jù)接口進(jìn)行本地的研發(fā)和測試机隙。整個(gè)過程大概是：
- 和后端確認(rèn)數(shù)據(jù)格式
- 根據(jù)數(shù)據(jù)格式，前端本地模擬數(shù)據(jù)（
文章介紹的就是這個(gè)過程） - 等后端給到真正數(shù)據(jù)接口地址，替換本地模擬數(shù)據(jù)接口
本文主要記錄：1聚唐、模擬數(shù)據(jù)庆锦；2捅位、前端調(diào)用數(shù)據(jù)接口；3搂抒、demo
一艇搀、安裝json-sever環(huán)境（安裝過程可以參考json-server）
npm install -g json-server
注意：
解決npm install安裝慢的問題！Ｇ缶А焰雕！
原因：npm的服務(wù)器在國外，所以安裝比較慢芳杏，我們可以切換到國內(nèi)服務(wù)器矩屁，如淘寶辟宗。
解決方案：
切換到國內(nèi)源：
npm install -gd express --registry=[http://registry.npm.taobao.org](http://registry.npm.taobao.org)
使用--registry制定鏡像服務(wù)器，為了每次安裝使用--registry吝秕，可以使用以下命令長久設(shè)置：
npm config set registry http://registry.npm.taobao.org
二泊脐、創(chuàng)建有數(shù)據(jù)的.json文件
my.json：
{
"posts": [{
"id": 1,
"title": "json-server",
"author": "typicode"
}],
"comments": [{
"id": 1,
"body": "leaf test1"
},
{
"id": 2,
"body": "leaf test2"
},
{
"id": 3,
"body": "leaf test3"
},
{
"id": 4,
"body": "leaf test4"
}
],
"profile": {
"name": "typicode"
}
}
注意：文件名字、數(shù)據(jù)可以自定義烁峭，但文件名以.json結(jié)尾
三容客、啟動(dòng)JSON數(shù)據(jù)服務(wù)器
1、啟動(dòng)JSON數(shù)據(jù)服務(wù)器：
json-server --watch json文件名
或json-server --watch json文件 --port 指定端口
json-server --watch my.json
或
json-server --watch my.json --port 9999
注意：要在.json所在的路徑開啟约郁，有時(shí)候關(guān)閉了需要再次啟動(dòng)
2缩挑、啟動(dòng)json-server之后，會(huì)返回一個(gè)接口地址鬓梅，根據(jù)目錄打開就可以訪問了调煎。
訪問my.json數(shù)據(jù)：
四、前端使用$.ajax()方法調(diào)用JSON數(shù)據(jù)
// JQuery以JSON方式提交數(shù)據(jù)到服務(wù)端
$.ajax({
url: "http://172.17.20.51:9000/daily/daily/test.json",//啟動(dòng)服務(wù)器后返回的借口地址
type: "get", //接口請(qǐng)求方式get或post
contentType: "application/json; charset=utf-8",
success: function(data) {
...
//接口返回成功之后你要調(diào)用的方法
}
});
五己肮、demo參考(移動(dòng)端)
可以F12調(diào)成手機(jī)模式士袄，上滑可以加載my.json數(shù)據(jù)（用的是上面提到的my.json文件，數(shù)據(jù)也是一樣的）
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>移動(dòng)端下滑事件谎僻，上滑模擬數(shù)據(jù)</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>leaf</h1>
<script>
var startx, starty;
//獲得角度
function getAngle(angx, angy) {
return Math.atan2(angy, angx) * 180 / Math.PI;
};
//根據(jù)起點(diǎn)終點(diǎn)返回方向 1向上 2向下 3向左 4向右 0未滑動(dòng)
function getDirection(startx, starty, endx, endy) {
var angx = endx - startx;
var angy = endy - starty;
var result = 0;
//如果滑動(dòng)距離太短
if (Math.abs(angx) < 2 && Math.abs(angy) < 2) {
return result;
}
var angle = getAngle(angx, angy);
if (angle >= -135 && angle <= -45) {
result = 1;
} else if (angle > 45 && angle < 135) {
result = 2;
} else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
} else if (angle >= -45 && angle <= 45) {
result = 4;
}
return result;
};
var count = 0;
var api_data;
function add() {
var newleaf = document.createElement("h1");
// JQuery以JSON方式提交數(shù)據(jù)到服務(wù)端
$.ajax({
url: " http://localhost:9999/comments", //啟動(dòng)服務(wù)器后返回的借口地址
type: "get", //接口請(qǐng)求方式get或post
contentType: "application/json; charset=utf-8",
success: function(data) {
console.log(data);
api_data = data;
var ret = api_data[count].id + api_data[count].body;
var newtext = document.createTextNode(ret);
newleaf.appendChild(newtext);
document.body.appendChild(newleaf);
count++;
}
});
};
//手指接觸屏幕
document.addEventListener("touchstart", function(e) {
startx = e.touches[0].pageX;
starty = e.touches[0].pageY;
}, false);
//手指離開屏幕
document.addEventListener("touchend", function(e) {
var endx, endy;
endx = e.changedTouches[0].pageX;
endy = e.changedTouches[0].pageY;
var direction = getDirection(startx, starty, endx, endy);
switch (direction) {
case 0:
// alert("未滑動(dòng)娄柳！");
break;
case 1:
// alert("向上！")
add();
break;
case 2:
// alert("向下艘绍！")
break;
case 3:
// alert("向左赤拒！")
break;
case 4:
// alert("向右！")
break;
default:
}
}, false);
</script>
</body>
</html>
本文主要是將自己以前的學(xué)習(xí)過程筆記整理記錄诱鞠，在這過程中參考了很多大神們的文章和資料挎挖，最后慢慢理解使用，文章或demo難免有錯(cuò)或不完善航夺，望其他大神可以指出糾正蕉朵，共同進(jìn)步！
參考資料：
json-server
JQuery以JSON方式提交數(shù)據(jù)到服務(wù)端
