【重点突破】—— Easy Mock的使用及Mock.js规范

前言:在线使用Easy Mock可视化工具,可以提供快速生成“模拟数据”的持久化服务;

Mock.js是一个JS插件,指定了一套规范,而Easy Mock工具就遵循这些规范。



 一、Easy Mock的使用

官网

使用

  • 创建个人项目

  • 自定义项目

  • 创建完成

  • 创建接口

  • 接口设置

  • 数据规则定义

  • 编辑接口

  • 更改数据

  • 接口设置更新

  • 预览数据

 二、Mock.js规范

官网

Node中使用

  • 安装

    npm install mockjs
  • 使用
    // 使用 Mock
    var Mock = require(‘mockjs‘)
    var data = Mock.mock({
        // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
        ‘list|1-10‘: [{
            // 属性 id 是一个自增数,起始值为 1,每次增 1
            ‘id|+1‘: 1
        }]
    })
    // 输出结果
    console.log(JSON.stringify(data, null, 4))
    

Easy Mock中使用  

  • 常用语法

    {
          "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 返回设置返回的数据
    }
  • 生成数据结果
    HTTP/1.1 200 OK
    Connection: keep-alive
    Content-Length: 642
    Content-Type: application/json; charset=utf-8
    Date: Wed, 02 Jan 2019 10:47:09 GMT
    Rate-Limit-Remaining: 0
    Rate-Limit-Reset: 1546426030
    Rate-Limit-Total: 2
    Server: Tengine
    Vary: Accept, Origin
    X-Request-Id: 1a7e52b1-1545-4d50-b116-e6f502367067
    
    {
      "cname": "戴明",
      "id": "140000199106198361",
      "title": "备名厂广是",
      "city": "晋城市",
      "ip": "87.190.38.52",
      "email": "[email protected]",
      "url": "nntp://byw.no/mbvxjmqsig",
      "cfirst": "叶",
      "clast": "丽",
      "cword": "1",
      "csentence": "办号。",
      "csentence5": "办号。",
      "cparagraph": "问影系标直放则地织理值已进特长。义百变速社证展越具至日命管示事几来。交往节史或日将及整毛有片路年且。",
      "string": "OmEZeo*%7bR",
      "float": 5.97002,
      "int": 69,
      "boolean": false,
      "array": [
        {
          "id": 6,
          "name": "cname"
        },
        {
          "id": 6,
          "name": "cname"
        }
      ],
      "array_sort_add": "1",
      "actionType": "open_resource_detail",
      "payload": {
        "resourceId": "606"
      }
    }
  • 项目示例
    {
      "code": 0,
      "msg": "",
      "list|10": [{     //生成10组数据
        "id|+1": 1,    //自增长
        "userName": ‘@cname‘,   //随机生成中文名
        "sex|1-2": 1,    //在1-2中随机选择
        "state|1-5": 1,
        "interest|1-8": 1,
        "birthday": ‘2019-01-01‘,
        "address": ‘西虹市海淀区桃花公园‘,
        "time": ‘07:00‘
      }],
      page: 1,
      page_size: 10,
      total_count: 30
    }
  • 预览效果  
    HTTP/1.1 200 OK
    Connection: keep-alive
    Content-Length: 1490
    Content-Type: application/json; charset=utf-8
    Date: Wed, 02 Jan 2019 11:04:43 GMT
    Rate-Limit-Remaining: 0
    Rate-Limit-Reset: 1546427084
    Rate-Limit-Total: 2
    Server: Tengine
    Vary: Accept, Origin
    X-Request-Id: eba7dba0-9771-42cd-914c-069b1b0d802e
    
    {
      "code": 0,
      "msg": "",
      "list": [
        {
          "id": 1,
          "userName": "杨磊",
          "sex": 1,
          "state": 4,
          "interest": 2,
          "birthday": "2019-01-01",
          "address": "西虹市海淀区桃花公园",
          "time": "07:00"
        },
        {
          "id": 2,
          "userName": "谢平",
          "sex": 2,
          "state": 3,
          "interest": 2,
          "birthday": "2019-01-01",
          "address": "西虹市海淀区桃花公园",
          "time": "07:00"
        },
        {
          "id": 3,
          "userName": "金磊",
          "sex": 1,
          "state": 4,
          "interest": 1,
          "birthday": "2019-01-01",
          "address": "西虹市海淀区桃花公园",
          "time": "07:00"
        },
        {
          "id": 4,
          "userName": "张磊",
          "sex": 2,
          "state": 3,
          "interest": 7,
          "birthday": "2019-01-01",
          "address": "西虹市海淀区桃花公园",
          "time": "07:00"
        },
        {
          "id": 5,
          "userName": "文伟",
          "sex": 2,
          "state": 5,
          "interest": 6,
          "birthday": "2019-01-01",
          "address": "西虹市海淀区桃花公园",
          "time": "07:00"
        },
        {
          "id": 6,
          "userName": "何涛",
          "sex": 2,
          "state": 2,
          "interest": 3,
          "birthday": "2019-01-01",
          "address": "西虹市海淀区桃花公园",
          "time": "07:00"
        },
        {
          "id": 7,
          "userName": "龚霞",
          "sex": 2,
          "state": 3,
          "interest": 8,
          "birthday": "2019-01-01",
          "address": "西虹市海淀区桃花公园",
          "time": "07:00"
        },
        {
          "id": 8,
          "userName": "吴芳",
          "sex": 1,
          "state": 4,
          "interest": 4,
          "birthday": "2019-01-01",
          "address": "西虹市海淀区桃花公园",
          "time": "07:00"
        },
        {
          "id": 9,
          "userName": "夏芳",
          "sex": 1,
          "state": 2,
          "interest": 2,
          "birthday": "2019-01-01",
          "address": "西虹市海淀区桃花公园",
          "time": "07:00"
        },
        {
          "id": 10,
          "userName": "廖艳",
          "sex": 1,
          "state": 2,
          "interest": 4,
          "birthday": "2019-01-01",
          "address": "西虹市海淀区桃花公园",
          "time": "07:00"
        }
      ],
      "page": 1,
      "page_size": 10,
      "total_count": 30
    }      


