进行独立于后台后端的前端开发——学习Mockjs

Mockjs实现的功能

1.让前端攻城师独立于后端进行开发。

2.通过随机数据,模拟各种场景。增加单元测试的真实性

3.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。

4.用法简单

5.支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等

6.支持支持扩展更多数据类型,支持自定义函数和正则。

语法

数据模版中,每个属性由3个部分组成:属性名,生成规则,属性值:‘name’|‘rule’:‘value’

注意:

  1. 属性名与生成规则之间用 ‘|’
  2. 生成规则是可选的
  3. 生成规则有其中格式:
    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
  4. 生成规则的含义需要以来属性值才能确定
  5. 属性值中可以含有占位符
  6. 属性值还指定了最终值的初始值和类型

生成规则示例说明

  1. ‘name|min-max‘: ‘value‘ 通过重复 ‘value‘ 生成一个字符串,重复次数大于等于 min,小于等于 max。
  2. ‘name|count‘: ‘value‘ 通过重复 ‘value‘ 生成一个字符串,重复次数等于 count。
  3. ‘name|+1‘: 100 属性值自动加 1,初始值为 100
  4. ‘name|1-100‘: 100 生成一个大于等于 1、小于等于 100 的整数,属性值 100 只用来确定类型。
  5. ‘name|1-100.1-10‘: 100 生成一个浮点数,整数部分大于等于 1、小于等于 100,小数部分保留 1 到 10 位。
  6. ‘name|1‘: value 随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率是 1/2。
  7. ‘name|min-max‘: value 随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)。
  8. ‘name|min-max‘: {} 从属性值 {} 中随机选取 min 到 max 个属性。
  9. ‘name|count‘: {} 从属性值 {} 中随机选取 count 个属性。
  10. ‘name|1‘: [{}, {} ...] 从属性值 [{}, {} ...] 中随机选取 1 个元素,作为最终值。
  11. ‘name|min-max‘: [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数大于等于 min,小于等于 max。
  12. ‘name|count‘: [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数为 count。
  13. ‘name‘: function(){} 执行函数 function(){},取其返回值作为最终的属性值,上下文为 ‘name‘ 所在的对象。

数据的占位符定义

占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。占位符 的格式为:@占位符(参数 [,参数])

注意:

  1. 用 @ 来标识其后的字符串是 占位符。
  2. 占位符 引用的是 Mock.Random 中的方法。
  3. 通过 Mock.Random.extend() 来扩展自定义占位符。
  4. 占位符 也可以引用 数据模板 中的属性。
  5. 占位符 会优先引用 数据模板 中的属性

示例

{
 name: {
 first: ‘@FIRST‘,
 middle: ‘@FIRST‘,
 last: ‘@LAST‘,
 full: ‘@first @middle @last‘
    }
}
// =>
{
 "name": {
 "first": "Charles",
 "middle": "Brenda",
 "last": "Lopez",
 "full": "Charles Brenda Lopez"
    }
}

用法:

jquery:

<script src="http://mockjs.com/dist/mock.js"></script>
Mock.mock(‘http://g.cn‘, {
    ‘name‘     : ‘@name‘,
    ‘age|1-100‘: 100,
    ‘color‘    : ‘@color‘
});
$.ajax({
    url: ‘http://g.cn‘,
    dataType:‘json‘
    }).done(function(data, status, xhr){
    console.log(
    JSON.stringify(data, null, 4)
    )
});

nodejs:

// 安装
npm install mockjs

// 使用
var Mock = require(‘mockjs‘);
var data = Mock.mock({
    ‘list|1-10‘: [{
        ‘id|+1‘: 1
    }]
});

console.log(JSON.stringify(data, null, 4))

官方文档:http://mockjs.com

时间: 2024-12-30 22:18:15

进行独立于后台后端的前端开发——学习Mockjs的相关文章

2018web前端学习路线,详谈web前端开发学习路线

近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的发展前景却是非常的可观,好前景高薪资吸引了众多的人投入到前端开发的学习当中去,想学好web前端,这份web前端开发学习路线分享给你. 好的学习方法和掌握好正确的学习路线可以让我们的学习达到事半功倍的效果,如果你新手想要学习web前端的话,那么这份前端的学习路线图很适合你.这份学习路线的课程涵盖JavaScript.HTML5.C

web前端开发学习路线图分享,详谈2018web前端开发学习路线

近几年IT业可谓是发展火热,而且新生了很多的职业.例如安卓开发工程师.iOS开发工程师.在这众多的新生职业中备受瞩目的当属web前端工程师了,前端工程师薪资高,就业发展前景好,更多的人选择了这一职业成为自己的发展方向,想要自己成为一名合格的web前端工程师,web前端开发学习路线图值得大家去看看.挺适合大家借鉴来学习的.web前端课程包括了几个方面的内容: 1.学习HTML,这是最简单,最基本的是要掌握div,formtable.Ulli.P.跨度.字体这些标签,这些都是最常用的,尤其是DIV和

WEB前端开发学习:源码canvas 雪

WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body style="overflow: hidden;margin:

第五章 前端开发学习——Boostrap

第五章 前端开发学习--Boostrap 一.Bootstrap基础 二.Bootstrap布局 三.Bootstrap组件 四.Bootstrap插件 一.Bootstrap基础 什么是Bootstrap(what): 由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架 简洁.直观.强悍的前端开发框架,让web开发更迅速.简单. Bootstrap版本: Bootstrap2.Bootstrap3.Bootstrap4 Bootstra

前端开发学习笔记(一)深入浅出Javascript

从事开发工作已经有十几年时间了,但一直没有真正涉猎WEB开发,这在当今IT业界听起来有些不可思议哈.从今天开始静下心来,全面深入的学习WEB开发的有关知识.将学习的体会和要点记录下来,以作备忘. 深入浅出Javascript一共12章,按照章节记录. 第一章 前端开发涉及到三个层面:HTML(内容) + CSS(外观) + Javascript(交互/行动) JS脚本不论在<script>块中 还是 嵌入HTML中,都应以";"分号作为结束符.这是一个规范的写法 中文网页应

【转载】web前端开发学习经验总结

原文链接 web开发大概分为前台和后端,前台又可以分为美工,交互设计,js编程.后端了解不多,前端的话,可以按如下思路系统学习: 基础知识: 1. html + css.这部分建议在 www.w3school.com.cn 上学习,边学边练,每章后还有小测试.之后可以模仿一些网站做些页面.在实践中积累了一些经验后,可以系统的读一两本书,推荐<head first html 与 css 中文版>,不过这本书讲的太细了,我没能拿出耐心细读. 2. javascript. 要学的内容实在很多,如果没

web前端开发学习课程大纲路线图及学习方法分享

想学好web前端开发,要学会阅读别人优秀的代码.web前端开发思想并不是统一固定不变的,阅读别人代码的过程就是间接的在向别人学习,这一过程中可以学习别人的开发思路,不同的人思路是不一样的,如果别人写的代码很优秀.很简单.且运行和性能上有很大的优势,就有很多可以借鉴的地方. 以下这份web前端学习路线图适合所以零基础的学员学习,都是从浅入深,没有基础的同学跟着视频教程及课程大纲一步一步的学习是可以很好的掌握的. 那么想要学好html5前端开发,那么需要掌握的专业技术有: 第一阶段:前端页面重构 内

Web 前端开发学习之路(入门篇)

字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== 以下引用知乎 @李路 的话. 以我的经验,大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive Guide/Programming xx系列实践,结合

web前端开发学习视频教程下载(百G)

1.妙味WEB前端开发全套视频教程 链接: http://pan.baidu.com/s/1bf1Ow2 密码: 2yyu 2.极客学院前端教程(html5 Bootstrap Nodejs) 链接: http://pan.baidu.com/s/1eQFcHoe 密码: iem6 3.前端与移动开发基础视频(h5\css3\html\css) 链接: http://pan.baidu.com/s/1c1wiSQc 密码:2cp4 4.2015前端工程师培训视频教程(html5\UI\JS\JQ