Easy Mock以及Vue+Mock.js模拟数据

Posted MountainC44

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Easy Mock以及Vue+Mock.js模拟数据相关的知识,希望对你有一定的参考价值。

Easy Mock以及Vue+Mock.js模拟数据

技术分享图片

一、Mock.js简介

Mock.js是一个可以模拟后端数据,也可以模拟增删改查操作的js库
  • 基础语法规范

    数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:‘name|rule‘: value

    语法规则 说明
    ‘name|min-max‘: string 通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max
    ‘name|count‘: string 通过重复 string 生成一个字符串,重复次数等于 count
    ‘name|min-max‘: number 生成一个大于等于 min、小于等于 max 的整数,属性值 number 用来确定类型
    ‘name|+1‘: number 初始值为 number,以后每次请求在前面的基础上+1
    ‘name|min-max.dmin-dmax‘: number 生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmin 到 dmax 位
    ‘name|1‘: boolean 随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2
    ‘name|count‘: object 从属性值 object 中随机选取 count 个属性
    ‘name|min-max‘: object 从属性值 object 中随机选取 min 到 max 个属性
    ‘name|1‘: array 从属性值 array 中随机选取 1 个元素,作为最终值
    ‘name|+1‘: array 从属性值 array 中按照顺序选取 1 个元素,作为最终值
    ‘name|count‘: array 通过重复属性值 array 生成一个新数组,重复次数为 count
    ‘name|min-max‘: array 通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max

    简单举例:

    var arr=[‘aa‘,‘bb‘,‘cc‘];
    var obj={
       ‘name‘:‘MountainC44‘,
       ‘old‘:‘23‘,
       ‘sex‘:‘man‘
    };
    
    //数据模版简单举例
    {
       ‘firstName|3‘:‘xue‘,//重复fei这个字符串 3 次。
       ‘lastName|2-5‘:‘yangbo‘,//重复yangbo这个字符串 2-5 次。
       ‘index|+1‘:0, //属性值自动加 1,初始值为 0
       ‘age|20-30‘:25,//生成一个大于等于 20、小于等于 30 的整数,属性值 25 只是用来确定类型
       ‘weight|100-120.2-5‘:110.24,//生成一个浮点数,整数部分大于等于 100、小于等于 120,小数部分保留 2 到 5 位。
       ‘likeMovie|1‘:Boolean,//随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。
       ‘friend1|1‘:arr,//从数组 arr 中随机选取 1 个元素,作为最终值。
       ‘friend2|+1‘:arr,//从属性值 arr 中顺序选取 1 个元素,作为最终值
       ‘friend3|2-3‘:arr,//通过重复属性值 arr 生成一个新数组,重复次数大于等于 2,小于等于 3。
       ‘obj1|2‘:obj,//从属性值 obj 中随机选取 2 个属性
       ‘obj2|1-2‘:obj,//从属性值 obj 中随机选取 1 到 2 个属性。
       ‘regexp1‘:/^[a-z][A-Z][0-9]$/,//生成的符合正则表达式的字符串
    }
    
    //返回示例
    {
       ‘firstName‘:‘xuexuexue‘,
       ‘lastName‘:‘yangboyangbo‘,
       ‘index‘:0, 
       ‘age‘:28,
       ‘weight‘:115.223,
       ‘likeMovie‘:Boolean,
       ‘friend1‘:‘bb‘,
       ‘friend2‘:‘aa‘,
       ‘friend3|2-3‘:[‘aa‘,‘bb‘,‘cc‘,‘aa‘,‘bb‘,‘cc‘],
       ‘obj1‘:{‘name‘:‘MountainC44‘,‘old‘:‘23‘,},
       ‘obj2‘:{‘name‘:‘MountainC44‘,},
       ‘regexp1‘:‘sC2‘,
    }
  • 数据占位符

    //数据占位符使用
    {
      "string|1-2": "@string",     //随机生成字符串
      "integer": "@integer(10, 30)",  //随机生成一个10~30之间的正整数
      "float": "@float(60, 100, 2, 2)",  //随机生成浮点数,参数分别为整数部分最小值和最大值、小数部分保留最小位数和最大位数
      "boolean": "@boolean",       //随机生成boolean
      "date": "@date(yyyy-MM-dd)", //按照格式随机生成时间
      "datetime": "@datetime",     //随机生成时间
      "now": "@now",               //当前时间
      "url": "@url",               //随机生成url字符串
      "email": "@email",           //随机生成邮箱
      "region": "@region",         //随机生成地区
      "city": "@city",             //随机生成城市
      "province": "@province",     //随机生成省会
      "county": "@county",         //随机生成一个(中国)县
      "upper": "@upper(@title)",   //把生随机成的标题全部转为大写
      "guid": "@guid",             //随机生成一个 GUID
      "id": "@id",                 //随机生成一个 18 位身份证
      "image": "@image(200x200)",  //随机生成一个大小为200x200的图片链接
      "title": "@title",           //随机生成一句标题,其中每个单词的首字母大写
      "cparagraph": "@cparagraph", //随机生成一段中文文本
      "csentence": "@csentence",   //随机生成一段中文文本
      "range": "@range(2, 10)"     //返回一个内容从2开始到9的整型数组
    }
    
    //返回示例
    {
      "string": "A0L^Z",
      "integer": 16,
      "float": 82.23,
      "boolean": true,
      "date": "1994-09-16",
      "datetime": "1994-10-22 02:30:32",
      "now": "2018-10-21 10:31:00",
      "url": "mailto://tfoyemmcy.as/ppm",
      "email": "[email protected]",
      "region": "华南",
      "city": "茂名市",
      "province": "澳门特别行政区",
      "county": "和平区",
      "upper": "LGHV FJV FDHNA ZJQO MKQEPMY BYVPYMU JRUPL",
      "guid": "EdAD386E-eCB3-e054-fBd3-D4BCd58bF2Dd",
      "id": "630000201810081550",
      "image": "http://dummyimage.com/200x200",
      "title": "Powol Qhycsib Nvwf Bmiuvcek Ioisiu Sxdmrpdip",
      "cparagraph": "又平你大万被然红义她之影此属且。定圆光半条社已上实参规持备特战划。打第一在感革会属利小年往。认七单边济火国风风速次支比容争连劳。目叫织新百却又处思只名发这实。什济安这自空东认十需打现军应。",
      "csentence": "火事必该验导回声市然第别程确条状。",
      "range": [2,3,4,5,6,7,8,9]
    }
  • Mock对象方法简介

    • Mock.mock( rurl?, rtype?, template|function( options ) ) :根据数据模板生成模拟数据,拦截指定rtype类型的url为rurl的ajax请求,返回数据模板中的模拟数据或执行回掉方法
    • Mock.setup( settings ):配置拦截 Ajax 请求时的行为。支持的配置项有:timeout,指拦截的 Ajax 请求的响应时间,单位是毫秒
    • Mock.Random.xxx():Mock.Random对象提供的方法在数据模板中称为占位符,书写格式为 @占位符(参数 [, 参数])
    • Mock.valid( template, data ):校验真实数据 data 是否与数据模板 template 匹配
    • Mock.toJSONSchema( template ):把 Mock.js 风格的数据模板 template 转换成 JSON Schema

