vue-cli项目中怎么使用mock数据


Posted in Javascript onSeptember 27, 2017

在vue项目中, mock数据可以使用 node 的 express模块搭建服务

1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件

vue-cli项目中怎么使用mock数据

2.在build目录下的 dev-server.js的文件作如下更改

var appData = require('../test/data.json')
// 获取数据
var apiRoutes = express.Router();

//get请求
apiRoutes.get('/seller',function(req,res){
 res.send({
  appData
 });
});

app.use('/api',apiRoutes);

3. 在.vue做请求, 就可以成功获取data.json的数据了, 下面使用 axios 进行请求

axios.get('/api/seller',{
     params: {
      ID: 12345
     }
   })
    .then(function (response) {
     console.log(response);
    })
    .catch(function (error) {
     console.log(error);
    });

请求成功, 获取到数据

vue-cli项目中怎么使用mock数据

4. 如过要做post请求, 需要对 dev-server.js 文件做对应的修改

apiRoutes.post('/seller',function(req,res){
 res.send({
  appData
 });
});

这样就可以在vue 项目中进行模拟 ajax 请求了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
JavaScript获取XML数据附示例截图
Mar 05 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
微信支付如何实现内置浏览器的H5页面支付
Sep 25 Javascript
js小数计算小数点后显示多位小数的实现方法
May 30 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
Jquery获取radio选中的值
May 05 jQuery
Vue.js组件通信的几种姿势
Oct 23 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
解决vue-cli项目webpack打包后iconfont文件路径的问题
Sep 01 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 #Javascript
javaScript实现滚动条事件详解
Mar 24 #Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 #Javascript
深入掌握 react的 setState的工作机制
Sep 27 #Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 #Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 #Javascript
微信小程序 按钮滑动的实现方法
Sep 27 #Javascript
You might like
php REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
ThinkPHP框架实现定时执行任务的两种方法分析
2018/09/04 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
Javascript !!的作用
2008/12/04 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
javascript基础语法——全面理解变量和标识符
2016/06/02 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
python利用datetime模块计算时间差
2015/08/04 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
Python实现FTP文件传输的实例
2019/07/07 Python
简单了解django缓存方式及配置
2019/07/19 Python
python turtle 绘制太极图的实例
2019/12/18 Python
2014年上半年工作自我评价
2014/01/18 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
火箭队口号
2014/06/18 职场文书
迎七一演讲稿
2014/09/12 职场文书
给上级领导的感谢信
2015/01/22 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python