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 继承详解(三)
Jul 13 Javascript
Jquery 扩展方法
May 06 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
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 MYSQL中插入当前时间
2008/04/06 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
Node.js Streams文件读写操作详解
2016/07/04 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
tensorflow获取变量维度信息
2018/03/10 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
将pandas.dataframe的数据写入到文件中的方法
2018/12/07 Python
python实现连续图文识别
2018/12/18 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
python numpy库np.percentile用法说明
2020/06/08 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
时尚孕妇装:Ingrid & Isabel
2019/05/08 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
一套C++笔试题面试题
2012/06/06 面试题
程序集与命名空间有什么不同
2014/07/25 面试题
Linux内核产生并发的原因
2012/07/13 面试题
长辈证婚人证婚词
2014/01/09 职场文书
设计师求职信
2014/07/01 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
2014年居委会工作总结
2014/12/09 职场文书
青春雷锋观后感
2015/06/10 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
python playwright之元素定位示例详解
2022/07/23 Python