标签：shang 加载 接口 http ref .com ios 第一个 技术分享
我们在做一个项目时前期可能没有后端提供接口模拟数据，那么作为前端就需要自己写json文件模拟数据加载。在Vue中只需要vue-resource（也可以使用axios，安装方法和vue-resource一样，具体使用方法可以去axios官网查看，在这里我使用vue的插件vue-resource）和json-server互相配合就可以实现数据模拟了。
1.安装vue-resource（Ajax请求）和json-server（mock数据）：
npm install vue-resource --save --registry=https://registry.npm.taobao.org --verbose
npm install json-server --save --registry=https://registry.npm.taobao.org --verbose
2.安装成功后在main.js引入依赖vue-resource，此时在Vue里就可以用$http进行Ajax请求了，
查看具体使用方法。：
3.在build文件夹的dev-server.js文件进行服务配置，具体如下图所示：
注意：(1).由于我们Vue开启的本地服务是localhost:8080，所以mock数据监控的端口不能是8080，只要不冲突就可以，我这里用的是localhost:8081，所以图中第73行是port+1。
(2).图中第68行的data.json就是我们的假数据文件，一般放在和index.html同级目录下，若不同级则需要修改路径。
(3).如果没有用代理访问，第72行的第一个参数直接写接口名字就可以了，但一般我们会用代理访问，所以这里写的是‘/api’，代理设置在下一步骤说明。
4.同时我们需要做一个代理表，这里我用api，访问这个代理就可以获取到数据，在config文件夹的index.js文件进行代理配置，如下图红框所示：
data.json文件随意写了个，如下图所示：
此时npm run dev重新开启服务，输入服务地址就可以看到已经成功mock数据：
6.接着就是在项目中用Ajax请求数据了，我们在之前安装了vue-resource插件并且进行依赖注入，在项目中可以直接进行请求，如下图所示：
在控制台输出的效果如下所示：
进一步console.log（res.body）输出效果如下所示：
至此我们已经实现了在Vue项目mock数据模拟后台请求，希望对大家有帮助。
Vue如何mock数据模拟Ajax请求
标签：shang 加载 接口 http ref .com ios 第一个 技术分享
原文地址：http://www.cnblogs.com/zishang91/p/7680569.html