注:转载请注明出处

原文地址:https://www.cnblogs.com/ljq66/p/10209673.html

时间: 2024-07-31 04:51:03

【重点突破】—— Easy Mock的使用及Mock.js规范的相关文章

【重点突破】—— react使用http-proxy-middleware反向代理跨域

create-react-app脚手架低于2.0版本时候,可以使用对象类型 "proxy": { "/api": { "target": "http://localhost:5000", "changeOrigin": true } } 最新的create-react-app脚手架2.0版本以上只能配置string类型 "proxy": "http://localhost:50

【重点突破】——Cookie的使用

cookie:小甜饼 cookie:保存客户端浏览器中一个纯文本文件 版本高的浏览器可查看   F12->Resource  左下方cookie    查看 cookie作用: 保存:[安全性要求不高]文字或数字数据 登录密码?安全性要求高,不能保存 通用方案: 1:用户昵称/用户名/用户编号 2:浏览过商品 3:大型网站-->用户购物车中数据也保存cookie 特点: 长年保存:10年7天 短期保存:打开浏览器保存,关闭清除数据 语法:!!!!重点. 1:cookie_add.html 保存

【重点突破】—— fetch()方法介绍

前言:ant-design-pro的技术组成主要是react+redux+dva+antd+fetch+roadhog,dva在源码包index.js里面导出了fetch,但是如果不想使用fetch库,想换成其他库也是可以的(axios后期扩展性更好些),roadhog主要是基于webpack实现的封装.关于fetch发送请求的代码都封装在了utils/request.js文件中.PS:这里重点梳理对fetch()的使用学习,原文地址:大灰狼的小棉羊哥哥博客 与XMLHttpRequest(XH

【重点突破】—— Nodejs+Express+MongoDB的使用基础

前言:最近学习vue和react的高阶项目,都需要和Nodejs+Express+MongoDB结合实现全栈开发.这里结合实例Demo和所学项目集中总结一下这部分服务端的基础知识. 一.Express+mongodb开发web后台接口Demo Express开发web接口 Express:基于nodejs,快速.开放.极简的web开发框架  [官网] 安装express npm install express --save 新建server目录:server.js编写后端代码 const exp

转:Swagger2自动生成接口文档和Mock模拟数据

转自:https://www.cnblogs.com/vipstone/p/9841716.html 一.简介 在当下这个前后端分离的技术趋势下,前端工程师过度依赖后端工程师的接口和数据,给开发带来了两大问题: 问题一.后端接口查看难:要怎么调用?参数怎么传递?有几个参数?参数都代表什么含义? 问题二.返回数据操作难:数据返回不对或者不够怎么办?怎么才能灵活的操作数据? 这是很多公司前后端分离之后带来的困扰,那怎么来解决这些问题? 问题一的一般解决方案:后端团队共同维护一个在线文档,每次改接口再

mock的概念

1 现有的单元测试框架单元测试是保证程序正确性的一种有效的测试手段,对于不同的开发语言,通常都能找到相应的单元框架. 借助于这些单测框架的帮助,能够使得我们编写单元测试用例的过程变得便捷而优雅.框架帮我们提供了case的管理,执行,断言集,运行参数,全局事件工作,所有的这些使得我们只需关注:于对于特定的输入,被测对象的返回是否正常.那么,这些xUnit系列的单元测试框架是如何做到这些的了?分析这些框架,发现所有的单元测试框架都是基于以下的一种体系结构设计的. 如上图所示,单测框架中通常包括Tes

[转载] what's goole mock

原文: https://code.google.com/p/googlemock/wiki/V1_7_ForDummies 地址被墙了, 看起来费劲, 转载一份 Google C++ Mocking Framework for Dummies Updated Nov 21, 2013 by [email protected] What Is Google C++ Mocking Framework? Why Google Mock? Getting Started A Case for Mock

[转载] google mock cookbook

原文: https://code.google.com/p/googlemock/wiki/CookBook Creating Mock Classes Mocking Private or Protected Methods Mocking Overloaded Methods Mocking Class Templates Mocking Nonvirtual Methods Mocking Free Functions The Nice, the Strict, and the Naggy

【转】MOCK方法介绍

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://baidutech.blog.51cto.com/4114344/743740 1 现有的单元测试框架 单元测试是保证程序正确性的一种有效的测试手段,对于不同的开发语言,通常都能找到相应的单元框架. 借助于这些单测框架的帮助,能够使得我们编写单元测试用例的过程变得便捷而优雅.框架帮我们提供了case的管理,执行,断言集,运行参数,全局事件工作,所有的这些使得我们只需关注:于对于特