uin-app+mockjs实现本地数据模拟
最近在开发项目的时候，需要用到mockjs这个包来实现前端本地数据的模拟，下面我就来说一下具体步骤：
前言
uni-app将自己的配置融合到了vue.config.js中，所以需要自己配置，需要在package.json的同级目录下新建一个vue.config.js；ajax请求的路由，因为这个路由我们希望拿到模拟数据，所以用webpack的devserve来拦截。拦截之后通过mockjs，由它来生成模拟数据，然后返回模拟值。
步骤
在vue.config.js中加入下面代码：
constMock=require('./mock/index.js');
module.exports={
chainWebpack:(config)=>{
config.resolve.alias
.set('@',resolve(__dirname,'/'))//设置@为src目录的别名)
},
css:{
....
}
},
devServer:{
contentBase:path.join(__dirname,'mock'),
compress:true,
port:8080,
overlay:{
warnings:false,
errors:true
},
before(app){
Mock(app)
}
}
};
devserver的配置中的before配置项是拦截路由请求。我们把全部交给Mock(app)处理；然后打开mock/index.js写入如下代码：
constaddressesMock=require('./addresses');
constattendanceMock=require('./attendance');
constattendanceListMock=require('./attendance-list');
....
functionMock(app){
addressesMock(app)
attendanceMock(app)
attendanceListMock(app)
.....
}
module.exports=Mock;
打开addresses写入你需要mock的数据就ok啦
varMockjs=require('mockjs')
const{Random}=Mockjs;
constphonePrefix=['132','135','189']
constindex=Math.floor(Math.random()*phonePrefix.length)
varphone=phonePrefix[index]+Mockjs.mock(/\d{8}/)
constaddressesMock=function(app){
app.get('/api3/addresses',function(req,res){
vardata=Mockjs.mock({
//属性list的值是一个数组，其中元素的数量从1到10个都有可能，随机
'list|1-10':[{
'id|+1':0,
"accept_name":Random.cname(),
"mobile":phone,
"province_name":Random.province(),
"area":Mockjs.mock(/\d{6}/),
"city":Mockjs.mock(/\d{6}/),
"sex":parseInt(Random.boolean()),
"district":{
"districts":Random.province()+Random.city()+Random.county(),
"area":Random.county(),
"city":Random.city(),
"province":Random.province()
},
"street":"有一间公寓八栋",
"inner":false,
"lat":"",
"door_number":"AB1234",
"is_default":parseInt(Random.boolean()),
"province":Mockjs.mock(/\d{6}/),
"area_name":Random.county(),
"city_name":Random.city(),
"poiname":""
}]
})
res.json(data);
})
}
module.exports=addressesMock;
在需要接口的地方之间用就能得到相应数据了
this.$ajax.get('/api3/addresses').then(res=>{//调用接口
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。