如何构建 Web 前端 Mock Server

简介:如何构建 Web 前端 Mock Server

前后端分离
真实数据模拟
接口测试

前后端分离
让前端攻城师独立于后端进行开发。 增加单元测试的真实性
通过随机数据,模拟各种场景。 开发无侵入
不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。 用法简单
符合直觉的接口。 数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 方便扩展

  • 相对于其他同类的框架的实现,mock.js超出了我的意料。
    • 基于 数据模板 生成模拟数据。
    • 基于 HTML模板 生成模拟数据。
    • 拦截并模拟 ajax 请求。
  • 是的,mock.js只做上述的几件事,但做的足够出色。
    解决的问题
    开发时,后端还没完成数据输出,前端只好写静态模拟数据。
  • 数据太长了,将数据写在js文件里,完成后挨个改url。
  • 某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼。
  • 想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据。
  • 特殊的格式,例如IP,随机数,图片,地址,需要去收集。
  • 超烂的破网速…

配置模拟数据:
Mock.mock('http://g.cn', {
'name' : '@name',
'age|1-100': 100,
'color' : '@color'
});
发送Ajax请求:
$.ajax({
url: 'http://g.cn',
dataType:'json'
}).done(function(data, status, xhr){
console.log(
JSON.stringify(data, null, 4)
)
});
返回数据:
// 结果1
{
"name": "Elizabeth Hall",
"age": 91,
"color": "#0e64ea"
}

// 结果2
{
"name": "Michael Taylor",
"age": 61,
"color": "#081086"
}

语法
Mock.js 的语法规范包括两部分:

  1. 数据模板定义(Data Temaplte Definition,DTD)
  2. 数据占位符定义(Data Placeholder Definition,DPD)
    数据模板定义 DTD
    数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:
    // 属性名 name
    // 生成规则 rule
    // 属性值 value
    'name|rule': value
    注意:
  • 属性名 和 生成规则 之间用 | 分隔。
  • 生成规则 是可选的。
  • 生成规则 有 7 种格式:
    1. 'name|min-max': value
    2. 'name|count': value
    3. 'name|min-max.dmin-dmax': value
    4. 'name|min-max.dcount': value
    5. 'name|count.dmin-dmax': value
    6. 'name|count.dcount': value
    7. 'name|+step': value
  • 生成规则 的 含义 需要依赖 属性值 才能确定。
  • 属性值 中可以含有 @占位符。
  • 属性值 还指定了最终值的初始值和类型。
    生成规则和示例:
  1. 属性值是字符串 String
  2. 'name|min-max': 'value' 通过重复 'value' 生成一个字符串,重复次数大于等于 min,小于等于 max。
  3. 'name|count': 'value' 通过重复 'value' 生成一个字符串,重复次数等于 count。
  4. 属性值是数字 Number
  5. 'name|+1': 100 属性值自动加 1,初始值为 100
  6. 'name|1-100': 100 生成一个大于等于 1、小于等于 100 的整数,属性值 100 只用来确定类型。
  7. 'name|1-100.1-10': 100 生成一个浮点数,整数部分大于等于 1、小于等于 100,小数部分保留 1 到 10 位。 {
  8. 'number1|1-100.1-10': 1,
    
  9. 'number2|123.1-10': 1,
    
  10. 'number3|123.3': 1,
    
  11. 'number4|123.10': 1.123
    
  12. }
    
  13. // =>
    
  14. {
    
  15. "number1": 12.92,
    
  16. "number2": 123.51,
    
  17. "number3": 123.777,
    
  18. "number4": 123.1231091814
    
  19. }
    
  20. 属性值是布尔型 Boolean
  21. 'name|1': value 随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率是 1/2。
  22. 'name|min-max': value 随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)。
  23. 属性值是对象 Object
  24. 'name|min-max': {} 从属性值 {} 中随机选取 min 到 max 个属性。
  25. 'name|count': {} 从属性值 {} 中随机选取 count 个属性。
  26. 属性值是数组 Array
  27. 'name|1': [{}, {} ...] 从属性值 [{}, {} ...] 中随机选取 1 个元素,作为最终值。
  28. 'name|min-max': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数大于等于 min,小于等于 max。
  29. 'name|count': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数为 count。
  30. 属性值是数组 Function
    'name': function(){} 执行函数 function(){},取其返回值作为最终的属性值,上下文为 'name' 所在的对象。
    数据占位符定义 DPD
    占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。占位符 的格式为:
    @占位符
    @占位符(参数 [, 参数])
    注意:
  31. 用 @ 来标识其后的字符串是 占位符。
  32. 占位符 引用的是 Mock.Random 中的方法。
  33. 通过 Mock.Random.extend() 来扩展自定义占位符。
  34. 占位符 也可以引用 数据模板 中的属性。
  35. 占位符 会优先引用 数据模板 中的属性{
  36. name: {
  37. first: '@FIRST',
  38. middle: '@FIRST',
  39. last: '@LAST',
  40. full: '@first @middle @last'
  41. }
    
  42. }
  43. // =>
  44. {
  45. "name": {
  46. "first": "Charles",
  47. "middle": "Brenda",
  48. "last": "Lopez",
  49. "full": "Charles Brenda Lopez"
  50. }
    
  51. }

常用方法
Mock.mock( rurl?, rtype?, template|function(options) )
根据数据模板生成模拟数据。
参数的含义和默认值如下所示:

  • 参数 rurl:可选。表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、'/domian/list.json'。
  • 参数 rtype:可选。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
  • 参数 template:可选。表示数据模板,可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
  • 参数 function(options):可选。表示用于生成响应数据的函数。
  • 参数 options:指向本次请求的 Ajax 选项集。
    Mock.mockjax(library)
    覆盖(拦截) Ajax 请求,目前内置支持 jQuery、Zepto、KISSY。
    Mock.Random
    Mock.Random 是一个工具类,用于生成各种随机数据。Mock.Random 的方法在数据模板中称为“占位符”,引用格式为 @占位符(参数 [, 参数]) 。
    Mock.tpl(input, options, helpers, partials)
    基于 Handlebars、Mustache 的 HTML 模板生成模拟数据。
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,594评论 18 139
  • 题目:前后端分离-独立于后端的前端开发简介:如何构建 Web 前端 Mock Server 前后端分离真实数据模拟...
    神刀阅读 1,153评论 0 0
  • 在很早以前公司里面就接入了rap在线管理接口文档平台,通过图形化书写接口文档,给前端同事使用。但是之前也仅仅是用于...
    云枫随笔阅读 3,657评论 0 2
  • 一、为什么要模拟数据? 项目开发中,前端工程师需要依赖后端工程师的数据接口以及后端联调环境。但是其实我们也可以根据...
    小小美呀阅读 6,730评论 0 8
  • 六道轮回的众生,根据有无色身、性情、以及所居住的器世间等等不同,又可以分为三界:欲界、色界、无色界。 所谓的欲界,...
    寶蓮葉子阅读 1,031评论 0 1