二、Easy Mock

Easy Mock是一个可视化,并且能快速生成 模拟数据的持久化服务,支持在线访问本地部署

Easy Mock 引入了Mock.js,所以支持Mock.js语法规范

技术分享图片

  • 创建Easy Mock项目

    技术分享图片

  • 使用Easy Mock 的Sagger特性快速生成Mock接口

    技术分享图片

    技术分享图片

  • 查看Mock接口进行测试

    技术分享图片

    技术分享图片

  • 在线测试

    技术分享图片

三、Vue+Mock.js模拟数据

  • npm安装mockjs ,创建mock.js文件

    技术分享图片

  • 编写mock.js文件,main.js文件引入

    //mock.js文件
    const Mock = require(‘mockjs‘);
    const data = Mock.mock({
      // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
      ‘foods|10-50‘: [{
        name: ‘@ctitle(2,10)‘,
        img: "@image(‘600x600‘,#b7ef7c)",
        brief: ‘@csentence(1,50)‘,
        ‘price|0-20.0-2‘: 1,
        num: 0,
        minusFlag: true,
        time: ‘@time‘,
        ‘peisongfei|0-100.0-2‘: 1,
        ‘limit|0-50‘: 1,
      }],
      ‘sales|10-50‘: [{
        // 属性 id 是一个自增数,起始值为 1,每次增 1
        name: ‘@ctitle(2,10)‘,
        img: "@image(‘600x600‘,#b7ef7c)",
        brief: ‘@csentence(1,50)‘,
        ‘price|0-100.0-2‘: 1,
        num: 0,
        minusFlag: true,
        time: ‘@time‘,
        ‘peisongfei|0-100.0-2‘: 1,
        ‘limit|0-100‘: 1,
      }],
    });
    Mock.mock(‘/api/data‘, data);  //对url为/api/data的ajax请求进行拦截返回data假数据
    Mock.mock(‘/api/data1‘, () => ({
      data,
    }));
    
    
    //main.js文件 引入mock.js
    require(‘./mock.js‘);
    
    
    //vue组件使用axios发送ajax请求
    created() {
        this.$axios.get(‘/api/data1‘).then((res) => {
          console.log(res.data);
        });
        this.$axios.get(‘/api/data‘).then((res) => {
          console.log(res.data);
        });
    }
    
  • 查看mock接口(在浏览器调试工具Network中不会有http请求,因为已经被拦截)

    技术分享图片

四、参考链接

水平有限,有写的不对的地方还请各位小伙伴多多指点,共同学习进步??

以上是关于Easy Mock以及Vue+Mock.js模拟数据的主要内容,如果未能解决你的问题,请参考以下文章

Easy-Mock模拟get接口和post接口实例

vue使用mock.js模拟数据

vue中使用axios(异步请求)和mock.js 模拟虚假数据

Easy Mock的使用

mock.js 的介绍与使用

vue项目中使用模拟数据 MOCK