详解vue-cli中模拟数据的两种方法

前端之家收集整理的这篇文章主要介绍了详解vue-cli中模拟数据的两种方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<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

猜你在找的Vue相关文章