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 jquery数组介绍
Jul 15 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
vue开发简单上传图片功能
Jun 30 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通用防注入程序 推荐
2011/02/26 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python中使用动态变量名的方法
2014/05/06 Python
python脚本内运行linux命令的方法
2015/07/02 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
Python+微信接口实现运维报警
2016/08/27 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
Python 处理图片像素点的实例
2019/01/08 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
Django模型修改及数据迁移实现解析
2019/08/01 Python
详解python中docx库的安装过程
2019/11/08 Python
Python实现爬取并分析电商评论
2020/06/19 Python
python计算auc的方法
2020/09/09 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
学生实习自我鉴定
2013/10/11 职场文书
心理健康心得体会
2014/01/02 职场文书
酒店开业策划方案
2014/06/02 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
初二学生评语大全
2014/12/26 职场文书
个人培训总结
2015/03/05 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python
面试分析分布式架构Redis热点key大Value解决方案
2022/03/13 Redis