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 相关文章推荐
JS刷新当前页面的几种方法总结
Dec 24 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
Apr 11 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 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
c#中的实现php中的preg_replace
2009/12/21 PHP
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
php去除二维数组的重复项方法
2015/11/03 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
js 居中漂浮广告
2010/03/21 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
深入理解js promise chain
2016/05/05 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
[00:11]战神迅矛
2019/03/06 DOTA
python多进程操作实例
2014/11/21 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
用python按照图像灰度值统计并筛选图片的操作(PIL,shutil,os)
2020/06/04 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
客房主管岗位职责
2013/12/09 职场文书
读书活动实施方案
2014/03/10 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
护士个人总结范文
2015/02/13 职场文书
优秀党员个人总结
2015/02/14 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL