当前位置:首页 > 日记 > 正文

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

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

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

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

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);    });

请求成功, 获取到数据

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

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

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

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

相关文章

中国古代美女绘画方法和思路解析

中国古代美女绘画方法和思路解析

方法,中国古代,思路,美女,电脑软件,今天小编为大家分享中国古代美女绘画方法和思路,教程很不错,值得大家学习,一起来看看吧!效果图:具体的绘制过程:构思:这些年,从刚开始只是很自然的去画画(很少动脑子),到慢慢意识到其实这并不是一件简单的事儿,而是需…

js轮播插件的封装

js轮播插件的封装

封装,插件,电脑软件,js,本文为大家分享了js图片轮播插件的具体代码,供大家参考,具体内容如下我封装的这个轮播插件只需要获取到图片和按钮就可以啦。css 样式.body{ width: 700px; margin: 100px auto; position: relative; heig…

js 动态生成html 触发事件传参字符

js 动态生成html 触发事件传参字符

字符,动态生成,转义,事件,实例,通常,在使用 JS 动态生成 html 的过程中,会嵌入相应的样式、事件等属性元素,而这时经常会出现所谓的 “单、双引号不够用” 的情况,别急,这时可以利用 html 语言中的转义字符来解决。下面就来介绍一下相应的转义字…

Angular2中select用法之设置默认值

Angular2中select用法之设置默认值

事件,设置,默认值,详解,电脑软件,本文主要给大家介绍了Angular2中select用法之设置默认值与事件的相关内容,分享出来供大家参考学习,下面来看看详细的介绍:一、设置默认值: 现在有三个学生小明,小红,小黑,对双向绑定的student设置你想要的select值…

word怎么设置无法复制粘贴word无法

word怎么设置无法复制粘贴word无法

复制粘贴,设置,方法,步骤,电脑软件,  自己写好的word内容为了保护,我们可以拒绝复制粘贴的哦,那么下面就由小编给大家分享下word设置无法复制粘贴的技巧,希望能帮助到您。word设置无法复制粘贴的步骤步骤一:打开word文档,例如这篇文章段落。wo…

ps怎么合成美女站在车上的效果?

ps怎么合成美女站在车上的效果?

车上,站在,效果,美女,电脑软件,今天我们主要介绍关于ps合成相关的知识,下面是一个简单的合成例子,效果如下图。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、收集所用到的素材2、新建:图像大小设置为2…

js中数组插入、删除元素操作的方法

js中数组插入、删除元素操作的方法

操作,数组,删除元素,方法,电脑软件,实例如下:/* * 删除数组元素:Array.removeArr(index) */ Array.prototype.removeArr = function (index) { if (isNaN(index) || index>= this.length) { return false; } this.splice(index, 1)…

详解bootstrap用dropdown-menu实现

详解bootstrap用dropdown-menu实现

上下文菜单,详解,电脑软件,dropdown,bootstrap,详解bootstrap用dropdown-menu实现上下文菜单写在前面: 所谓上下文菜单,它与一般菜单的区别在于: 通过右键触发显示在鼠标右键点击处 鼠标在别处点击后,该菜单消失 实现方法: 在html中定义一个普通…

Vue.js实战之通过监听滚动事件实现

Vue.js实战之通过监听滚动事件实现

动态,实战,事件,锚点,电脑软件,前言前几天工作中在做项目的时候,需要实现一个动态锚点的效果,具体效果如下:如果是传统项目,这个效果就非常简单。但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚…

Easyui Tree获取当前选择节点的所

Easyui Tree获取当前选择节点的所

节点,父节点,选择,电脑软件,Easyui,只支持四层目录结构,比较笨的一个方法JS代码var node = $('#tree').tree('getSelected'); //获取该节点所有父节点 var parentAll = node.text; var flag = ">>"; …

在Word文档中标题前面的点如何去掉

在Word文档中标题前面的点如何去掉

文档,标题,电脑软件,Word,  给 Word 文档使用标题,前面总要出现一个小黑点,这是 Word标题的默认设置。如果不想要这个小黑点,能否把它去掉?以下是小编为您带来的关于Word标题前面的点去掉,希望对您有所帮助。Word标题前面的点去掉一、Word标…

Word中2013版进行从某页开始设置页

Word中2013版进行从某页开始设置页

设置,操作技巧,页码,操作步骤,电脑软件,  关于最新版本的office 2013,其实所有的使用教程在软件中就有,就是“帮助”选项,只不过我们使用的少而已。今天,小编就教大家在Word中2013版进行从某页开始设置页码的操作技巧。Word中2013…