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操纵Cookie实现购物车程序
Nov 23 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
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
深入PHP中的HashTable结构详解
2013/06/13 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
php验证码生成器
2017/05/24 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
使用vuex的state状态对象的5种方式
2018/04/19 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Python读取表格类型文件代码实例
2020/02/17 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
python实现excel公式格式化的示例代码
2020/12/23 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
css3 矩阵的使用详解
2018/03/20 HTML / CSS
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
元旦晚会主持词
2014/03/24 职场文书
团日活动总结
2014/04/28 职场文书
设计师求职信
2014/07/01 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js