Vue3 Vite+Mock数据+axios二次分装

有了Mock，前后端人员只需要定义好接口文档就可以开始并行工作，互不影响，只在最后的联调阶段往来密切；后端与后端之间如果有接口耦合，也同样能被Mock解决；测试过程中如果遇到依赖接口没有准备好，同样可以借助Mock；不会出现一个团队等待另一个团队的情况。这样的话，开发自测阶段就可以及早开展，从而发现缺陷的时机也提前了，有利于整个产品质量以及进度的保证。

首先我们要安装vue3 vite

搭建项目

npm init @vitejs/app webapp

cnpm init @vitejs/app webapp

yarn create @vitejs/app webapp

项目结构

然后去安装node包

yarn

 启动项目

yarn dev

 

这个时候就已经搭建成功

接下来去安装我们vue的相关依赖

vue-router，vuex，axios

yarn add vue-router@next vuex@next element-plus axios -S

sass

yarn add sass -D

然后我们配置路由

src下创建router文件夹，然后创建index.js文件

顺便在src下创建views文件夹，创建Login，Home页面

import {createRouter,createWebHashHistory} from 'vue-router'
import Home from '../views/Home.vue'

const routes=[
    {
        path:'/',
        name:'Home',
        component:Home,
    },
    {
        path:'/login',
        name:'Login',
        component:()=>(import('../views/Login.vue'))
    }
]

const router = new createRouter({
    history: createWebHashHistory(),
    routes
  })

  export default router;

需要在main.js引入，use(router).

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from '../src/router'

const app = createApp(App)
app.use(router).use(ElementPlus).mount('#app')

在App.vue里面需要添加

mock数据

在vite框架中我们如何获取环境变量

在main.js中

console.log("环境变量=>",import.meta.env)

fastmock 在线接口 Mock 平台

1.首先需要有fastmock账号

2.添加项目

 2.新增接口

 接口内容

如果数据报错， 我们可以将name字段的值改成字

 访问/admin/list接口后的结果,这个在线接口就可以被我们调用了。

 

mock数据真实数据切换代码

新建一个./config/index.js

const env = import.meta.env.MODE || 'production'
const EnvConfig = {
  development: {
    baseApi: '/api',
    mockApi: "https://www.fastmock.site/mock/a25438eb0934dc969aa1701452b7b0cd/api"
  },
  production: {
    baseApi: 'https://www.bawei.com/api',
    mockApi: "https://www.fastmock.site/mock/a25438eb0934dc969aa1701452b7b0cd/api"
  }
}

export default {
  env,
  mock: true,
  ...EnvConfig[env]
}

在main.js mock数据能否请求，再继续之后的代码逻辑

测试逻辑就是注视掉的代码，在之后的开发逻辑中并不需要

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from '../src/router'
//import config from './config'
//import axios from 'axios';
console.log("环境变量=>", import.meta.env)

//axios.get(config.mockApi + "/login").then(res => {
//  console.log(res)
//})

const app = createApp(App)
app.use(router).use(ElementPlus).mount('#app')

然后src/uitls/request.js

/**
 * axios的二次封装
 */
import axios from 'axios';
import config from '../config'
import { ElMessage } from 'element-plus'

const TOKEN_INVALID = 'Token认证失败，请重新登录';
const NETWORK_ERROR = '网络请求异常';

// 创建axios实例对象，添加全局配置
const _axios = axios.create({
  baseURL: config.baseApi,
  timeout: 8000
})

// 请求拦截
_axios.interceptors.request.use(req => {
  const headers = req.headers;
  if (!headers.Authorization) headers.Authorization = 'Bearer ';
  return req;
})

// 响应拦截
_axios.interceptors.response.use(res => {
  const { code, data, msg } = res.data;
  if (code === 200) {
    return data;
  } else if (code === 40001) {
    ElMessage.error(TOKEN_INVALID);
    const redirectUrl = window.location.href
    setTimeout(() => {
      window.location.href = `http://localhost:3000/login?redirectUrl=${redirectUrl}`
    }, 1500)
    return Promise.reject(TOKEN_INVALID)
  } else {
    ElMessage.error(msg || NETWORK_ERROR);
    return Promise.reject(msg || NETWORK_ERROR)
  }
})

/**
 * 请求函数核心
 * @param {*} options 请求配置
*/
function request(options) {
  // 没有传请求方法，设置一个默认请求
  // 双问号为：前面的值为null、undefined，则取后面的值，否则都取前面的值。
  options.method = options.method ?? 'get';
  // get 方法和其他方法的参数属性不一样是params
  if (options.method.toLowerCase() === 'get') {
    options.params = options.data;
  }
  // 防止生产环境必须调用线上地址
  if (config.env === 'production') {
    _axios.defaults.baseURL = config.baseApi;
  } else {
    _axios.defaults.baseURL = config.mock ? config.mockApi : config.baseApi;
  }
  return _axios(options)
}

export default request;

然后去src/api/index.js统一管理接口

import request from '../utils/request.js';

export const login = (data) => {
  return request({
    method: 'get',
    url: '/admin/list',
    data
  })
}

然后拿去页面请求数据

import { onMounted } from 'vue'
import { login } from '../api'
defineProps({
  msg: String
})
onMounted(()=>{
  login().then(res=>{
    console.log(res);
  })
})

最后能正常的请求数据，说明我的mock数据切换已经封装好了。