模拟数据接口
2018-11-09 本文已影响0人
前端葱叶
一般在项目的开发中，前端有的时候需要自己写模拟数据接口进行本地的研发和测试。整个过程大概是：
- 和后端确认数据格式
- 根据数据格式，前端本地模拟数据（
文章介绍的就是这个过程） - 等后端给到真正数据接口地址，替换本地模拟数据接口
本文主要记录：1、模拟数据；2、前端调用数据接口；3、demo
一、安装json-sever环境（安装过程可以参考json-server）
npm install -g json-server
注意：
解决npm install安装慢的问题！！！
原因：npm的服务器在国外，所以安装比较慢，我们可以切换到国内服务器，如淘宝。
解决方案：
切换到国内源：
npm install -gd express --registry=[http://registry.npm.taobao.org](http://registry.npm.taobao.org)
使用--registry制定镜像服务器，为了每次安装使用--registry，可以使用以下命令长久设置：
npm config set registry http://registry.npm.taobao.org
二、创建有数据的.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"
}
}
注意：文件名字、数据可以自定义，但文件名以.json结尾
三、启动JSON数据服务器
1、启动JSON数据服务器：
json-server --watch json文件名
或json-server --watch json文件 --port 指定端口
json-server --watch my.json
或
json-server --watch my.json --port 9999
注意：要在.json所在的路径开启，有时候关闭了需要再次启动
2、启动json-server之后，会返回一个接口地址，根据目录打开就可以访问了。
返回接口地址.png
访问my.json数据：
访问json数据.png
四、前端使用$.ajax()方法调用JSON数据
// JQuery以JSON方式提交数据到服务端
$.ajax({
url: "http://172.17.20.51:9000/daily/daily/test.json",//启动服务器后返回的借口地址
type: "get", //接口请求方式get或post
contentType: "application/json; charset=utf-8",
success: function(data) {
...
//接口返回成功之后你要调用的方法
}
});
五、demo参考(移动端)
可以F12调成手机模式，上滑可以加载my.json数据（用的是上面提到的my.json文件，数据也是一样的）
完整代码：
<!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>移动端下滑事件，上滑模拟数据</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;
};
//根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动
function getDirection(startx, starty, endx, endy) {
var angx = endx - startx;
var angy = endy - starty;
var result = 0;
//如果滑动距离太短
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方式提交数据到服务端
$.ajax({
url: " http://localhost:9999/comments", //启动服务器后返回的借口地址
type: "get", //接口请求方式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("未滑动！");
break;
case 1:
// alert("向上！")
add();
break;
case 2:
// alert("向下！")
break;
case 3:
// alert("向左！")
break;
case 4:
// alert("向右！")
break;
default:
}
}, false);
</script>
</body>
</html>
本文主要是将自己以前的学习过程笔记整理记录，在这过程中参考了很多大神们的文章和资料，最后慢慢理解使用，文章或demo难免有错或不完善，望其他大神可以指出纠正，共同进步！
参考资料：
json-server
JQuery以JSON方式提交数据到服务端
