MockJS在VirAPI上如何使用？

VirAPI -- 非侵入式虚拟数据在线请求响应生成接口，支持MockJs语法，请求即可得自定义规则的响应数据。

Mock以其强大的虚拟随机数据生成与拦截请求响应功能受到众多开发者或测试者的喜爱，其语法很是简单，提供的函数也非常丰富。那么借助在线云数据虚拟生成平台——VirAPI，是否也能快速上手适应呢？我相信，如果你使用VirAPI后会发现，几乎无任何门槛，而且VirAPI还提供了更加丰富的功能来协助我们的开发测试。

这里不对VirAPI的特色功能进行展开介绍，本篇文章重点来解释在VirAPI如何很好的使用起Mock，既而为我们的开发或测试提交帮助。

由于在VirAPI已经将接口以项目应用为单位进行分组，而在实际项目中，同一项目接口的请求域名地址是统一的，不同的只是具体的子路由以及请求方式，而且响应的数据结构也一般是分为三类：状态码，响应说明，响应目标数据。一般常见的有：

{
    "code": 200,        // 状态码
    "message": "请求成功",  // 响应说明
    "data": {       // 响应目标数据
        "id": 100000,
        "name": "test_user_name",
        "tags": ["tag1", "tag2"]
    }
}

而VirAPI正是基于实际的项目场景，提供了相应的规范，即：虚拟接口只需定义目标响应数据（即上例的“data”数据）数据结构。也就是说，像状态码code，响应数据message是不需要每次书写接口响应体时都指定的。

如下图即为VirAPI在创建虚拟数据接口时的mock编辑框；从图例上方的说明中已经很清楚的介绍了。

Mock在VirAPI上的实际应用举例

了解了VirAPI定义虚拟数据接口的规则后，咱们来实际的用Mock创建接口吧！

以获取商品详情为例，我需要定义一个请求后响应商品的详情（如产品名称、描述、价格、标签、图片等等）的接口。

使用Mock语法定义data数据：

{
    "id": "@id",        // 唯一ID
    "name": "@ctitle(6,24)",    // 6~24位中文标题名称
    "price": "@float(1, 100, 0, 2)",    // 1~100间的带2位小数的浮点数
    "picture": "@image('200x100', '#FF6600', '#FFF', 'png', '商品图片')",   // 200x100红底白字，文字为“商品图片”的png图片链接
    "describe": "@cparagraph",  // 中文段落
    "tags|0-4": [       // 0-4长度的中文单词数组
        "@cword(2,5)"
    ],
    "collect_count": "@integer(0, 200)",    // 0~200间的随机整数值
    "like_count": "@integer(0, 200)",    // 0~200间的随机整数值
    "total_count": "@integer(0, 200)",    // 0~200间的随机整数值
    "address": "@county(true)",    // 精确到县区的城市名（如：河北省 张家口市 蔚县）
    "preview_imgs|1-6": [       // 1~6长度的图片链接数组
        "@image('200x100')"
    ],
    "detail": "@cparagraph(3, 20)",     // 3~20个段落的中文
    "comments|0-10": [          // 0~10长度的json数组
        {
            "user_info": {
                "name": "@cname",       // 随机中文名称
                "avater": "@image('100x100')"   // 100x100的图片链接
            },
            "content": "@cparagraph",   // 中文段落
            "imgs|0-9": [       // 0~9长度的图片链接数组
                "@image"
            ],
            "date": "@datetime"     // 日期字符串（如：2020-04-28 20:03:28）
        }
    ]
}

然后我们请求该虚拟接口即会得到我们定义的数据结构的随机虚拟数据，如：

{
  "code": 200,              // 状态码
  "message": "Succeed",     // 响应说明
  "data": {                 // 我们真实需要的目标数据
    "id": "210000199210261824",
    "name": "又果改第着织完",
    "price": 40.9,
    "picture": "http://dummyimage.com/200x100/FF6600/FFF.png&text=商品图片",
    "describe": "名府型他样身计规转带办器克局。水多时斗任亲革处无命多具亲派资几道。展写事争样问放毛她极作子前毛他难容。叫保音通三话小消保立在经器四但想养往。想次角世月者矿分影必据儿准情水。线流件个行把连内所王容元而养历参。",
    "tags": [
      "团世难片",
      "想老装",
      "争石将度"
    ],
    "collect_count": 192,
    "like_count": 85,
    "total_count": 8,
    "address": "重庆 重庆市 黔江区",
    "preview_imgs": [
      "http://dummyimage.com/200x100",
      "http://dummyimage.com/200x100"
    ],
    "detail": "引派来定活化才便最候近五深少。不情便己该来质该开传等象车。理程联使元适建于种劳率规向。车往还圆无领位展当毛知支因准来美位带。张争习热小到属风受始众委。北全机安月式分它次阶道气回越走价。位场能音水自于五则验许育过专明论细张。等原安制世研文适按团斯则具亲克。动矿社强改安是权何号白则之维此。三边省节区国拉住亲看员林集于消其。或发可必见完色求队己受代队建。口毛间级何子周加地提备效感命。员持率后起眼明器如使形织按该会。最斯解领度治毛消火位火计史切开。石等据适单子方马里式同例再。维根百才化为积老开三空天每温同。况维满支相治国运光根情强有集深非受志。强方色对队然第维压快更四利是且。并好细学面装基办根常规划用方际只。",
    "comments": [
      {
        "user_info": {
          "name": "吴芳",
          "avater": "http://dummyimage.com/100x100"
        },
        "content": "主铁酸会所结统点流存地工离看类毛。族从变真今日认度求运些常海很识派向层。成个并各着毛花解观就种走。斯该专地完张老广划世法设。",
        "imgs": [
          "http://dummyimage.com/240x400",
          "http://dummyimage.com/88x31",
          "http://dummyimage.com/125x125",
          "http://dummyimage.com/728x90"
        ],
        "date": "1999-03-02 04:02:50"
      },
      {
        "user_info": {
          "name": "黄平",
          "avater": "http://dummyimage.com/100x100"
        },
        "content": "手单易可名活据图列始东四造。离求复水先成长置劳后海温王天各为。化造便油海立金长清制农到据团段布。日育记律各活化被资流出般油。管务量较局厂周北在水七美国边观圆些。几华花王半素求米属给群五正立金华论。世安象完感体单严收会部状最严。",
        "imgs": [
          "http://dummyimage.com/160x600",
          "http://dummyimage.com/250x250",
          "http://dummyimage.com/468x60"
        ],
        "date": "1971-04-05 14:53:36"
      }
    ]
  }
}

这个例子很是丰富齐全了，基本揽括常用的Mock函数来生成随机虚拟数据了。包括唯一ID、两位小数的浮点数价格、图片、文字描述、标签组、随机长度类型数组、时间日期等。

更多Mock在VirAPI官网上的用法可参考《新手入门05-MockJS方法使用大全》。

是不是很简单？Mock语法加上VirAPI，强大的组合；相信能很好的帮助你的测试或开发工作。如果大家有兴趣，可以前往VirAPI官网体验吧。