Vue中结合MockJS实现接口的拦截和数据的获取
1.1 目录结构
mock
主要是存放mock
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8ef76247458181dc400a60cccbaac06f.png)
index.js
处理主要的逻辑
import Mock from "mockjs"
import user from "./modules/user"
const getBaseURL = 'http://localhost:9527/mock'
Mock.setup({
timeout: 800
})
Mock.mock(`${getBaseURL}/user/login`, "post", user.setUserInfo)
Mock.mock(RegExp(getBaseURL + '/user/userInfo' + '.*'), "get", user.getUserInfo)
export default {
Mock
}
modules
为模块,分别保存不同的数据
const setUserInfo = (options) => {
const userInfo = [
{
id: 9527,
username: "admin",
password: "admin",
nickname: "小火车况且况且",
token: "admin-token",
avatar:"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
}
]
return userInfo
}
const getUserInfo = options => {
console.log(options)
return 1234
}
export default {
setUserInfo,
getUserInfo
}
1.2 在main.js
中引入
import Vue from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"
import '@/mock'
Vue.config.productionTip = false
new Vue({
router,
store,
render: (h) => h(App)
}).$mount("#app")
2. 基本请求和参数获取
2.1 GET
请求和参数获取
GET
请求带参数需要使用正则拼接URL
地址- 类似于
Mock.mock(RegExp(getBaseURL + '/user/userInfo' + '.*'), "get", user.getUserInfo)
- 使用
RegExp(getBaseURL + '/user/userInfo' + '.*')
对URL
地址拼接 - 参数获取需要借助于
NodeJS
的querystring
模块 - 请求地址
http://localhost:9527/mock/user/userInfo?userId=9527
获取的参数为{userId: "9527"}
import qs from 'querystring'
Mock.mock(RegExp(getBaseURL + '/user/userInfo' + '.*'), "get", options => {
const {url} = options
const getParams = url.split('?')[1]
console.log(qs.parse(getParams))
})
2.2 POST
请求和参数获取
POST
请求相比于GET
请求简介,不需要拼接地址POST
的参数都是保存在options.body
中,但是是以JSON
字符串形式保存的,需要使用JSON.parse(options.body)
转换Mock.mock(`${getBaseURL}/user/login`, "post", options =>{
const getUserInfo = JSON.parse(options.body)
})
3. 使用axios
请求模拟(使用这种配置处理MOCK
的请求无法在调试的network
中查看请求地址)
- 配置请求地址
import axios from 'axios'
const Axios = axios.create({
baseURL: 'http://localhost:9527/mock',
withCredentials: true,
timeout: 50000
})
export default Axios
- 请求
import axios from '../axiosConfig'
export const userInfoApi = params => {
return axios.get(`/user/userInfo`, {params})
}
export const userLogin = params => {
return axios.post(`/user/login`, params)
}