随着技术的不断发展,前后端分离已成为 Web 的标准。前端工程师需要更加独立的去做一些事情,别再傻傻的等后端工程师的 API 文档了,确定需求,我们就可以开始了。 文章将列举日常开发中常用的 Mock 用法,更多扩展请参考:代码示例 。
一、引入方式
1.引入 js
文件:
1 <script src ="http://mockjs.com/dist/mock.js" > </script >
2.node
引入及示例:
1 2 3 4 5 6 7 8 9 10 11 npm install mockjs var Mock = require ('mockjs' );var data = Mock.mock({ 'list|1-10' : [{ 'id|+1' : 1 }] }); console .log(JSON .stringify(data, null , 4 ))
3.bower
安装以及引入:
1 2 npm install -g bower bower install --save mockjs
HTML
引入注意路径:
1 <script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script>
4.RequireJS (AMD)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 require .config({ paths:{ 'mock' :'http://mockjs.com/dist/mock' } }) require (['mock' ], function (Mock ) { var data = Mock.mock({ 'list|1-10' : [{ 'id|+1' : 1 }] }); $('<pre>' ).text(JSON .stringify(data, null , 4 )) .appendTo('body' ) })
5.Sea.js (CMD)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 seajs.config({ alias: { "mock" : "http://mockjs.com/0.1/dist/mock.js" } }) seajs.use('mock' , function (Mock ) { var data = Mock.mock({ 'list|1-10' : [{ 'id|+1' : 1 }] }); $('<pre>' ).text(JSON .stringify(data, null , 4 )) .appendTo('body' ) })
二、字符串操作
1.生成随机长度字符串 'name|min-max': string
:
1 2 3 Mock.mock({ "string|1-10" : "★" })
2.生成指定字符串长度, 'name|count': string
:
1 2 3 Mock.mock({ "string|3" : "★★★" })
三、Number 类型
1.生成 1-100 之间的整数,'name|min-max': number
:
1 2 3 Mock.mock({ "number|1-100" : 100 })
2.生成 1-100 间个数小于 10 位的小数,'name|min-max.dmin-dmax': number
:
1 2 3 Mock.mock({ "number|1-100.1-10" : 1 })
3.生成大于 123.1 且位数小于 10位的小数:
1 2 3 Mock.mock({ "number|123.1-10" : 1 })
四、布尔类型
1.随机生成 boolen 类型的属性,'name|1': boolean
:
1 2 3 Mock.mock({ "boolean|1" : true })
五、生成对象
1.从指定对象中随机选择两条数据,'name|count': object
:
1 2 3 4 5 6 7 8 Mock.mock({ "object|2" : { "310000" : "上海市" , "320000" : "江苏省" , "330000" : "浙江省" , "340000" : "安徽省" } })
输出:
1 2 3 4 5 6 { "object" : { "320000" : "江苏省" , "330000" : "浙江省" } }
2.选择 2-4 位指定位数属性,'name|min-max': object
:
1 2 3 4 5 6 7 8 Mock.mock({ "object|2-4" : { "110000" : "北京市" , "120000" : "天津市" , "130000" : "河北省" , "140000" : "山西省" } })
六、数组操作
1.随机选择给定数组中某 1 项,'name|1': array
:
1 2 3 4 5 6 7 Mock.mock({ "array|1" : [ "AMD" , "CMD" , "UMD" ] })
结果:
2.在给定数组中选择 1 项,生成 1-10 次:
1 2 3 4 5 6 7 8 9 10 11 Mock.mock({ "array|1-10" : [ { "name|+1" : [ "Hello" , "Mock.js" , "!" ] } ] })
3.随机生成 1-10 个给定数组项,`’name|min-max’: array`:
1 2 3 4 5 Mock.mock({ "array|1-10" : [ "Mock.js" ] })
4.将数组项复制 1-10 次:
1 2 3 4 5 6 7 Mock.mock({ "array|1-10" : [ "Hello" , "Mock.js" , "!" ] })
5.拷贝数组项三次,'name|count': array
:
1 2 3 4 5 Mock.mock({ "array|3" : [ "Mock.js" ] })
同理:
1 2 3 4 5 6 7 Mock.mock({ "array|3" : [ "Hello" , "Mock.js" , "!" ] })
结果为:
1 2 3 4 5 6 7 8 9 10 11 12 13 { "array" : [ "Hello" , "Mock.js" , "!" , "Hello" , "Mock.js" , "!" , "Hello" , "Mock.js" , "!" ] }
七、调用方法
1.可以将方法作为返回值:
1 2 3 4 5 6 Mock.mock({ 'foo' : 'Syntax Demo' , 'name' : function ( ) { return this .foo } })
结果:
1 2 3 4 { "foo" : "Syntax Demo" , "name" : "Syntax Demo" }
八、正则表达式
1.按照正则规则生成字符串:
1 2 3 Mock.mock({ 'regexp' : /[a-z][A-Z][0-9]/ })
结果为:
2.生成 5-10 位数字:
1 2 3 Mock.mock({ 'regexp' : /\d{5,10}/ })
九、数据占位符定义
1.生成 boolean 类型:
1 2 3 Random.boolean() Mock.mock('@boolean' ) Mock.mock('@boolean()' )
2.生成 60-100 间的整数:
3.生成 60-100 之间浮点数,且小数点后保留 3-5 位:
1 2 Random.float(60 , 100 , 3 ) Random.float(60 , 100 , 3 , 5 )
4.生成步近值为 2 的数组序列:
结果:
十、生成日期格式字符串
1.生成日期:
1 2 Random.date('yyyy-MM-dd' ) Mock.mock('@date("yyyy-MM-dd")' )
2.生成时间:
1 2 Random.time('A HH:mm:ss' ) Random.time('HH:mm:ss' )
3.生成日期和时间:
1 2 Random.datetime('yyyy-MM-dd A HH:mm:ss' ) Mock.mock('@datetime("yyyy-MM-dd A HH:mm:ss")' )
4.当前时间:
1 2 3 Random.now() Mock.mock('@now' ) Mock.mock('@now()' )
十一、占位图片
1.Random.image( size?, background?, foreground?, format?, text? )
:
1 2 3 4 5 6 7 8 Random.image('200x100' ) Random.image('200x100' , '#50B347' , '#FFF' , 'jartt' ) Random.image('200x100' , '#894FC4' , '#FFF' , 'png' , 'jartto' )
十二、生成色值
1.默认生成 16 进制:
1 2 3 Random.color() Mock.mock('@color' ) Mock.mock('@color()' )
2.还有 rgb 和 rgba:
1 2 3 Random.rgb() Mock.mock('@rgb' ) Mock.mock('@rgb()' )
十三、生成英文/中文段落
1.随机生成 1-3 段英文段落,Random.paragraph( min?, max? )
:
1 2 Random.paragraph(1 ,3 ) Mock.mock('@paragraph(1,3)' )
2.随机生成 3-5 个英文句子,Random.sentence( min?, max? )
:
1 2 3 4 5 6 7 Random.sentence(5 ) Mock.mock('@sentence(5)' ) Random.sentence(3 , 5 ) Mock.mock('@sentence(3, 5)' )
3.英文单词和英文标题:
1 2 3 4 5 6 7 Random.word(5 ) Mock.mock('@word(5)' ) Random.word(3 , 5 ) Mock.mock('@word(3, 5)' )
4.中文段落:
1 2 3 4 5 6 7 Random.cparagraph(2 ) Mock.mock('@cparagraph(2)' ) Random.cparagraph(1 , 3 ) Mock.mock('@cparagraph(1, 3)' )
5.中文句子:
1 2 3 4 5 6 7 Random.csentence(5 ) Mock.mock('@csentence(5)' ) Random.csentence(3 , 5 ) Mock.mock('@csentence(3, 5)' )
6.随机汉字:
1 2 3 4 5 6 7 Random.cword(3 , 5 ) Mock.mock('@cword(3, 5)' ) Random.cword('零一二三四五六七八九十' , 5 , 7 ) Mock.mock('@cword("零一二三四五六七八九十", 5, 7)' )
结果:
1 2 3 4 5 6 7 "活第听参" "总算场" "一三七一二八" "五九八三七七"
7.汉字标题:
1 2 3 4 5 6 7 Random.ctitle(5 ) Mock.mock('@ctitle(5)' ) Random.ctitle(3 , 5 ) Mock.mock('@ctitle(3, 5)' )
十四、中英文姓名
1.生成英文名字
1 2 3 4 Random.name() Mock.mock('@name' ) Mock.mock('@name()' )
结果:
1 2 3 4 "Patricia Clark" "Mary Jones" "Jose Miller"
2.汉语名字:
1 2 3 4 Random.cname() Mock.mock('@cname' ) Mock.mock('@cname()' )
结果:
十五、地址相关
1.生成 URL:
1 2 3 4 Random.url() Mock.mock('@url' ) Mock.mock('@url()' )
2.生成 Email:
1 2 3 4 Random.email() Mock.mock('@email' ) Mock.mock('@email()' )
3.生成 ip:
1 2 3 4 Random.ip() Mock.mock('@ip' ) Mock.mock('@ip()' )
4.生成区域:
1 2 3 4 Random.region() Mock.mock('@region' ) Mock.mock('@region()' )
5.生成省:
1 2 3 4 Random.province() Mock.mock('@province' ) Mock.mock('@province()' )
6.生成城市:
1 2 3 4 5 6 7 Random.city() Mock.mock('@city' ) Mock.mock('@city()' ) Random.city(true ) Mock.mock('@city(true)' )
结果:
1 2 3 4 5 6 7 "桂林市" "海口市" "玉溪市" "内蒙古自治区 呼伦贝尔市" "宁夏回族自治区 银川市"
7.区县:
1 2 3 4 5 6 7 Random.county() Mock.mock('@county' ) Mock.mock('@county()' ) Random.county(true ) Mock.mock('@county(true)' )
十六、Helper
1.首字母大写:
1 2 3 Random.capitalize('hello' ) Mock.mock('@capitalize("hello")' )
2.转大小写:
1 2 3 4 5 6 7 Random.upper('hello' ) Mock.mock('@upper("hello")' ) Random.lower('HELLO' ) Mock.mock('@lower("HELLO")' )
3.数组随机取值:
1 2 3 Random.pick(['a' , 'e' , 'i' , 'o' , 'u' ]) Mock.mock('@pick(["a", "e", "i", "o", "u"])' )
4.打乱数组项顺序:
1 2 3 Random.shuffle(['a' , 'e' , 'i' , 'o' , 'u' ]) Mock.mock('@shuffle(["a", "e", "i", "o", "u"])' )
5.生成 guid:
1 2 3 4 Random.guid() Mock.mock('@guid' ) Mock.mock('@guid()' )
6.生成 id:
1 2 3 4 Random.id() Mock.mock('@id' ) Mock.mock('@id()' )
十七、补充说明
文章只是展示了 Mockjs
的基本用法规则,更多的实用场景请参考如下链接:代码示例 文档地址