MockJs结合json-server模拟后台数据
本文实例为大家分享了MockJs结合json-server模拟后台数据的具体代码,供大家参考,具体内容如下
说明
Mock.js是一款模拟数据生成器,可以根据模板生成数据、模拟网络请求,返回模拟数据等
更多细节参考
官网
示例
1.安装
下载
mkdirmoke-test cdmoke-test npminit sudonpminstall--save-devjson-servermockjsip mkdirserver#创建本地服务文件夹
2.配置json-server
在moke-test/server下创建index.js
//index.js constpath=require('path'); constjsonServer=require('json-server'); constip=require('ip').address(); constDB=require('./db.js'); constserver=jsonServer.create(); constrouter=jsonServer.router(DB());//将所创建的数据对象传入,以之生成相应的路由 constmiddlewares=jsonServer.defaults(); server.use(jsonServer.bodyParser); server.use(middlewares); server.use(router); server.listen({ host:ip, port:3122 },function(){ console.log(`JSONServerisrunninginhttp://${ip}:3122`); });
在相同目录下(moke-test/server)下创建db.js文件用于通过mockjs生成数据
//mock.js constMock=require('mockjs'); constRandom=Mock.Random; module.exports=function(){ constdata=Mock.mock({ 'id|+1':0 }); return{data}; }
3.使用mockjs动态生成假数据
生成假数据有两种方式
数据模板定义
数据占位符定义
1.数据模板定义
基本结构如下,详情可以查看官网
Mock.mock({ 'name|rule':value }) /* name:属性名 rule:生成规则 value:属性值 */
2.数据占位符定义
占位符只是在属性值字符串中占个位置,并不出现在最终的属性值中
1)、用@来标识其后的字符串是占位符,占位符之间空格隔开
2)、占位符是Mock.Random中的方法
3)、使用Mock.Random.extend()扩展占位符
4)、占位符也可以引用数据模板中的属性,并且优先使用。
Mock.mock({ 'list|5':[{ first:'@FIRST',//可以是大写的 }] })
3.Mock.Random工具类详解
//mock.js constMock=require('mockjs'); constRandom=Mock.Random; module.exports=function(){ //Random.extend用于自定义扩展 Random.extend({ courses:['音乐课','舞蹈课','地理课'], course:function(date){ returnthis.pick(this.courses) } }); constcourses=Mock.mock({ startClass:'@bool',//布尔值,可以传入参数设置频率 token:'@string("upper",2,8)',//随机字符串 createData:'@datetime("yyyy-MM-ddAHH:mm:ss")',//返回日期 image:'@image("200x100")',//模拟图片'x'链接 manager:'@cname',//中文名 'partners|3':[ '@name'//英文名 ], website:'@url', email:'@email', 'password|2':'**',//数据模板下,值为字符串表示按照规则重复字符串 'contents|1-20':[{//数据模板下,值为数组或者对象rule部分都规定了显示的元素数量 'id|+1':0,//数据模板下,值为数值表示初始值或者底数(按招规则细分) courseType:'@COURSE',//使用扩展 courseName(){//值可以是一个函数,用来细致模拟数据 returnthis.courseType+''+Random.natural(1,10)+'班' }, name:'@courseType@natural(1,10)班',//可以同时使用多个占位符,用空格隔开 'teacher':'@cname', position:'@courseType第@id教室',//引用当前数据模板中的内容 students:/\d{5,10}/,//使用正则规定数据格式 classTime:'@datetime("M月d日起每周三HH:mm")' }] }) return{courses}; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。