vue-cli3使用mock数据的方法分析
本文实例讲述了vue-cli3使用mock数据的方法。分享给大家供大家参考,具体如下:
在前后端分离的开发模式中,后端给前端提供一个接口,由前端向后端发请求,得到数据后前端进行渲染。由于前后端开发进度的不统一,前端往往使用本地的测试数据进行数据渲染的测试。
正文开始
在vue-cli构建的项目,我们可以借助devServer开启一个服务,然后我们可以通过路由模拟一个接口来进行测试。
在vue-cli2和vue-cli3中的配置方式是不同的。下面分别展示
##vue-cli2
先放一张vue-cli2生成项目图片
mock文件夹是一个我自己创建的用来存放模拟数据的文件夹,其中有一个json文件,下面我们要对build目录下webpack.dev.conf.js进行配置
//引入文件 constgoodsList=require('../mock/goods.json'); //…… //配置devServer devServer:{ clientLogLevel:'warning', historyApiFallback:{ rewrites:[ {from:/.*/,to:path.posix.join(config.dev.assetsPublicPath,'index.html')}, ], }, hot:true, contentBase:false,//sinceweuseCopyWebpackPlugin. compress:true, host:HOST||config.dev.host, port:PORT||config.dev.port, open:config.dev.autoOpenBrowser, overlay:config.dev.errorOverlay ?{warnings:false,errors:true} :false, publicPath:config.dev.assetsPublicPath, proxy:config.dev.proxyTable, quiet:true,//necessaryforFriendlyErrorsPlugin watchOptions:{ poll:config.dev.poll, }, before(app){ app.get('/goods/list',(req,res,next)=>{ res.json(goodsList); }) }
后面的before(app)部分就定义了可以通过向/goods/list发送get请求来得到我们要的json文件。
同事我们在vue文件中只要
//利用了axios axios.get("/goods/list").then(res=>{ this.goodsList=res.data.result; }).catch(error=>{ console.log(error); });
就可以请求到数据
vue-cli3
vue-cli3主打自动化,0配置。但是我们往往需要进行一些配置,这时我们就要创建一个配置文件。目录结构如下
vue.config.js就是我们手动创建的配置文件,完整的配置项可以在官网看到,在这里我们着重于devServer
constmockdata=require('./mock/test.json'); module.exports={ devServer:{ port:4000, before(app){ app.get('/goods/list',(req,res,next)=>{ res.json(mockdata); }) } } }
这样就达到了相同的效果
希望本文所述对大家vue.js程序设计有所帮助。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。