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:
}
})
.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-cli项目中怎么mock数据的更多相关文章
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源:components是放组件:router是定义路由相关的配置:view视图:app.vue是一个应用主组件:main.js是入口文件:
- vue cli 项目中设置背景图
https://blog.csdn.net/MoLvSHan/article/details/78204972 不能直接写成相对路径,像下面这这种就会报错 backgroundImage: " ...
- vue 项目初始化、mock数据以及安装less
vue 创建一个项目 1.首先建立一个空文件夹,然后将这个文件夹要放到码云或者其他代码管理平台. 例如码云: 在码云上建立一个项目,然后在控制台进入这文件夹执行 git clone 地址是码云上创建的 ...
- Vue+webpack项目中实现跨域的http请求
目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github ...
- Electron-vue实战(三)— 如何在Vuex中管理Mock数据
Electron-vue实战(三)— 如何在Vuex中管理Mock数据 作者:狐狸家的鱼 本文链接:Vuex管理Mock数据 GitHub:sueRimn 在vuex中管理mock数据 关于vuex的 ...
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- Vue+Typescript项目中使用echarts
方案一:推荐 在typescript+Vue的项目中引用echarts,为了加强引用,引入echarts和@types/echarts两个包,一个是工程依赖,一个是声明依赖. npm install ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理
在一些内部OA或者流转的文件,或者给一些客户的报价文件.合同,或者一些医院出示的给保险机构的病历资料等,有时候可能都希望快速的使用电子签章的处理方式来给文件盖上特定的印章,本篇随笔介绍基于Vue&am ...
随机推荐
- Jax-ws 开发webService ,并使用spring注入service类
由于使用myeclipse自动生成的Delegate,所以在使用service实现层的时候,默认创建的时候都是使用new的方法: 这样就导致每一次请求过来都得new一个新的:如果service有注入其 ...
- php7 redis扩展编译安装
提示:php7版本不支持redis2点几的扩展 上正文: wget -c https://github.com/phpredis/phpredis/archive/php7.zip unzip php ...
- StringBuilder的实现
先看看MS给出的官方解释吧 (http://msdn.microsoft.com/zh-cn/library/system.text.stringbuilder(VS.80).aspx) String ...
- Web性能优化工具WebPageTest(三)——本地部署(Windows 7版本)
这次先能够使用PC端的浏览器测试,首先需要下载官方的发布版本"WebPageTest 3.0". 1. agent:浏览器代理软件 2. mobile:移动端参数相关代码 3. w ...
- Virtualbox mac版centos7.2 安装共享文件夹
因为用的是mac本,在自己电脑上用virtualbox安装了centos7.2 虚拟机,为了实现与本机交换文件,需要用到贡享文件夹功能. 网上搜的时候多是windows版的,所以自己写一个mac版的. ...
- C#代码将html样式文件转为Word文档
首先有个这样的需求,将以下网页内容下载为Word文件. html代码: <div class="modal-body"> <div style=" ...
- Block Token 原理分析
介绍 文件权限检查由NameNode执行,而不是DataNode执行. 默认情况下,任何客户端都可以访问只有其块ID的任何块. 为了解决这个问题,Hadoop引入了块访问令牌的概念. 块访问令牌由Na ...
- ASP.NET Cookie和Session
Cookie和Session C#在服务器,JS在客户端 客户端验证不能代替服务端验证 Http HTTP属于应用层,HTTP 协议一共有五大特点:1.支持客户/服务器模式;2.简单快速;3.灵活;4 ...
- HDU 2080 夹角有多大II (数学) atan(y/x)分类求角度
夹角有多大II Problem Description 这次xhd面临的问题是这样的:在一个平面内有两个点,求两个点分别和原点的连线的夹角的大小.注:夹角的范围[0,180],两个点不会在圆心出现. ...
- Git下载、更新、提交使用总结
Git使用总结 1.下载代码到本地 1.1指定存储文件路径 1.运行git-bash.exe 2.指定盘符:cd f:work 1.2下载代码 命令:$ git clone <版本库的网址> ...