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};
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。