一般在项目的开发中,前端有的时候需要自己写模拟数据接口进行本地的研发和测试。整个过程大概是:
- 和后端确认数据格式
- 根据数据格式,前端本地模拟数据(
文章介绍的就是这个过程
) - 等后端给到真正数据接口地址,替换本地模拟数据接口
本文主要记录: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之后,会返回一个接口地址,根据目录打开就可以访问了。
访问my.json数据:
四、前端使用$.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文件,数据也是一样的)
完整代码:
移动端下滑事件,上滑模拟数据
leaf
本文主要是将自己以前的学习过程笔记整理记录,在这过程中参考了很多大神们的文章和资料,最后慢慢理解使用,文章或demo难免有错或不完善,望其他大神可以指出纠正,共同进步!
参考资料:
json-server
JQuery以JSON方式提交数据到服务端