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 相关文章推荐
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
js获取通过ajax返回的map型的JSONArray的方法
Jan 09 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
Vue实现一个图片懒加载插件
Mar 11 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
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
angular.element方法汇总
2015/01/07 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
python登录豆瓣并发帖的方法
2015/07/08 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
深入理解python多进程编程
2016/06/12 Python
Python内置模块turtle绘图详解
2017/12/09 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
python 中如何获取列表的索引
2019/07/02 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
趣味运动会策划方案
2014/06/02 职场文书
小学生手册家长意见
2015/06/03 职场文书
总经理年会致辞
2015/07/29 职场文书
给领导敬酒词
2015/08/12 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers