Vue中结合MockJS实现接口的拦截和数据的获取

Vue中结合MockJS实现接口的拦截和数据的获取

1. 首先引入MockJS

1.1 目录结构

1. mock主要是存放mock
   
2. index.js处理主要的逻辑

   // 引入 mock
   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
   }
   

3. 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' // 导入 mock  不需要的时候注释
Vue.config.productionTip = false
new Vue({
    router,
    store,
    render: (h) => h(App)
}).$mount("#app")

2. 基本请求和参数获取

2.1 GET请求和参数获取

1. GET请求带参数需要使用正则拼接URL地址
2. 类似于Mock.mock(RegExp(getBaseURL + '/user/userInfo' + '.*'), "get", user.getUserInfo)
3. 使用RegExp(getBaseURL + '/user/userInfo' + '.*')对URL地址拼接
4. 参数获取需要借助于NodeJS的querystring模块
5. 请求地址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)) // {userId: "9527"}
   })
   

2.2 POST请求和参数获取

1. POST请求相比于GET请求简介,不需要拼接地址
2. 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中查看请求地址)

1. 配置请求地址

   import axios from 'axios'
   const Axios = axios.create({
       baseURL: 'http://localhost:9527/mock',
       withCredentials: true,
       timeout: 50000
   })
   export default Axios
   

2. 请求

   import axios from '../axiosConfig'
   // 获取指定的用户信息
   export const userInfoApi = params => {
       return axios.get(`/user/userInfo`, {params})
   }
   // 用户登录
   export const userLogin = params => {
       return axios.post(`/user/login`, params)
   }