使用Mock.js生成前端测试数据


Posted in Javascript onDecember 13, 2020

Mock.js是一个模拟数据生成器,可以让前端独立于后端进行开发。如果你正在开发一个前端页面,可是后台还没有完成供你调用的Api,并且数据格式已经确定,那么你就可以使用Mock.js模拟相关的接口,生成假数据来查看页面效果。Mock.js的功能:生成随机数据,拦截 Ajax 请求。

参考文档:https://github.com/nuysoft/Mock/wiki/Getting-Started

语法规范:https://github.com/nuysoft/Mock/wiki/Syntax-Specification

安装

npm install mockjs

创建模拟Api,拦截Ajax请求,返回测试数据

//模拟后台
  Mock.mock('http://api.com', {
    "user|5-10": [{
      'name': '@cname',  //中文名称
      'age|1-100': 100,  //100以内随机整数
      'birthday': '@date("yyyy-MM-dd")', //日期
      'city': '@city(true)'  //中国城市
    }]
  });

发送ajax请求

//JQuery方式
  $.ajax({
    url: 'http://api.com',
    dataType: 'json'
  }).done(function(data, status, xhr) {
    console.log(
      JSON.stringify(data, null, 4)
    )
  });
  //原生ajax方式
  function myajax(url) {
      if (window.XMLHttpRequest) {
        ajax = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        try {
          ajax = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
          try {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e) {}
        }
      }
      if (!ajax) {
        window.alert("不能创建XMLHttpRequest对象实例.");
        return false;
      }
      ajax.open("GET", url, true);
      ajax.send(null);
      ajax.onreadystatechange = function() {
        if (ajax.readyState == 4 && ajax.status == 200) {
          console.log(ajax.responseText);
        }
      }
    }

  myajax('http://api.com');

查看响应

{
  "user": [
    {
      "name": "锺丽",
      "age": 17,
      "birthday": "1983-11-01",
      "city": "内蒙古自治区 赤峰市"
    },
    {
      "name": "陈艳",
      "age": 25,
      "birthday": "1973-07-10",
      "city": "河南省 驻马店市"
    },
    {
      "name": "冯霞",
      "age": 59,
      "birthday": "2010-10-28",
      "city": "澳门特别行政区 离岛"
    },
    {
      "name": "贾秀英",
      "age": 63,
      "birthday": "1973-01-22",
      "city": "新疆维吾尔自治区 伊犁哈萨克自治州"
    },
    {
      "name": "周勇",
      "age": 34,
      "birthday": "1985-05-21",
      "city": "湖南省 衡阳市"
    }
  ]
}

示例

// 使用 Mock
var Mock = require('mockjs')

/**
 * 
 * 数据模板
 * 属性名|生成规则: 属性值
 */
var data = Mock.mock({
  // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
  'list|1-10': [{
    // 属性 id 是一个自增数,起始值为 1,每次增 1
    'id|+1': 1,
    'name': '@FIRST'
  }]
})

// 输出结果
console.log(JSON.stringify(data, null, 4))

运行结果

{
    "list": [
        {
            "id": 1,
            "name": "Larry"
        },
        {
            "id": 2,
            "name": "Edward"
        },
        {
            "id": 3,
            "name": "Jessica"
        },
        {
            "id": 4,
            "name": "William"
        },
        {
            "id": 5,
            "name": "Christopher"
        },
        {
            "id": 6,
            "name": "Michael"
        },
        {
            "id": 7,
            "name": "Susan"
        },
        {
            "id": 8,
            "name": "Shirley"
        },
        {
            "id": 9,
            "name": "Angela"
        },
        {
            "id": 10,
            "name": "George"
        }
    ]
}

到此这篇关于使用Mock.js生成前端测试数据的文章就介绍到这了,更多相关Mock.js生成测试数据内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript的对话框详解与参数
Mar 08 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
Oct 10 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
javascript实现滚轮轮播图片
Dec 13 #Javascript
swiper实现导航滚动效果
Dec 13 #Javascript
swiperjs实现导航与tab页的联动
Dec 13 #Javascript
Vue实现简单购物车功能
Dec 13 #Vue.js
javascript前端实现多视频上传
Dec 13 #Javascript
vue使用element-ui实现表单验证
Dec 13 #Vue.js
vue+element实现动态加载表单
Dec 13 #Vue.js
You might like
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js 判断脚本加载完毕的代码
2011/07/13 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
2017/10/26 Javascript
详解package.json版本号规则
2019/08/01 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
浅析python中while循环和for循环
2019/11/19 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
python求质数列表的例子
2019/11/24 Python
python with (as)语句实例详解
2020/02/04 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
留学生如何写好自荐信
2013/12/27 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
投标邀请书范文
2014/01/31 职场文书
经典安踏广告词
2014/03/21 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
企业安全生产承诺书
2014/05/22 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
繁星春水读书笔记
2015/06/30 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
Golang 切片(Slice)实现增删改查
2022/04/22 Golang