前端使用easymock模拟数据请求

作者：admin
2020-03-29 23:48:33
368人已阅读

前端经常遇到的一个场景就是需要请求后台数据,尤其是小程序，vue单页面应用等这种前后端分离，数据驱动的应用，数据基本都是通过ajax请求后台接口来的。
如果你是一个人自己做项目，没有后端小哥哥给接口文档，怎么办，这个时候easymock可以很好的解决接口的问题。

----

### 基本使用
* 在easymock注册账号新建项目
![](http://cdn.liqunonline.cn/blog/2020/21/29/1585496806291.png)
* 新建接口
![](http://cdn.liqunonline.cn/blog/2020/21/29/1585496844444.png)
* 普通用法，填写接口地址，请求类型，直接填写json数据，通过预览直接可以看到请求后的数据
![](http://cdn.liqunonline.cn/blog/2020/21/29/1585496870478.png)

### 使用mock.js创建随机数据
- 使用mock.js创建随机数据 mock.js的用法查看[mockjs示例](http://mockjs.com/examples.html# "mockjs示例")
![](http://cdn.liqunonline.cn/blog/2020/21/29/1585496898325.png)

```javascript
{
"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 返回设置返回的数据
}

```
### 响应请求
- 通过相应请求参数的不同给出不同的数据结果
#### 简单响应
```javascript
	{
	   cover_true: function({
			 _req
		   }) {
			 return 'http://iph.href.lu/640x640?fg=fff&bg=09f&text=商品' + _req.query.id
		   },
	}
```
> get请求使用_req.query;post请求使用_req.body拿到请求参数
### 分页
```javascript
	{
  "count": 50,
  "total_page": 5,
  "page": function({
    _req,
    Mock
  }) {
    return _req.query.page
  },
  "list": function({
    _req,
    Mock
  }) {
    let i = 0,
      _data = [],
      page = _req.query.page, // 页数
      cateid = _req.query.categoryid,
      pageSize = _req.query.pageSize, // 返回的条数
      len = (50 - pageSize * (page - 1)) < pageSize ? (50 - pageSize * (page - 1)) : pageSize;
    for (i; i < 50; i++) {
      _data.push(
        Mock.mock({
          "id": (i + 1),
          "trueCover": 'http://iph.href.lu/640x640?fg=fff&bg=09f&text=商品' + i,
          "price|200-9999": 9999,
          "shop_price": 0,
          "categoryid": '@pick(["1","2","3"])',
          "name": '@ctitle',
          "is_collage": '@pick(["0", "1"])',
          "postdate": ' @datetime("yyyy-MM-dd HH:mm:ss")'
        })
      );
    }
    if (cateid == undefined || cateid == 'all') {
      return _data.slice(page - 1, pageSize);
    } else {
      let _filter;
      _filter = _data.filter(function(item) {
        return item.categoryid == cateid
      })
      return _filter.slice(page - 1, pageSize);
    }
  },
  "msg": "请求数据成功"
}
```
里面可以使用各种js函数，那么得到数据可以是根据你的方法定制的。

前端使用easymock模拟数据请求

文章评论