浅谈easy-mock 最好的备胎没有之一

时间 2019-11-06

标签浅谈 easy mock 最好没有之一繁體版

原文原文链接

引言

　　今天咱们来聊聊Mock，随着互联网发展，这两年先后端分离的开发模式兴起，Mock也从以住的幕后走上了台面，让更多的人而得知，之前传统的开发方式Mock大多局限在后端人员接触较多一些。前端

　　Mock已是老生常谈了，网上一搜索就不少，各位前辈们都讲的很到位，但今天我只讲它——easy-mock。node

　　为何会忽然来聊它，这个就说来话长了，我的简介里就说过，专一于分享工做中遇到的坑，但这一次不是个人坑，来源于QQ群友（# 若是您有想知道的故事，而正好我也会，那么就由我为您讲出来吧，欢迎留言哦 # ），请看下图：
git

这里是 @IT·平头哥联盟，我是 首席填坑官— 苏南,用心分享作有温度的攻城狮。

什么是Mock

　　什么是Mock?? Mock其实就是真实数据存在以前，即调试期间的代替品，是个虚拟的存在，用人话讲它就是个备胎，如女生长的好看，追她的人多，但又不是很满意但也不拒绝，在本身心仪的小哥哥出现以前，一直吊着你😂！
github

如何Mock数据？

不要告诉我 new 一个哦，对象能够 new，备胎可new不出来呢🤫；
方法一：最low的方式将 Mock 数据写在代码里、json文件里；
方法二：利用 Charles 、Fiddler等代理工具，将 URL 映射到本地文件；
方法三：本地起 Mock Server，即mockjs，有点麻烦每次修改了后还要重启服务，nodemon能解决，但开的东西多了，电脑卡出翔，维护也麻烦；
方法四：规范些的公司本身已经集成了一套mock数据体系；
重点来了：easy-mock一个在线 Mock 平台，活儿好又性感是你备胎的最佳选择。
固然优秀的你可能还有不少其余的方式，欢迎补充。

//mock 基本使用示例
import Mock from "mockjs";
Mock.mock({
    "code": 0,
    "message": "请求成功",
    "data|20": [{
        "name": "@cname",//cname 中文，name 英文
        "userId": "@id",
        "lastDate": "@datetime"
    }]
})

什么是easy-mock，能给咱们带来什么？

Easy Mock 是一个可视化，而且能快速生成模拟数据的持久化服务，
Easy Mock 支持基于 Swagger 建立项目，以节省手动建立接口的时间；
简单点说：Easy Mock就是一个在线建立mock的服务平台，帮你省去你配置、安装、起服务、维护、多人协做Mock数据不互通等一系列繁琐的操做，它能在不用1秒钟的时间内给你所要的一切，呼之即来、挥之即去的2018最优秀备胎没有之一，彻底不用担忧负任何责任哦。
更多优势它在等你去发现哦……

深刻浅出 - 简介

就跟人同样长的再好看，了解事后才懂，同样东西也是如何，谁用谁知道；
Easy Mock支持团队协做，也能够是我的项目，
如下以我的项目为例，与多人协做没有区别，只是少了成员邀请；

深刻浅出 - Mock语法回顾

@ip -> 随机输出一个ip；
@id -> 随机输出长度18的字符，不接受参数；
"array|1-10" -> 随机输出1-10长度的数组，也能够直接是固定长度；
"object|2" -> 输出一个两个key值的对象，
"@image()" 返回一个占位图url，支持size, background, foreground, format, text；
等等，这里就再也不一一介绍。

深刻浅出 - 建立一个接口

它的写法，跟Mock.js如出一辙,上面代码已经展现过，更多示例
使用Easy Mock建立一个接口，请看下图：

深刻浅出 - 高阶用法 Function

在线编辑，它也能支持 function ，
是否是很优秀，能获取到所有请求头，可让咱们像写在js里同样写逻辑，写运算，
固然它确定是还有不少局限性的，如并不支持ES6，
有一点须要注意的是 function 里要写传出Mock对象，不能直接@...，
来看示例：

对象	描述
Mock	Mock 对象
_req.url	得到请求 url 地址
_req.method	获取请求方法
_req.params	获取 url 参数对象
_req.querystring	获取查询参数字符串(url中?后面的部分)，不包含 ?
_req.query	将查询参数字符串进行解析并以对象的形式返回，若是没有查询参数字字符串则返回一个空对象
_req.body	当 post 请求以 x-www-form-urlencoded 方式提交时，咱们能够拿到请求的参数对象
...	_req.cookies、ip、host等等，`我只是一个代码的搬运`，更详细请看这里

//简单模拟登陆，根据用户传入的参数，返回不一样逻辑数据
{
  defaultName:function({_req}){
    return _req.query.name;
  },
  code: function({_req}){
    return this.defaultName ? 0 : -97;
  },
  message: function({_req}) {
    return this.defaultName ? "登陆成功" : "参数错误";
  },
  data: function({_req,Mock}){
    return this.defaultName ? {
      token: Mock.mock("@guid()"),
      userId: Mock.mock("@id(5)"),
      cname: Mock.mock("@cname()"),
      name: Mock.mock("@name()"),
      avatar: Mock.mock("@image(200x100, #FF6600)"),
      other:"@IT·平头哥联盟-首席填坑官∙苏南 带你再谈Mock数据之easy-mock"
    }:{}
  }
}

深刻浅出 - 在线调试

再优秀的工程师写出的代码也同样要测试，没有人敢说本身的代码无Bug，
Easy Mock 它是真的懂你的，已经为你准备好了，接口编写好后，立马就能让你测试，
是否是以为很棒棒呢？？若是是你本身本地写mock数据，你须要重启服务、手动写参数、可能还须要整个测试页，
知道你已经很是饥渴迫切的想要知道，具体的调试方式了：
看不清吗？？已经为你备好在线调试连接，支持POST、GET、PUT等方式，因gif图加载比较大，就不一一演示了

结尾：

　　天下无不散之宴席，又到说再见的时候了，以上就是今天苏南为你们带来的分享，您GET到了吗？Easy Mock更多强大之处本身去折腾吧，#用心分享作有温度的攻城狮#，但愿今天的分享能给您带来些许成长，若是以为不错记得点个赞哦，，顺便关注下方公众号就更棒了呢，每周为您推最新分享👇👇。面试

浅谈easy-mock 最好的备胎没有之一

更多文章：