哈喽,朋友们,今天唠唠mock
而且是在vue项目里的mock
一般来说,如果开发进度啥的都正常的话,mock的东西可有可无,但是身为前端,这个东西学还是有必要学一下的,并且,真的很简单。
入座,开炫。
官方定义:生成随机数据,拦截 Ajax 请求
下面我就直接说怎么使用的了,以理解为主,使用方法挺多的,可以看个人习惯,但是目的差不多,搞它。
1 安装mock
npm
npm install mockjs
yarn
yarn add mockjs
一般来说,可以直接安装成功,是的,就是这么的朴实无华
2 新建mock文件夹(建议但很有必要)
建在src下面即可,另外在mock文件夹之下,建一个index.js文件
3 在你的main.js文件夹里先引入mock文件(这一步先做,后面容易忘)
// 导入mock
import '@/mock/index.js'
4 现在再来看index.js文件夹里该怎么做了
// 导入
import Mock from "mockjs";
// 引入模拟数据(自定义)
import list from "./json/page.json";
// 模拟分类列表数据接口
Mock.mock("/mock/list", "get", {
code: 200,
message: "获取数据成功!",
data: list,
});
// 设置全局延时
Mock.setup({
timeout: '200-400'
})
相信很多朋友有些疑惑我的mock文件夹之下,另外建立的两个文件夹有什么用,这就来说,
其一,是api文件夹,这个稍后细说,主要是为了二次封装使用方便的。
其二,是json文件夹,这个就是我们放模拟数据的地方,也是模拟数据成功之后返回的。
{
"current":1,
"size": 10,
"total":100,
"data":{
"id":1,
"name":"阿喵",
}
}
5 其实到了这一步已经可以去请求数据了,但是为了更方便的发请求,我们可以把mock数据也进行二次封装
再新建一个mockAxios.js文件,内容:
// mock接口请求的封装 要拦截Ajax请求
import axios from "axios";
const service = axios.create({
baseURL: "/mock",
timeout: 20000,
});
service.interceptors.request.use((config) => {
return config;
});
service.interceptors.response.use(
(response) => {
return response.data;
},
(error) => {
alert("请求出错: " + error.message || "未知错误");
return Promise.reject(error);
}
);
export default service;
6 在mock文件夹下可再建一个api文件夹(命名自定义)
这里简单示例一下
import service from "@/service/mockAxios";
// 获取我的页面列表
export function getMyPages(params) {
return service({
url: '/list',
method: "get",
params
})
}
7 最后一步,就是引入请求,使用看是否成功了
引入
import { getMyPages } from "@/mock/api/page"
使用
created(){
this.getPageList()
},
methods:{
async getPageList() {
const res = await getMyPages()
console.log(res)
}
}
这里我们再看一下打印结果即可确认是否成功
这里是成功了的,拿到数据之后我们就可以像正常取后端数据那样自行使用了,后面的步骤,只需我们自定义数据跟方法即可
今天的分享就到这里了,感谢铁子们捧场嗷嗷嗷~~~