使用EasyMock

官网：

新建项目：

创建接口：

创建数据：

{
  "data": {
    "code": 0,
    "msg": "success",
    "data|5": [{
      "id": "@id",
      "weixinId": "@word(5)",
      "phone": /^1[385][1-9]\d{8}/,
      "name": "@cname",
      "index|+1": 0
    }],
    "page": 1,
    "total": 5
  }
}

请求：

复制链接在浏览器中打开：

结果：

项目中请求方式：

1、ajax直接请求

2、vue-cli构建的项目，可以在index.js文件中配置

代码：

'/huizhi': {
  target: 'https://easy-mock.com/mock/5cd3c61dce208f78bbb55b8c/huiwu',
  changeOrigin: true,
  pathRewrite: {
    '^/huizhi': ''
  }
}

位置：

请求：

axios.get('/huizhi/table').then((res) => {
    console.log(res);
});

注意：这里huizhi后面的地址是你自己定义的；

mock语法

生产的mock 常用预发详解：这里的预发使用的是 mock.js 的语法。mock js 点击：http://mockjs.com/

但是现在 easymock 上语法有少量数据不能够兼容；

{
  "cname": "@cname",//中文人名
  "id": "@id",//生成20 位数字
  "title": "@ctitle",//中文title
  "city": "@city",//中文城市
  "ip": "@ip",//ip 地址
  "email": "@email",//email
  "url": "@url",//url
  "cfirst": "@cfirst",//姓名，姓
  "clast": "@clast",//姓名，名
  "cword": "@cword('123456')",//123456 从中选取一个字符
  "csentence": "@csentence(1,5)",//文字文段
  "csentence5": "@csentence(5)",//文字文段
  "cparagraph": "@cparagraph(1,3)",//文字文段
  "string": "@string(11)",//输出11 个字符长度的字符串
  "float": "@float(0,10)",//0 到 10 的浮点数
  "int": "@integer(60,70)",//60 到 70 之间的整数
  "boolean": "@boolean",//boolean 类型 true,false
  "array|1-3": [{
    "id": "@integer(1,10)",//整数 1到10 取整数
    "name": "cname"
  }], // 数组（随机 1 到3个）
  "array_sort_add|+1": ["1", "2", "3"],//数组1，2，3轮询输出
  "boolean|1-2": true,//boolean 类型 true,false
  "actionType|1": ['click_url', 'open_resource_detail', 'open_resource_search'],
  "payload": function() {
      var returnClickUrl = {
        "linkUrl": "http://tob.zhisland.com/apph5"
      };
      var returnResourceDetail = {
        "resourceId": "606"
      };
      var returnResourceSearch = {
        "keyWords": "",
        "tagCategory": "1",
        "tag": "1"
      };
      var s = this.actionType == 'click_url' ? returnClickUrl : this.actionType == 
'open_resource_detail' ? returnResourceDetail : returnResourceSearch;
      return s;
   } // function 返回设置返回的数据
}

常用的mock占位

占用符	解释
@cname	中文人名
@id	身份证id
@title	中文title
@city	中文城市
@ip	ip 地址
@email	email
@url	url地址
@csentence(1,5)	生成1到5个字的中文句子
@cparagraph	生成中文段落
@string(11)	输出11 个字符长度的字符串
@float(0,10)	0 到 10 的浮点数
@integer(60,70)	60 到 70 之间的整数
@boolean	boolean 类型 true,false

官网：

新建项目：

创建接口：

创建数据：

项目中请求方式：

mock语法

猜你喜欢