【JS】Mock制作假数据

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/swl979623074/article/details/87527818

背景

前后端分离的模式下,前端可以完全单独开发,这时需要假数据来呈现页面。通过Mock可以制作随机数据,数据类型包括:

  • 基本数据类型
  • 引用数据类型
  • 英文单词、英文段落、汉字、汉字段落、名字(中英文)
  • ID、GUID
  • 省份、电话、邮箱、IP、日期、颜色
  • 图片

另外,通过Mock可以拦截ajax请求,提供虚拟的后台服务,供前端交互使用。


API指导

GitHub地址,这里有完整的API介绍及使用。
Mock.js下载地址


源码导读

// Mock的入口
Mock.mock = function(rurl, rtype, template) {
	    // Mock.mock(template)
	    if (arguments.length === 1) {
	        return Handler.gen(rurl)
	    }
	    // Mock.mock(rurl, template)
	    if (arguments.length === 2) {
	        template = rtype
	        rtype = undefined
	    }
	    // 拦截 XHR
	    if (XHR) window.XMLHttpRequest = XHR
	    Mock._mocked[rurl + (rtype || '')] = {
	        rurl: rurl,
	        rtype: rtype,
	        template: template
	    }
	    return Mock
	}

这里可以看到Mock.mock最多接受三个参数:

  • rurl:ajax请求的路径
  • rtype:方法类型,get、post、put、delete等
  • template:数据模板
展开阅读全文

没有更多推荐了,返回首页