一、json-server相关

1、全局安装json-server
npm install -g json-server
2、在cmder所激活的目录下新建一个文件 jsonserver.json

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "简书 该账户已被查封"
    }
  ],
  "comments": {
    "data": [
      {
        "log_date": "2018-01-25",
        "sum_user_ticket": 10,
        "sum_team_ticket": 20,
      },
      {
        "log_date": "2018-01-26",
        "sum_user_ticket": 19,
        "sum_team_ticket": 50,
      }
    ],
    "errmsg": "",
    "errno": "0"
  },
  "profile": {
    "name": "简书 该账户已被查封"
  }
}

3、执行json-server --watch jsonserver.json 即可打开相应的网址，看到对应的数据；

image.png

注意：这里有个坑，就是如果只是请求这些数据时（也就是要这些数据时）应该使用get请求方式而不是post等请求方式，否则这里面的数据会做相应变化，因为json-server支持这些请求方式且会做相应处理；

二、 mock.js相关

1、安装mock.js
npm install mockjs
2、创建mock.js 文件
mock.js 文件 我弄了两种生成数据的方式，一种是根据模版生成模拟数据，另一种是利用js 循环加Mock.Random 随机生成数据：

var Mock = require('mockjs');
// console.log(Mock);
// Mock.setup({
//   timeout: '1200-1600' // 设置响应时间 毫秒
// });
let Random = Mock.Random;
let template = {
  'title': 'Syntax Demo',
  'string1|1-10': '★',
  'string2|3': 'value',
  'number2|1-100': 100,
  'number4|123.1-10': 1,
  'boolean2|1-2': true,
  'object2|2': {
    '310000': '上海市',
    '320000': '江苏省',
    '330000': '浙江省',
    '340000': '安徽省'
  },
  'array1|1': ['AMD', 'CMD', 'KMD', 'UMD'],
  'array2|1-10': ['Mock.js'],
  'array3|3': ['Mock.js'],
  'function': function () {
    return this.title
  },
  'errmsg': "json-server或mock.js错误",
  'errno': "0",
};
var templateed = Mock.mock(template); // 根据模版生成 模拟数据

module.exports = function () {
  var res = {
    nottemplate: {
      data: [],
      errmsg: "json-server或mock.js错误",
      errno: "0"
    },
    template: templateed,
  };

  var imagesArray = [1, 2, 3].map(x => Random.image('200x100', Random.color(), Random.word(2, 6)));

  for (var i = 0; i < 5; i++) {
    res.nottemplate.data.push({
      id: i,
      title: Random.cword(8, 20), // 随机生成中文汉字
      desc: Random.cparagraph(0, 10).substr(0, 40),// 随机生成一段中文文本
      tag: Random.cword(2, 6),
      views: Random.integer(100, 5000), // 整数
      images: imagesArray.slice(0, Random.integer(1, 3)), // 1-3 个图片地址数组
      date: Random.date(),
      float: Random.float(60, 100),// 小数
      integer: Random.integer(60, 100),//整数
      range: Random.range(60, 65),// 从60到100的数值
      image: Random.image('200x100', '#396'),// 图片大小、图片颜色,
      color: Random.color(),
      county: Random.county(true), //县
      log_date: Random.date(),
      sum_team: Random.integer(1, 100),
      add_team_sum: Random.integer(1, 100),
      team_avg_people: Random.float(1, 100),
      active_team_sum: Random.integer(1, 100),
      team_avg_active_people: Random.float(1, 100),

    })
  }

  return res
}

3、执行 json-server --watch mock.js -p 3001
提示下，这里我使用了-p 指定了端口3001，因为之前json-server 默认使用3000端口 ，为了避免冲突及报错 所以换了个端口；

其实除了mock.js，还有强大的国外的 faker.js

三、使用 Zan Proxy 的mock数据

image.png
Zan Proxy 的mock数据没有json-server和mock.js强大，具体我就不介绍了 ，可见官方文档， https://youzan.github.io/zan-proxy/book/
另外值得一提的是，这里有个坑，就是安装证书后https://youzan.github.io/zan-proxy/book/quick-start/cert.html 使用SwitchyOmega
做代理时， windows系统谷歌浏览器会 提示“ 您的连接不是私密连接”
image.png
此时，是因为你没有安装证书或者证书安装步骤不正确，正确的步骤是 image.png image.png image.png

当时我也是参考了 使用Charles代理工具导致电脑无法正常访问网站（您的连接不是私密连接）

四、推荐扩展资料

json-server 支持过滤数据、排序、分隔、检索等功能，可以看官方文档或下面的资料
1、 用JSON-server模拟REST API
2、 介绍两大神器！——使用json-server和faker.js模拟REST API