使用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 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
jQuery 表单验证扩展(四)
Oct 20 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 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
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
php格式文件打开的四种方法
2018/02/24 PHP
javascript 写类方式之二
2009/07/05 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
从头学Python之编写可执行的.py文件
2017/11/28 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
使用python接入微信聊天机器人
2020/03/31 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
python requests.get带header
2020/05/05 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
香港礼品网站:GiftU eshop
2017/09/01 全球购物
几个Shell Script面试题
2014/04/18 面试题
2014年公司植树节活动方案
2014/03/04 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
检讨书模板
2015/01/29 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
Python集合set()使用的方法详解
2022/03/18 Python
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL