在vue项目中, mock数据
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 请求了
在vue项目中, mock数据的更多相关文章
- 在vue项目中mock数据
第一步:安装: 在命令行中执行: npm install mockjs; 第二步:定义index.js文件 我们新建一个mock文件夹,此文件夹中建一个index.js文件:在index.js中输入以 ...
- vue 项目中如何在页面刷新的状态下保留数据
1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到loca ...
- Vue项目中v-for无法渲染数据
在Vue项目中,我们想要实现下面的布局效果 后端返回的数据格式如下,可以看出产品列表五张图的数据位于同一个数组中 而我的html结构如下: 我希望直接渲染左边一张大图,然后右边的四张小图通过v-for ...
- vue项目配置Mock.js
扯在前面 最近一直在忙跳槽的事情,博客也好久没有更新了,上次更新还是去年,不出意外的话,从今天起继续今年的博客之旅. 今天继续完善我之前的项目架构,从零开始搭建vue移动端项目到上线,有需要的同学可以 ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- 在vue项目中使用axios发送FormData
这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的 使用 application/x-www-form-ur ...
- Vue项目中使用Vuex + axios发送请求
本文是受多篇类似博文的影响写成的,内容也大致相同.无意抄袭,只是为了总结出一份自己的经验. 一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二 ...
- vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
随机推荐
- WinSock 异步I/O模型-1
异步选择(WSAAsyncSelect):异步选择基本定义 异步选择(WSAAsyncSelect)模型是一个有用的异步 I/O 模型.利用这个模型,应用程序可在一个套接字上,接收以 Windows ...
- 聊一聊JS的原型链之高级篇
首先呢JS的继承实现是借助原型链,原型链即__proto__形成的链条. 下面一个例子初步认识下原型链: function Animal (){ } var cat = new Animal() 我们 ...
- 基于hi-nginx的web开发(python篇)——起步
hi-nginx不仅让python web 应用跑得飞快,而且让相关开发变得简单敏捷. 关于hi-nginx的安装,请参考:https://www.cnblogs.com/hi-nginx/p/862 ...
- Spark Kudu 结合
Kudu的背景 Hadoop中有很多组件,为了实现复杂的功能通常都是使用混合架构, Hbase:实现快速插入和修改,对大量的小规模查询也很迅速 HDFS/Parquet + Impala/Hive:对 ...
- Nginx正向代理与反向代理
1.正向代理: 正向代理类似一个跳板机,代理访问外部资源. 典型应用:为在防火墙内的局域网客户端提供访问Internet的途径 如:IE例外设置代理服务器 正向代理配置实例:为不影响默认配置:添 ...
- 介绍C语言指针
最近心态不太好,但是还是控制自己刷一下算法题,但是看着多次出现的 “Segmentation fault”,心态又爆炸啦.我只想说:“我也早觉得有写一点东西的必要了.离三月十八日也已有两星期,忘却的救 ...
- C语言中数据类型的取值范围
C语言中数据类型的取值范围如下:char -128 ~ +127 (1 Byte)short -32767 ~ + 32768 (2 Bytes)unsigned short 0 ~ 65536 (2 ...
- Spring MVC的handlermapping之SimpleUrlHandlerMapping初始化
前面信息同BeanNameUrlHandlerMapping,这里不再过多分析,详情请看 :Spring MVC的handlermapping之BeanNameUrlHandlerMapping初始化 ...
- Java 并发编程实践基础 读书笔记: 第三章 使用 JDK 并发包构建程序
一,JDK并发包实际上就是指java.util.concurrent包里面的那些类和接口等 主要分为以下几类: 1,原子量:2,并发集合:3,同步器:4,可重入锁:5,线程池 二,原子量 原子变量主要 ...
- 工作中MySql的了解到的小技巧
工作中MySql的小技巧 1. 跑脚本时,经常遇到有则更新无插入的 逻辑操作:通常情况下,来一波if()判断然后选择 更新还是插入,前两天逛论坛时发现有人在比较REPLACE INTO 和 INSET ...