vue-cli3使用mock数据的方法分析
网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了vue-cli3使用mock数据的方法,结合实例形式分析了vue-cli3使用mock数据的相关实现方法与操作注意事项,需要的朋友可以参考下
本文实例讲述了vue-cli3使用mock数据的方法。分享给大家供大家参考,具体如下
在前后端分离的开发模式中,后端给前端提供一个接口,由前端向后端发请求,得到数据后前端进行渲染。由于前后端开发进度的不统一,前端往往使用本地的测试数据进行数据渲染的测试。
正文开始
在vue-cli构建的项目,我们可以借助devServer开启一个服务,然后我们可以通过路由模拟一个接口来进行测试。
在vue-cli2和vue-cli3中的配置方式是不同的。狼蚁网站SEO优化分别展示
## vue-cli2
先放一张vue-cli2生成项目图片
mock文件夹是一个我自己创建的用来存放模拟数据的文件夹,其中有一个json文件,狼蚁网站SEO优化我们要对build目录下webpack.dev.conf.js进行配置
// 引入文件 const goodsList = require('../mock/goods.json'); // …… // 配置devServer devServer: { clientLogLevel: 'warning', historyApiFallback: { rewrites: [ { from: /./, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, ], }, hot: true, contentBase: false, // since we use CopyWebpackPlugin. press: 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, // necessary for FriendlyErrorsPlugin 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
const mockdata = require('./mock/test.json'); module.exports={ devServer: { port:4000, before(app){ app.get('/goods/list',(req,res,next)=>{ res.json(mockdata); }) } } }
这样就达到了相同的效果
希望本文所述对大家vue.js程序设计有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程