<p style="text-align: center">
在main.js中引入vue-resource模块,Vue.use(vueResource).
1.使用json-server(不能用post请求)
接下来找到build目录下的webpack.dev.conf.js
文件,在const portfinder = require('portfinder')
后面引入json-server
.
{
console.log('jSON Server is running')
})
现在重启服务器后浏览器地址栏输入localhost:3000能进入如下页面则说明json server启动成功了
现在找到config文件夹下的index.js文件,在dev配置中找到proxyTable:{} 并在其中配置
现在可以使用localhost:8080/api/apiName
请求json数据了
在项目中通过resource插件进行ajax请求
在data (){}
前使用钩子函数created:function(){
2.使用express(可以使用post请求)
在项目中新建routes文件并在其中新建api.js,内容如下:
{
if(apiData[req.params.name]){
res.json({
'error':'0',data:apiData[req.params.name]
})
}else{
res.send('no such a name')
}
})
接下来找到build目录下的webpack.dev.conf.js
文件,在const portfinder = require('portfinder')后
面引入express,如下:
现在找到config文件夹下的index.js文件,在dev配置中找到proxyTable:{} 并在其中配置
重启之后,便可以post请求访问数据了.
总结
以上所述是小编给大家介绍的vue-cli中模拟数据的两种方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
原文链接:https://www.f2er.com/vue/31687.html