企石镇网站仿做,上海网页制作找哪家,南京理工大学电子工程网官网,网址制作一、Mock.js入门 1#xff0e; 什么是mock.js? Mock.js #xff08;官网http://mockjs.com/#xff09;是一款模拟数据生成器#xff0c;旨在帮助前端攻城狮独立 于后端进行开发#xff0c;帮助编写单元测试。提供了以下模拟功能#xff1a; 1,根据数据模板生成模拟数据…
一、Mock.js入门 1 什么是mock.js? Mock.js 官网http://mockjs.com/是一款模拟数据生成器旨在帮助前端攻城狮独立 于后端进行开发帮助编写单元测试。提供了以下模拟功能 1,根据数据模板生成模拟数据 2,模拟 Ajax 请求生成并返回模拟数据 3,基于 HTML 模板生成模拟数据 Mock.js 具有以下特点 1.前后端分离,让前端攻城师独立于后端进行开发。 2.增加单元测试的真实性 3.通过随机数据模拟各种场景。 4.开发无侵入 5.不需要修改既有代码就可以拦截 Ajax 请求返回模拟的响应数据。 6.用法简单 7.符合直觉的接口 8.数据类型丰富 9.支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。 10.方便扩展 11.支持支持扩展更多数据类型支持自定义函数和正则。 在进行前后端分离式的开发中前端负责制作页面和显示数据后端负责提供数据前端通过后端提供的RESTFul规范的接口来获取 JSON 格式的数据 对于前端开发人员来说必须要从服务器获取数据所以就只能等待后端开发好接口之后前端才可以获取数据这会影响前端开发的效果。 聪明的前端开发人员就会想如果前端可以自己模拟出数据那么在开发时就不需要服务器提供的数据了。于是就出现了mockjs 2 Mock.js安装 1使用CDN 2使用本地文件 下载Mock.js: https://github.com/nuysoft/Mock 导入到本地页面使用 引入 script srcjs/mock-min.js/script3 Mock.js入门案例 3.1 模拟数据 需求模拟一个用户列表用户三个字段组件自增ID、姓名 显示效果如下 {list: [{id: 1,name: 测试},{id: 1,name: 测试},{id: 1,name: 测试},{id: 1,name: 测试},{id: 1,name: 测试}]
}Mock模拟代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock入门案例/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
bodydiv idapp1/div
/body
scriptvar data Mock.mock({//list是一个数组包含5个元素list|5:[{id:1,name:测试}]})// 每一个层级比上一个多2个空格console.log(JSON.stringify(data,null,2 ))
/script
/html测试结果 Mock.js模拟数据成功。 3.2 使用实例 使用axios向模拟数据的服务发送请求获取模拟数据在页面进行展示 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock入门案例/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
bodydiv idappulli v-foru in usersid {{u.id}}name{{u.name}}/li/ul/div
/body
scriptvar data Mock.mock(/users,get,{//list是一个数组包含5个元素list|5:[{id:1,name:测试}]})const vm new Vue({el:#app,data:{users:[]},created:function(){//发送ajax请求axios.get(/users).then((res){this.users res.data.list;})}})
/script
/html浏览器显示效果如图所示 二、 Mock.js的语法规范 Mock.js 的语法规范包括两部分 1.数据模板定义规范Data Template DefinitionDTD 2.数据占位符定义规范Data Placeholder DefinitionDPD 1 数据模板定义规范 数据模板中的每个属性由 3 部分构成属性名、生成规则、属性值 // 属性名 name // 生成规则 rule // 属性值 value ‘name|rule’: value 属性名 和 生成规则 之间用竖线 | 分隔。生成规则 是可选的。 生成规则 有 7 种格式 ‘name|min-max’: value ‘name|count’: value ‘name|min-max.dmin-dmax’: value ‘name|min-max.dcount’: value ‘name|count.dmin-dmax’: value ‘name|count.dcount’: value ‘name|step’: value 属性值 中可以含有 占位符。 属性值 还指定了最终值的初始值和类型 例如 var data Mock.mock(/users,get,{//list是一个数组包含5个元素list|5:[{id:1,name:测试}]})可见 list 是属性名 中间使用|分隔数字5是生成规则表示生成5条数据后面是json数据。 生成规则的含义需要依赖属性值的类型才能确定。因此我们需要根据属性的值类型来学习Mock.js的模板语法规范 1.1 属性值是字符串 1‘name|count’: string** 通过重复 string 生成一个字符串重复次数等于 count !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock入门案例/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({//重复5次生成一个具有5个对象的数组list|5: [{id: 1,name:测试,//重复11次组装成一个字符串phone|11:1}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
/script
/html//浏览器控制台结果 {list: [{id: 1,name: 测试,phone: 11111111111},{id: 1,name: 测试,phone: 11111111111},{id: 1,name: 测试,phone: 11111111111},{id: 1,name: 测试,phone: 11111111111},{id: 1,name: 测试,phone: 11111111111}]
}2‘name|min-max’: string 通过重复 string 生成一个字符串重复次数大于等于 min小于等于 max !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({list|5: [{id: 1,//测试这个词语 重复随机次数最大9次最小重复2次name|2-9: 测试,phone|11: 1}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html显示结果 {list: [{id: 1,name: 测试测试测试测试测试测试测试,phone: 11111111111},{id: 1,name: 测试测试测试测试测试,phone: 11111111111},{id: 1,name: 测试测试测试测试测试,phone: 11111111111},{id: 1,name: 测试测试测试测试测试测试测试,phone: 11111111111},{id: 1,name: 测试测试测试测试测试测试测试测试,phone: 11111111111}]
}可以发现name属性的值有长有短说明随机重复设置成功。 1.2 属性值是数字 1‘name|1’: number 属性值自动加 1初始值为 number !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({list|5: [{//属性值自动加1,后面1是初始值id|1: 1,//测试这个词语 重复随机次数最大9次最小重复2次name|2-9: 测试,phone|11: 1}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html浏览器显示结果 {list: [{id: 1,name: 测试测试测试测试测试测试测试测试,phone: 11111111111},{id: 2,name: 测试测试测试测试,phone: 11111111111},{id: 3,name: 测试测试,phone: 11111111111},{id: 4,name: 测试测试测试,phone: 11111111111},{id: 5,name: 测试测试测试测试测试测试测试测试测试,phone: 11111111111}]
}可以发现此时id的值是自动增长的。每次循环加1. 2‘name|min-max’: number 生成一个大于等于 min、小于等于 max 的整数属性值 number 只是用来确定类型 示例如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({list|5: [{//属性值自动加1,后面1是初始值id|1: 1,//测试这个词语 重复随机次数最大9次最小重复2次name|2-9: 测试,phone|11: 1,//生成200到1000以内随机的整数point|200-1000:0}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html浏览器效果如下所示 {list: [{id: 1,name: 测试测试测试测试,phone: 11111111111,point: 689},{id: 2,name: 测试测试测试测试,phone: 11111111111,point: 519},{id: 3,name: 测试测试测试测试测试测试测试,phone: 11111111111,point: 604},{id: 4,name: 测试测试测试,phone: 11111111111,point: 797},{id: 5,name: 测试测试测试测试,phone: 11111111111,point: 348}]
}3‘name|min-max.dcount’: value 生成一个浮点数整数部分大于等于 min、小于等于 max小数部分为dcount位 示例如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({list|5: [{//属性值自动加1,后面1是初始值id|1: 1,//测试这个词语 重复随机次数最大9次最小重复2次name|2-9: 测试,phone|11: 1,//生成200到1000以内随机的整数point|200-1000:0,//整数部分大于等于3000小于等于8000max小数部分保留2位的数据money|3000-8000.2:0}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html浏览器显示如下图所示 {list: [{id: 1,name: 测试测试测试测试,phone: 11111111111,point: 848,money: 7080.35},{id: 2,name: 测试测试测试测试,phone: 11111111111,point: 530,money: 4580.34},{id: 3,name: 测试测试测试测试测试,phone: 11111111111,point: 486,money: 6253.33},{id: 4,name: 测试测试测试,phone: 11111111111,point: 627,money: 7222.72},{id: 5,name: 测试测试测试测试,phone: 11111111111,point: 285,money: 7821.81}]
}4‘name|min-max.dmin-dmax’: number 生成一个浮点数整数部分大于等于 min、小于等于 max小数部分保留 dmin 到 dmax 位。 示例如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({list|5: [{//属性值自动加1,后面1是初始值id|1: 1,//测试这个词语 重复随机次数最大9次最小重复2次name|2-9: 测试,phone|11: 1,//生成200到1000以内随机的整数point|200-1000:0,//整数部分大于等于3000小于等于8000max小数部分保留2位的数据money|3000-8000.2:0,//整数部分大于等于3000小于等于8000小数随机保留2到4位的小数money2|1000-2000.2-4:0}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html浏览器控制台显示效果如下所示 {list: [{id: 1,name: 测试测试测试测试测试测试测试测试,phone: 11111111111,point: 694,money: 3317.13,money2: 1986.514},{id: 2,name: 测试测试测试测试测试测试,phone: 11111111111,point: 770,money: 3912.08,money2: 1971.5343},{id: 3,name: 测试测试测试,phone: 11111111111,point: 386,money: 6353.74,money2: 1036.605},{id: 4,name: 测试测试测试测试测试,phone: 11111111111,point: 241,money: 4918.78,money2: 1951.792},{id: 5,name: 测试测试测试测试测试测试测试,phone: 11111111111,point: 426,money: 3075.37,money2: 1828.802}]
}1.3 属性是布尔值 1‘name|1’: Boolean 随机生成一个布尔值值为 true 的概率是 1/2值为 false 的概率同样是 1/2 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({list|5: [{//属性值自动加1,后面1是初始值id|1: 1,//测试这个词语 重复随机次数最大9次最小重复2次name|2-9: 测试,phone|11: 1,//生成200到1000以内随机的整数point|200-1000:0,//生成整数部分大于等于3000小于等于8000max小数部分保留2位的数据money|3000-8000.2:0,//整数部分大于等于3000小于等于8000max小数部分随机保留2到4位的小数money2|1000-2000.2-4:0,//随机生成布尔值默认为ture,为true概率1/2status|1:true}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html2‘name|min-max’: value 随机生成一个布尔值值为 value 的概率是 min / (min max) !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({list|5: [{//属性值自动加1,后面1是初始值id|1: 1,//测试这个词语 重复随机次数最大9次最小重复2次name|2-9: 测试,phone|11: 1,//生成200到1000以内随机的整数point|200-1000:0,//生成整数部分大于等于3000小于等于8000max小数部分保留2位的数据money|3000-8000.2:0,//整数部分大于等于3000小于等于8000max小数部分随机保留2到4位的小数money2|1000-2000.2-4:0,//随机生成布尔值默认为ture,为true概率1/2status|1:true,default|1‐3:true}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html1.4 属性值是Object 1‘name|count’: object 从属性值 object 中随机选取 count 个属性。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body/body
scriptlet data Mock.mock({list|5: [{//属性值自动加1,后面1是初始值id|1: 1,//测试这个词语 重复随机次数最大9次最小重复2次name|2-9: 测试,phone|11: 1,//生成200到1000以内随机的整数point|200-1000:0,//生成整数部分大于等于3000小于等于8000max小数部分保留2位的数据money|3000-8000.2:0,//整数部分大于等于3000小于等于8000max小数部分随机保留2到4位的小数money2|1000-2000.2-4:0,//随机生成布尔值默认为ture,为true概率1/2status|1:true,default|1‐3:true,//2的意思是从后面对象中随机选取2个属性进行展示detail|2:{id:1,date:2005‐01‐01,content:记录}}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html浏览器显示结果 {list: [{id: 1,name: 测试测试测试测试测试测试测试测试,phone: 11111111111,point: 733,money: 6534.66,money2: 1930.35,status: true,default‐3: false,detail: {content: 记录,id: 1}},{id: 2,name: 测试测试测试测试测试,phone: 11111111111,point: 918,money: 6777.32,money2: 1738.8219,status: true,default‐3: true,detail: {date: 2005‐01‐01,content: 记录}},{id: 3,name: 测试测试测试测试测试测试,phone: 11111111111,point: 415,money: 5692.17,money2: 1140.123,status: true,default‐3: true,detail: {date: 2005‐01‐01,id: 1}},{id: 4,name: 测试测试测试测试测试测试测试测试,phone: 11111111111,point: 495,money: 5877.03,money2: 1632.1647,status: true,default‐3: true,detail: {date: 2005‐01‐01,content: 记录}},{id: 5,name: 测试测试测试测试测试测试测试测试,phone: 11111111111,point: 229,money: 6538.04,money2: 1383.342,status: true,default‐3: false,detail: {date: 2005‐01‐01,content: 记录}}]
}可以发现模拟生成的数据结果是从对象中随机选取得几个数据。2 ‘name|min-max’: object从属性值 object中随机选取 min到 max个属性 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({list|5: [{//属性值自动加1,后面1是初始值id|1: 1,//测试这个词语 重复随机次数最大9次最小重复2次name|2-9: 测试,phone|11: 1,//生成200到1000以内随机的整数point|200-1000:0,//生成整数部分大于等于3000小于等于8000max小数部分保留2位的数据money|3000-8000.2:0,//整数部分大于等于3000小于等于8000max小数部分随机保留2到4位的小数money2|1000-2000.2-4:0,//随机生成布尔值默认为ture,为true概率1/2status|1:true,default|1‐3:true,//2的意思是从后面对象中随机选取2到3个属性进行展示detail|2-3:{id:1,date:2005‐01‐01,content:记录}}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html1.5 属性值是数组 1‘name|count’: array 通过重复属性值 array 生成一个新数组重复次数为 count 2‘name|min-max’: array 通过重复属性值 array 生成一个新数组重复次数大于等于 min小于等于 max。 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({list|2-6: [{//属性值自动加1,后面1是初始值id|1: 1,//测试这个词语 重复随机次数最大9次最小重复2次name|2-9: 测试,phone|11: 1,//生成200到1000以内随机的整数point|200-1000:0,//生成整数部分大于等于3000小于等于8000max小数部分保留2位的数据money|3000-8000.2:0,//整数部分大于等于3000小于等于8000max小数部分随机保留2到4位的小数money2|1000-2000.2-4:0,//随机生成布尔值默认为ture,为true概率1/2status|1:true,default|1‐3:true,//2的意思是从后面对象中随机选取2到3个属性进行展示detail|2-3:{id:1,date:2005‐01‐01,content:记录}}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html 2 数据占位符定义规范 Mock.Random 是一个工具类用于生成各种随机数据。Mock.Random 的方法在数据模板中称为『占位符』. 书写格式为: 占位符(参数 [参数]) 内置方法列表 TypeMethod基本类型boolean, natural, integer, float, character, string, range, date, time, datetime, now图片image, dataImage颜色color文本paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle姓名first, last, name, cfirst, clast, cname网站url, domain, email, ip, tld地址area, region编号guid, id使用时只需要把值设置成 方法名【内置列表名】 即可比如生成一个随机的 Email 2.1 基本方法 可以生成随机的基本数据类型 1string 字符串 2integer 整数 3date 日期 示例如下所示 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({list|10: [{id|1: 1,//生成随机字符串作为名称string是内置方法name:string,//生成随机数字point:integer,//随机日期birthday:date}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html浏览器运行显示结果如下所示 {list: [{id: 1,name: (mq,point: 5083791101873200,birthday: 1977-07-13},{id: 2,name: isp,point: 6599960830871660,birthday: 1980-01-10},{id: 3,name: h5w%z,point: 5930212585321868,birthday: 1986-02-09},{id: 4,name: 4G!,point: -2998846183626736,birthday: 2005-11-15},{id: 5,name: FxRo,point: 1335300809353096,birthday: 2007-05-15},{id: 6,name: sSpX,point: 4263721724318444,birthday: 2008-07-05},{id: 7,name: 3gyb3y,point: -7937459295974808,birthday: 2009-07-29},{id: 8,name: $hHr9,point: -1902814810400284,birthday: 1985-06-09},{id: 9,name: s)Ib5Y,point: -4044267640262532,birthday: 1975-12-22},{id: 10,name: mn0L,point: 5526227040106936,birthday: 1974-02-03}]
}可以发现属性值都是随机生成的。 2.2 图像方法 内置方法image 随机生成图片地址 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({list|3: [{id|1: 1,name:string,point:integer,birthday:date,img:image}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html浏览器生成结果如下所示 {list: [{id: 1,name: ^XRWg,point: -4210258101944688,birthday: 1970-11-13,img: http://dummyimage.com/180x150},{id: 2,name: OGptm)z,point: -7325415739657424,birthday: 1998-01-08,img: http://dummyimage.com/250x250},{id: 3,name: nKFRq,point: 6928542938653648,birthday: 1987-12-21,img: http://dummyimage.com/250x250}]
}图片随机地址已经生成。 图片设置的其他用法 image() image( size ) image( size, background ) image( size, background, text ) image( size, background, foreground, text ) image( size, background, foreground, format, text ) size尺寸格式为‘宽x高’ background背景色格式为#FFFFFF text图片上显示的文本 foreground广本颜色 format图片格式可选值包括png、gif、jpg。 image() // “http://dummyimage.com/125x125” image(‘200x100’) // “http://dummyimage.com/200x100” image(‘200x100’, ‘#fb0a2a’) // “http://dummyimage.com/200x100/fb0a2a” image(‘200x100’, ‘#02adea’, ‘Hello’) // “http://dummyimage.com/200x100/02adeatextHello” image(‘200x100’, ‘#00405d’, ‘#FFF’, ‘Mock.js’) // “http://dummyimage.com/200x100/00405d/FFFtextMock.js” image(‘200x100’, ‘#ffcc33’, ‘#FFF’, ‘png’, ‘!’) // “http://dummyimage.com/200x100/ffcc33/FFF.pngtext!” 2.3 文本方法 title: 标题 cword(100) :文本内容 参数为字数 代码实例如下所示 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({list|3: [{id|1: 1,name:string,point:integer,birthday:date,img:image,//随机标题title:title,//随机标题内容字数为20content:cword(20)}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html显示结果 {list: [{id: 1,name: eQw!Qks,point: 2809586035596492,birthday: 1996-12-28,img: http://dummyimage.com/336x280,title: Dxmessvmjh Ykcqcqi Nncy Cwbhicpgj Smdmbbk Zwbsjrhww Qohelmygyxcontent: 无深性命象院积少时到但共院太理音究维生学},{id: 2,name: RgS*,point: -1288728653110828,birthday: 2005-01-12,img: http://dummyimage.com/720x300,title: Ussi Yngavtemlr Kryvkh,content: 好道立或易标花天外路位使身称深作响向之们},{id: 3,name: e^o,point: 2829338975044496,birthday: 1999-01-29,img: http://dummyimage.com/120x600,title: Woy Gswrz Hwmrxx,content: 产写总必指农进和专许想式层人位心准适开习}]
}可以发现 title 生成随机的英文标题 cword(字数)生成随机的中文标题 3其他的文本方法 l 单个字符 character l 英文单词 word word(length) word(min,max) l 英文句子 sentence sentence(len) sentence(min,max) l 中文汉字 cword cword(len) cword(min,max) l 中文句子 csentence csentence(len) csentence(min,max) l 中文段落 cparagraph cparagraph(len) cparagraph(min,max) l 中文标题 ctitle ctitle(len) ctitle(min,max) 2.4 名称方法 1英文名生成 first 名 last 姓 name 姓名 name(middle) middle是否生成中间名字 name() // “Larry Wilson” name(true) //true表示生成 // “Helen Carol Martinez” 2中文名 cfirst 姓 clast 名 cname cname() // “袁军” 如果需要生成中文名称需要在前面加上c字母做一标识。 cname :中文名称 cfirst:中文姓氏 last:英文姓氏 使用实例如下所示 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({list|3: [{id|1: 1,//名name:cname,ename:last,cfirst:cfirst,point:integer,birthday:date,img:image,//随机标题title:title,//随机标题内容字数为20content:cword(20)}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html2.5 网络方法 可以生成url ip email等网络相关信息 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({list|3: [{id|1: 1,//名name:cname,ename:last,cfirst:cfirst,point:integer,birthday:date,img:image,//随机标题title:title,//随机标题内容字数为20content:cword(20),//生成地址url:url,//生成ipip:ip,//生成邮箱email:email}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html生成结果如下所示 {list: [{id: 1,name: 江强,ename: White,cfirst: 尹,point: 4877914021134976,birthday: 1971-07-20,img: http://dummyimage.com/160x600,title: Zmbq Lqkt Bvmukqilyb Qbtsdrdn Rzjhyqc Fbzw,content: 门层对表产么高习原四王从区照派天即也就布,url: news://wyqb.pa/fadm,ip: 41.185.151.157,email: h.dghxxobioldag.yu},{id: 2,name: 姚芳,ename: Miller,cfirst: 郑,point: 614768891928184,birthday: 1999-10-27,img: http://dummyimage.com/120x90,title: Igaermo Muwcd Oxuy Phrbpiooq Pmccbcx Jqiniwn,content: 断放活备者组不取平元数又技度研名于何越后,url: news://segyvpfd.vc/gfpyvz,ip: 133.35.163.143,email: u.xnesisksci.tc},{id: 3,name: 文霞,ename: Williams,cfirst: 龚,point: 1051041620263212,birthday: 2006-05-30,img: http://dummyimage.com/125x125,title: Ybmuoycm Jsvc Obb Jpydendf,content: 外素特不专现工却因与发属集身设本究且重传,url: nntp://oip.dz/wrqdpd,ip: 238.129.84.64,email: e.djfbicgdckpvlyvhvt.gn}]
}随机生成网络地址ip地址邮箱地址用法如下 //生成地址 ‘url’:url //生成ip ‘ip’:ip, //生成邮箱 ‘email’:email 2.6 地址方法 1生成中国大区region 区域 华北…… 2生成省份province 3生成城市city city(prefix) //prefix布尔值是否生成所属的省 city() // “唐山市” city(true) // “福建省 漳州市” 4生成县county county(prefix) //prefix布尔值是否生成所属省、市 county() // “上杭县” county(true) // “甘肃省 白银市 会宁县” 5生成邮政编码: zip 6生成身份证号 ID ID() // “420000200710091854” 7生成GUID字符串 guid guid() // “662C63B4-FD43-66F4-3328-C54E3FF0D56E” 生成实例如下所示 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
body
/body
scriptlet data Mock.mock({list|3: [{id|1: 1,//名name:cname,ename:last,cfirst:cfirst,point:integer,birthday:date,img:image,//随机标题title:title,//随机标题内容字数为20content:cword(20),//生成地址url:url,//生成ipip:ip,//生成邮箱email:email,//生成区域erea:region,//生成省市city:city(true),//县contry:county(true),id:ID,zip:zip,guid:guid}]})// 输出结果console.log(JSON.stringify(data, null, 2))
/script
/html 浏览器输出结果 {list: [{id: 1,name: 杨军,ename: Robinson,cfirst: 卢,point: 7707259653262132,birthday: 2017-02-08,img: http://dummyimage.com/336x280,title: Lhefgmvoo Aocod Wlbql Dsdhwm Mqdaoaa Oknucn Urrcw,content: 到局这方多再律求认办万员置特目且战持十省,url: cid://vnthestwl.tp/ijdlnclh,ip: 37.75.137.193,email: y.ddwhfbrgzfglsuyufkb.mw,erea: 华中,city: 香港特别行政区 九龙,contry: 宁夏回族自治区 固原市 泾源县,zip: 269948,guid: 8Bc7Cb4A-e114-53de-B815-9db9cD57faA1},{id: 2,name: 何敏,ename: Taylor,cfirst: 廖,point: 7537535106427220,birthday: 1973-07-31,img: http://dummyimage.com/240x400,title: Ajwmx Nmdfubn Qjolmdslq Cduoktjva,content: 强用回装近为为术白明养被队治走铁话格入他,url: telnet://cwow.no/rslekzq,ip: 79.188.30.248,email: h.bwullnxenhizew.mp,erea: 华东,city: 陕西省 咸阳市,contry: 西藏自治区 那曲地区 巴青县,zip: 386548,guid: 87b8a66c-13B7-eCde-f31e-Ae3E91493AE0},{id: 3,name: 叶娜,ename: Garcia,cfirst: 姚,point: 7922600921770400,birthday: 1972-04-01,img: http://dummyimage.com/250x250,title: Umumjnomv Aualxrhxs Dhbduggch Qcxv Uqjtmoytr,content: 里铁还角深分非新了时小入层素几立传压按和,url: telnet://jyft.nz/rypdqqpm,ip: 131.162.164.166,email: k.iddfzsxdvm.io,erea: 华东,city: 四川省 宜宾市,contry: 香港特别行政区 九龙 黄大仙区,zip: 497267,guid: 01EBF61D-0Eef-01dd-B971-74aEF67fd53e}]
}三、 Mock.js案例 1 需求分析 向Mock.js模拟好的书籍发送请求展示用户列表数据。 请求/user/list 请求方式get 2 模拟数据 let data Mock.mock(/user/list,get,{list|3: [{id|1: 1,//名name:cname,ename:last,cfirst:cfirst,point:integer,birthday:date,img:image,//随机标题title:title,//随机标题内容字数为20content:cword(20),//生成地址url:url,//生成ipip:ip,//生成邮箱email:email,//生成区域erea:region,//生成省市city:city(true),//县contry:county(true),id:ID,zip:zip,guid:guid}]})3 发送ajax请求 !DOCTYPE html
html langen
headmeta charsetUTF-8titleMock/titlescript srcjs/vuejs-2.5.16.js/scriptscript srcjs/axios-0.18.0.js/scriptscript srcjs/mock-min.js/script
/head
bodydiv idapp
table border1px; stylewidth: 600px;height: 60px;trtd编号/tdtd姓名/tdtd标题/tdtd地址/td/trtr v-for(u,k) in userstd{{k1}}/tdtd{{u.name}}/tdtd{{u.title}}/tdtd{{u.city}}/td/tr/table/div
/body
scriptlet data Mock.mock(/user/list,get,{list|3: [{id|1: 1,//名name:cname,ename:last,cfirst:cfirst,point:integer,birthday:date,img:image,//随机标题title:title,//随机标题内容字数为20content:cword(20),//生成地址url:url,//生成ipip:ip,//生成邮箱email:email,//生成区域erea:region,//生成省市city:city(true),//县contry:county(true),id:ID,zip:zip,guid:guid}]});new Vue({el:#app,data:{users:[],},created:function(){//发送ajax请求axios.get(/user/list).then((res){this.users res.data.list;})}})
/script
/html--------------------- 作者Armymans 来源CSDN 原文https://blog.csdn.net/qq_43652509/article/details/84029619 版权声明本文为作者原创文章转载请附上博文链接 内容解析ByCSDN,CNBLOG博客文章一键转载插件
