模拟接口的方式：json-server、mock.js

为什么要模拟接口？

项目中后端的接口往往是较晚才会出来，并且还要写接口文档，于是我们的前端的许多开发都要等到接口给我们才能进行开发。为了方便前端代码自测，提高开发效率，可以模拟生成数据进行前后端数据联调。

json-server

在使用json-server时，只需要提供一个json文件，或者写几行简单的js脚本就可以模拟出 restful API 的接口。

安装 json-server

npm install -g json-server

查看是否成功

$ json-server -v
0.14.0

使用

1.创建json文件

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

2.启动json-server服务

注意：要在当前 json 文件所处文件夹下运行终端

json-server db.json

建立服务时可指定端口号主机名等：

json-server -w 路径下的json文件 -p 端口号（默认是3000）-h 主机名（默认localhost）

之后就可以向接口发请求了：

get是获取数据、post是添加数据、put是修改数据、delete是删除数据

mock.js

前后端分离，通过随机数据，模拟各种场景。不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。数据类型丰富，支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。方便扩展，支持支持扩展更多数据类型，支持自定义函数和正则。

官网：http://mockjs.com
github：https://github.com/nuysoft/Mock/wiki  很详细的mock.js相关知识介绍

fastmock 平台

这是一个基于 mock.js 的模拟接口平台，可以让你在没有后端程序的情况下能真实地在线模拟ajax请求。地址：https://www.fastmock.site/