搭建mock.js服务

前端请求接口数据需要后端提供支持，但在项目前期，会遇到没有接口给前端人员测试的尴尬。
这时候mock.js就能起到关键作用，它能启动一个模拟返回接口数据的服务。

只需几步就能搭建一个mock.js服务：

1.全局安装mock-server

npm i @shymean/mock-server -g

2. 创建并配置mock.js文件
   在电脑上创建一个mock.js文件，如D:/mock/mock.js，在文件中填入如下内容：

// _mock.js
// 对应的rurl会被中间件拦截，并返回mock数据
// ANY localhost:8888/
Mock.mock('/', {
  data: [],
  msg: "hello mock",
  "code|1-4": 1,
})

// 可以mock指定的请求方法
// POST localhost:8888/test
Mock.mock('/test', 'POST', {
  data: [],
  msg: "hello mock",
  "code|1-4": 1,
})

// 默认回调名称 callback
Mock.mock("/test2", {
  code: 0,
  msg: "hello from mock jsonp2",
  data:[
    {
      "id|1000-9999": 1,
      "score|1-800": 800,//随机生成1-800的数字
      "rank|1-100":  100,//随机生成1-100的数字
      "stars|1-5": 5,//随机生成1-5的数字
      "nickname": "@cname"//随机生成中文名字
    },
    {
      "id|1000-9999": 1,
      "score|1-800": 800,//随机生成1-800的数字
      "rank|1-100":  100,//随机生成1-100的数字
      "stars|1-5": 5,//随机生成1-5的数字
      "nickname": "@cname"//随机生成中文名字
    }
  ]
});

Mock.mock(/auth/, (ctx) => {
  let {uid} = ctx.query
  if (uid) {
      return {
          code: 200,
          msg: 'success',
          data: {
            uid,
            "name": 'haiyan'
          }
      }
  } else {
      return {
          code: 401,
          msg: 'no uid',
      }
  }
})

3.启动服务

mock -p 8888 -f D:/mock/mock.js

4.大功告成
一切准备就绪，打开浏览器，输入地址 http://localhost:8888 ，就能看到返回的数据了。

http://localhost:8888 

如果你有服务器，可以按以上方式配置一套，还可以分享给你的小伙伴们一起使用。

有关mock的配置，请查阅官网http://mockjs.com/