php mysql网站开发全程实例,网站模板整站,网页设计与制作教程第四版课后答案,区校合作网站建设方案Easy Mock以及VueMock.js模拟数据一、Mock.js简介Mock.js是一个可以模拟后端数据#xff0c;也可以模拟增删改查操作的js库基础语法规范数据模板中的每个属性由 3 部分构成#xff1a;属性名、生成规则、属性值#xff1a;name|rule: value语法规则说明name|min-max: string…Easy Mock以及VueMock.js模拟数据一、Mock.js简介Mock.js是一个可以模拟后端数据也可以模拟增删改查操作的js库基础语法规范数据模板中的每个属性由 3 部分构成属性名、生成规则、属性值name|rule: value语法规则说明name|min-max: string通过重复 string 生成一个字符串重复次数大于等于 min小于等于 maxname|count: string通过重复 string 生成一个字符串重复次数等于 countname|min-max: number生成一个大于等于 min、小于等于 max 的整数属性值 number 用来确定类型name|1: number初始值为 number以后每次请求在前面的基础上1name|min-max.dmin-dmax: number生成一个浮点数整数部分大于等于 min、小于等于 max小数部分保留 dmin 到 dmax 位name|1: boolean随机生成一个布尔值值为 true 的概率是 1/2值为 false 的概率同样是 1/2name|count: object从属性值 object 中随机选取 count 个属性name|min-max: object从属性值 object 中随机选取 min 到 max 个属性name|1: array从属性值 array 中随机选取 1 个元素作为最终值name|1: array从属性值 array 中按照顺序选取 1 个元素作为最终值name|count: array通过重复属性值 array 生成一个新数组重复次数为 countname|min-max: array通过重复属性值 array 生成一个新数组重复次数大于等于 min小于等于 max简单举例var arr[aa,bb,cc];var obj{name:MountainC44,old:23,sex:man};//数据模版简单举例{firstName|3:xue,//重复fei这个字符串 3 次。lastName|2-5:yangbo,//重复yangbo这个字符串 2-5 次。index|1:0, //属性值自动加 1初始值为 0age|20-30:25,//生成一个大于等于 20、小于等于 30 的整数属性值 25 只是用来确定类型weight|100-120.2-5:110.24,//生成一个浮点数,整数部分大于等于 100、小于等于 120小数部分保留 2 到 5 位。likeMovie|1:Boolean,//随机生成一个布尔值值为 true 的概率是 1/2值为 false 的概率同样是 1/2。friend1|1:arr,//从数组 arr 中随机选取 1 个元素作为最终值。friend2|1:arr,//从属性值 arr 中顺序选取 1 个元素作为最终值friend3|2-3:arr,//通过重复属性值 arr 生成一个新数组重复次数大于等于 2小于等于 3。obj1|2:obj,//从属性值 obj 中随机选取 2 个属性obj2|1-2:obj,//从属性值 obj 中随机选取 1 到 2 个属性。regexp1:/^[a-z][A-Z][0-9]$/,//生成的符合正则表达式的字符串}//返回示例{firstName:xuexuexue,lastName:yangboyangbo,index:0,age:28,weight:115.223,likeMovie:Boolean,friend1:bb,friend2:aa,friend3|2-3:[aa,bb,cc,aa,bb,cc],obj1:{name:MountainC44,old:23,},obj2:{name:MountainC44,},regexp1:sC2,}数据占位符//数据占位符使用{string|1-2: string, //随机生成字符串integer: integer(10, 30), //随机生成一个1030之间的正整数float: float(60, 100, 2, 2), //随机生成浮点数参数分别为整数部分最小值和最大值、小数部分保留最小位数和最大位数boolean: boolean, //随机生成booleandate: date(yyyy-MM-dd), //按照格式随机生成时间datetime: datetime, //随机生成时间now: now, //当前时间url: url, //随机生成url字符串email: email, //随机生成邮箱region: region, //随机生成地区city: city, //随机生成城市province: province, //随机生成省会county: county, //随机生成一个(中国)县upper: upper(title), //把生随机成的标题全部转为大写guid: guid, //随机生成一个 GUIDid: id, //随机生成一个 18 位身份证image: image(200x200), //随机生成一个大小为200x200的图片链接title: title, //随机生成一句标题其中每个单词的首字母大写cparagraph: cparagraph, //随机生成一段中文文本csentence: csentence, //随机生成一段中文文本range: range(2, 10) //返回一个内容从2开始到9的整型数组}//返回示例{string: A0L^Z,integer: 16,float: 82.23,boolean: true,date: 1994-09-16,datetime: 1994-10-22 02:30:32,now: 2018-10-21 10:31:00,url: mailto://tfoyemmcy.as/ppm,email: f.lqdfggdywulqhmm.com,region: 华南,city: 茂名市,province: 澳门特别行政区,county: 和平区,upper: LGHV FJV FDHNA ZJQO MKQEPMY BYVPYMU JRUPL,guid: EdAD386E-eCB3-e054-fBd3-D4BCd58bF2Dd,id: 630000201810081550,image: http://dummyimage.com/200x200,title: Powol Qhycsib Nvwf Bmiuvcek Ioisiu Sxdmrpdip,cparagraph: 又平你大万被然红义她之影此属且。定圆光半条社已上实参规持备特战划。打第一在感革会属利小年往。认七单边济火国风风速次支比容争连劳。目叫织新百却又处思只名发这实。什济安这自空东认十需打现军应。,csentence: 火事必该验导回声市然第别程确条状。,range: [2,3,4,5,6,7,8,9]}Mock对象方法简介Mock.mock( rurl?, rtype?, template|function( options ) ) 根据数据模板生成模拟数据拦截指定rtype类型的url为rurl的ajax请求返回数据模板中的模拟数据或执行回掉方法Mock.setup( settings )配置拦截 Ajax 请求时的行为。支持的配置项有timeout指拦截的 Ajax 请求的响应时间单位是毫秒Mock.Random.xxx()Mock.Random对象提供的方法在数据模板中称为占位符书写格式为 占位符(参数 [, 参数])Mock.valid( template, data )校验真实数据 data 是否与数据模板 template 匹配Mock.toJSONSchema( template )把 Mock.js 风格的数据模板 template 转换成 JSON Schema二、Easy MockEasy Mock是一个可视化并且能快速生成 模拟数据的持久化服务支持在线访问和本地部署Easy Mock 引入了Mock.js所以支持Mock.js语法规范创建Easy Mock项目使用Easy Mock 的Sagger特性快速生成Mock接口查看Mock接口进行测试在线测试三、VueMock.js模拟数据npm安装mockjs 创建mock.js文件编写mock.js文件main.js文件引入//mock.js文件const Mock require(mockjs);const data Mock.mock({// 属性 list 的值是一个数组其中含有 1 到 10 个元素foods|10-50: [{name: ctitle(2,10),img: image(600x600,#b7ef7c),brief: csentence(1,50),price|0-20.0-2: 1,num: 0,minusFlag: true,time: time,peisongfei|0-100.0-2: 1,limit|0-50: 1,}],sales|10-50: [{// 属性 id 是一个自增数起始值为 1每次增 1name: ctitle(2,10),img: image(600x600,#b7ef7c),brief: csentence(1,50),price|0-100.0-2: 1,num: 0,minusFlag: true,time: time,peisongfei|0-100.0-2: 1,limit|0-100: 1,}],});Mock.mock(/api/data, data); //对url为/api/data的ajax请求进行拦截返回data假数据Mock.mock(/api/data1, () ({data,}));//main.js文件 引入mock.jsrequire(./mock.js);//vue组件使用axios发送ajax请求created() {this.$axios.get(/api/data1).then((res) {console.log(res.data);});this.$axios.get(/api/data).then((res) {console.log(res.data);});}查看mock接口(在浏览器调试工具Network中不会有http请求因为已经被拦截)四、参考链接水平有限有写的不对的地方还请各位小伙伴多多指点共同学习进步
