easy-mock初体验

前言

本篇教程对新手或第一次接触easy-mock的同学友好。

吐槽：第一次使用easy-mock，说实话只想快速生成一个数据API接口，然后看了一下官方文档噼里啪啦一堆不知道在说些什么，再询问了一下度娘，若干的同胞们把官方文档原本就不知道的噼里啪啦的东西又重复了一遍，老实说老壳疼。

easy-mock

一个在线模拟后台的数据平台，通过官网注册账户之后，你就可以生成一个在线的API接口，然后通过ajax或者axios就可以访问这个接口了。

生成API

在现实业务开发过程中，生成的数据肯定不是一个静态数据，也就是不管是get请求或者是post请求，服务器会根据不同的参数做逻辑判断，然后返回不同的数据。

如果业务开发过程为静态数据呢？
官方文档

post

以登录为例，当我们将username=admin&password=admin这样的数据格式通过post发送给服务器，服务器会做基本的逻辑判断，如果账号密码正确，则返回一种数据，反之亦然。
那么在easy-mock怎么体现？

{
  code: function({
    _req
  }) {
    if (_req.body.username === 'admin' && _req.body.password === 'admin') {
      return 20000
    } else {
      return 50000
    }
  },
  data: function({
    _req
  }) {
    if (_req.body.username === 'admin' && _req.body.password === 'admin') {
      return {
        token: "admin"
      }
    } else {
      return "登录账号不对" + _req.body.username
    }
  }
}

easy-mock中通过function可以做基本的逻辑判断，通过_req能够获取到前端传递过来的参数（文档），需要注意地是该参数类型是application/x-www-form-urlencode类型。
这也意味着，当你在easy-mock测试数据的时候，你需要更改http头部中的Content-Type信息。
废话不多说，如果你还是觉得不直观的话，那么就直接上图了。

API设置

API访问

当用easy-mock测试数据的时候，有个明显的思维误区。就是在postman中post访问内容往往都是以 username:admin password:admin的形式出现。

get

get的设置和post类似，不同点在于esay-mock对请求参数的获取，具体设置代码如下：

{
  code: function({
    _req
  }) {
    if (_req.query.token === 'admin') {
      return 20000
    } else {
      50000
    }
  },
  data: function({
    _req
  }) {
    if (_req.query.token === 'admin') {
      return {
        roles: [
          "admin"
        ],
        name: "admin",
        avatar: "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
      }
    } else {
      return "登录失败"
    }
  }
}