vue使用mock模拟后台接口返回数据
vue 项目中使用 mock 模拟后台接口返回数据,当后台还未提供接口,前端可通过mock实现模拟接口请求,等后台数据接口准备完成,前端只需要修改请求的地址就行了。
·
一、项目引入mock依赖
npm install mockjs --save
或
cnpm install mockjs --save
二、准备数据文件和模拟接口的文件
1. src 文件夹下新建 mock 文件夹。
2. 在 mock 文件夹下新建 mockData 文件夹存放模拟数据的 json 文件。
如 login.js:
{
"token": "12333"
}
3. 在 mock 文件夹下新建 index.js 文件,用于引用 mockjs 实现拦截请求模拟接口。
文件内容如下:
//通过mockjs模块实现模拟数据
//对外暴露的是一个对象
import Mock from 'mockjs';
//模拟的数据需要引入进来
//对于一些模块:图片、json文件默认对外暴露【虽然你没有书写但是它已经暴露了】
import loginData from './mockData/login.json';
// 配置拦截 ajax 的请求时的行为,支持的配置项目有 timeout。
Mock.setup({
timeout: '200 - 400'
})
//Mock依赖包对外暴露的是一个Mock对象,这个对象提供的一个mock方法可以模拟数据
//参数:第一个参数 模块数据将来axios请求的地址 第二个参数:获取到的数据
Mock.mock("/mock/login", 'post', { code: 200, data: loginData });
三、在main.js文件中引入模拟接口的文件
在 vue 项目的 main.js 文件中引入刚刚写好的模拟数据接口的文件 mock / index.js 文件。
import '@/mock/index'
四、发送请求测试模拟的接口是否生效
main.js 中引入 axios 依赖,也可以自己封装一个发请求的文件。
//引入axios
import axios from 'axios';
Vue.prototype.$axios = axios;
在组件中发送请求,请求刚刚 mock 接口写好的那个路径。
mounted() {
this.$axios.post('/mock/login').then(function(res){
console.log('虚拟接口返回的数据:', res.data)
})
},
此时返回的数据 res.data 是模拟接口返回的数据:
{ code: 200, data: { "token": "12333"}}
更多推荐
已为社区贡献2条内容
所有评论(0)