模拟数据接口

一般在项目的开发中，前端有的时候需要自己写模拟数据接口进行本地的研发和测试。整个过程大概是：

• 和后端确认数据格式
• 根据数据格式，前端本地模拟数据（文章介绍的就是这个过程）
• 等后端给到真正数据接口地址，替换本地模拟数据接口

本文主要记录：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文件，数据也是一样的）

完整代码：

    
    
    
    
    





    
leaf
    

本文主要是将自己以前的学习过程笔记整理记录，在这过程中参考了很多大神们的文章和资料，最后慢慢理解使用，文章或demo难免有错或不完善，望其他大神可以指出纠正，共同进步！
参考资料：
json-server
JQuery以JSON方式提交数据到服务端