vue-cli3使用mock数据的方法分析


Posted in Javascript onMarch 16, 2020

本文实例讲述了vue-cli3使用mock数据的方法。分享给大家供大家参考,具体如下:

在前后端分离的开发模式中,后端给前端提供一个接口,由前端向后端发请求,得到数据后前端进行渲染。由于前后端开发进度的不统一,前端往往使用本地的测试数据进行数据渲染的测试。

正文开始

在vue-cli构建的项目,我们可以借助devServer开启一个服务,然后我们可以通过路由模拟一个接口来进行测试。

在vue-cli2和vue-cli3中的配置方式是不同的。下面分别展示

## vue-cli2

先放一张vue-cli2生成项目图片

vue-cli3使用mock数据的方法分析

mock文件夹是一个我自己创建的用来存放模拟数据的文件夹,其中有一个json文件,下面我们要对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.
  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, // 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-cli3使用mock数据的方法分析

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程序设计有所帮助。

Javascript 相关文章推荐
浅谈Javascript嵌套函数及闭包
Nov 09 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
JS留言功能的简单实现案例(推荐)
Jun 23 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
浅谈$_FILES数组为空的原因
Feb 16 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
Vue实现移动端拖拽交换位置
Jul 29 Javascript
JavaScript中Object、map、weakmap的区别分析
Dec 15 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 #Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 #Javascript
JavaScript实现动态留言板
Mar 16 #Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 #Javascript
js+canvas实现纸牌游戏
Mar 16 #Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 #Javascript
JS apply用法总结和使用场景实例分析
Mar 14 #Javascript
You might like
递归列出所有文件和目录
2006/10/09 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
详解WordPress开发中get_current_screen()函数的使用
2016/01/11 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
用python代码做configure文件
2014/07/20 Python
python使用Berkeley DB数据库实例
2014/09/26 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
小车司机岗位职责
2013/11/25 职场文书
大学生创业计划书的格式要求
2013/12/29 职场文书
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
小兵张嘎观后感
2015/06/03 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python