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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。