接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios
1，项目中使用moke
📓什么是mock？，mock就是假数据，除了数据是假的，其他内容都和正常工作中后端开发的接口都是一致的。我们现在就根据实际的情况，定义9个接口给大屏使用
📓 在src文件夹下新建文件夹mock，在mock文件夹下新建文件index.js,在index文件里写mock接口
📓 来建第一个接口
import Mock from "mockjs"; //导入mock
Mock.setup({ //设置延迟时间，最大程度的接近正式接口
timeout: 4000
})
Mock.mock("/api/info", "get", { //第一个参数是地址，第二个参数是该接口的请求方式，第三个参数是返回值
code: 200,
data: {
Tue: 123,
Wed: 231,
Thu: 2142,
Fri: 432,
Sat: 9271,
Sun: 8987,
},
});
📓以此类推 我们创建9个接口
import Mock from "mockjs";
Mock.setup({
timeout: 4000
})
Mock.mock("/api/info", "get", { //折线图接口
code: 200,
data: {
Tue: 123,
Wed: 231,
Thu: 2142,
Fri: 432,
Sat: 9271,
Sun: 8987,
},
});
Mock.mock("/api/info1", "get", { //饼图接口
code: 200,
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
});
Mock.mock("/api/info2", "get", { //环形图接口
code: 200,
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
});
Mock.mock("/api/info3", "get", { //柱状图接口
code: 200,
data: {
Tue: 123,
Wed: 231,
Thu: 2142,
Fri: 432,
Sat: 9271,
Sun: 8987,
},
});
Mock.mock("/api/info4", "get", {
code: 200,
data: {
Tue: 123,
Wed: 231,
Thu: 2142,
Fri: 432,
Sat: 9271,
Sun: 8987,
},
});
Mock.mock("/api/info5", "get", {
code: 200,
data: {
Tue: 123,
Wed: 231,
Thu: 2142,
Fri: 432,
Sat: 9271,
Sun: 8987,
},
});
Mock.mock("/api/info6", "get", {
code: 200,
data: {
Tue: 123,
Wed: 231,
Thu: 2142,
Fri: 432,
Sat: 9271,
Sun: 8987,
},
});
Mock.mock("/api/info7", "get", {
code: 200,
data: {
Tue: 123,
Wed: 231,
Thu: 2142,
Fri: 432,
Sat: 9271,
Sun: 8987,
},
});
Mock.mock("/api/info8", "get", {
code: 200,
data: {
Tue: 123,
Wed: 231,
Thu: 2142,
Fri: 432,
Sat: 9271,
Sun: 8987,
},
});
📓在main.js里导入我们创建在mock下的index文件
📓这时候，我们就已经新建了9个接口，下一步就是封装axios了
2.封装axios
📓axios刚初始化时肯定是不好使用的，所以我们得需要进行2次封装
📓在src文件夹下面新建一个文件夹utlis文件，文件夹下面新建文件requests.js用来二次封装axios
📓 在文件里倒入axios，并使用axios的create方法创建axios实例，并导出
import axios from "axios"
const requests = axios.create({
baseURL:"" //这里放接口请求域名
})
//写请求拦截器或者想要拦截器
requests.interceptors.request.use(config=>{ //我这里写请拦截器 给每个请求加上请求头
config.headers.Authorization = 'Bearer ' + "123123"
return config
})
requests.interceptors.response.use(config=>{ //这里我写了一个响应拦截器，这里对所有接口返回值是code的在控制台上打印响应成功
if(config.data.code == 200){
console.log("响应成功")
}
return config
})
export default requests //将我们二次封装处理好的axios默认导出
3.统一处理接口
📓当我们axios封装好了，mock数据也有了后，这时，我们就需要做一件事情了，要对请求接口进行加工，便于我们更好的进行管理
📓在src-views里新建文件夹api，api文件夹下新建文件index.js
📓在index,js文件里面导入我们二次封装后的axios，并在里面设置请求的方式，和需要请求的接口，并进行导出
import requests from "@/utlis/requests";
// 折线图接口
export function info(){
return requests({
url:"/api/info",
method:"GET"
})
}
// 饼图接口
export function info1(){
return requests({
url:"/api/info1",
method:"GET"
})
}
// //环形图接口
export function info2(){
return requests({
url:"/api/info2",
method:"GET"
})
}
// //柱状图接口
export function info3(){
return requests({
url:"/api/info3",
method:"GET"
})
}
// 折线图接口
export function info4(){
return requests({
url:"/api/info4",
method:"GET"
})
}
// 折线图接口
export function info5(){
return requests({
url:"/api/info5",
method:"GET"
})
}
// 折线图接口
export function info6(){
return requests({
url:"/api/info6",
method:"GET"
})
}
// 折线图接口
export function info7(){
return requests({
url:"/api/info7",
method:"GET"
})
}
// 折线图接口
export function info8(){
return requests({
url:"/api/info8",
method:"GET"
})
}现阶段当进行了接口的二次封装后，后续我们直接调用函数方法，就能进行接口请求了，下一节将进行页面的填充和echarts的渲染
