Mock原理
你好! Mock其实是需要Axios配套使用的,本地数据模拟器,是以Js或Json的方式提供数据,利用Axios的拦截器性质,拦截固定的接口返回给相同的数据,这样我们就可以不依赖后端而进行独立开发。达到快速开发的效果,后期禁用Mock就可以正常访问接口了,直接进入调试阶段!
安装
npm install mock
npm install axios
安装完成后,我们需要在和src同级别的路径创建Mock文件夹(记得全小写mock),同时创建mock.js文件,如下
引入Mock
在Main.js中写如下代码,当需要前后联调的时候注释就好
require("../mock/mock.js");
Mock.js配置
const Mock = require('mockjs') //引入mock
//格式: Mock.mock("请求的URL地址",{"数据对象"})
// Mock.mock("/api/login", (req, res) => {});
//Mock.mock( rurl, rtype, template )
// Mock.mock("/api/login","post" (req, res) => {});
Mock.mock("/api/data", (req, res) => {
这里写路径
{
return Mock.mock({
"data": {
"identList": [
{
"Bid": "1",
"Name": "数码宝贝",
"Sys": "3",
"Count": "4",
"pCount": "5"
},
],
"totaCount": "1",
"totl": "2",
"Time": "123456789101112",
"page": {
"pageSize": 20,
"pageStart": 1,
"pageTotal": 4
}
},
"meta": {
"Code": "0",
"msg": "成功"
}
});
}
});
这里有坑,注意你的vue.config.js文件是否配置了代理,如果有代理的话要特别注意!!!
有代理的写法
代理写法
proxy: {
'/api': {
target: "127.0.0.1:8080",
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
},
}
页面引用
在封装的Api下写
import request from '@/utils/request'
export function getData() {
return request({
url: `data`,
method: 'get',
data: {}
})
}
在页面引入Api
import { getData } from "@/api/datas";
getData().then((res) => {
console.log(res)
});
没代理的写法
引入啥的自己写吧,上面都有!
this.$axios.get("/api/data").then(res => {
console.log(res);
});
就到这里了,该下班了,有不懂得可以私聊我~~