30秒内实现前端数据mock

前言

数据mock除了mock.js、或者使用花瓶等抓包工具引入本地json文件的方法还是有啥子呢？？是不是感觉这些方法使用起来都很麻烦，主要还都不能模拟真实的数据增删改查，哥哥们别急，接下来介绍的这个方法，可以完全模拟真实的接口调用情况。

JSON Server

JSON Server顾名思义就是，起一个本地服务，你可以指定一个 json 文件作为 api 的数据源。官网宣称可以在30秒内用0代码实现一个RESTful风格的 API，并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。按照RESTful风格的查询方式对接口进行操作，就可以查询到想要的结果.

开搞

1.首先全局安装一下JSON Server.

npm install -g json-server

2.在项目中创建json文件.

{
  "users": [
    {
      "name": "寒冰",
      "id": 1
    },
    {
      "name": "剑姬",
      "id": 2
    }
  ]
}

3.启动JSON Server,到这里确实如官网所说，用了不到30秒（主要网速要好…）

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "json_server": "json-server --watch db.json --port 3001"
  }

4.可以去网页上访问一下看看,很神奇…

5.使用postman对接口进行操作.

比如我想要修改id为1的数据项的name,接下来神奇的事情发生了

对接口进行patch方法之后，我本地的json文件里面的数据也被修改了！！当然也可以使用post增加数据，delete删除数据等等

配合mockjs使用

配合mockjs生成模拟数据

npm install mockjs --save-dev

2.新建一个js文件

var Mock = require('mockjs')

module.exports = () => {
    var data = Mock.mock({
        'list|1-10': [{
            'id|+1': 1
        }],
        'goods|1-10': [{
            'name|+1': [
                'iphone',
                'xiaomi',
                '一加',
                '罗老师'
            ]
        }]
    })
    return data
}

3.运行server

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "json_server": "json-server --watch db.json --port 3001",
    "json_server_mock": "json-server mock.js --port 3001"
  },

完！！