Vue3+ElementPlus+Koa2 全栈开发后台系统=＞环境配置,axios二次封装，storage二次封装⑤

本项目项目仓库地址:https://gitee.com/notlaughingzzm/vue3_elementPlus_admin.git

1.环境配置

1.一般我们的环境配置都是放在config里面的Index文件
创建config文件

/**
 * 环境配置封装
 */
const env = import.meta.env.MODE || 'prod';
const EnvConfig = {
    dev: {
        baseApi: '/',
        mockApi:'',
    },
    test: {
        baseApi: '//test.czl.com/api',
        mockApi:'',
    },
    prod: {
        baseApi: '//czl.com/api',
        mockApi:'',
    },
}

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

• 如果我们不写后端的部分,我们可以用Mock数据

1. mock.js官网
   2 fastmock官网

• 比如这里是我的一下demo mock例子
  

2.axios二次封装

• 创建request.js,封装响应拦截器,请求拦截器

/**
 * axios二次封装
 */
import axios from 'axios'
import config from '../config'
import { message } from 'ant-design-vue'
import router from '../router'

const TOKEN_INVALID = 'Token认证失败,请重新登陆!';
const NETWORK_ERROR = '网络请求异常,请稍后重试!';

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

/**
 * 请求拦截
 */
service.interceptors.request.use((req) => {
    // TODO
    const headers = req.headers;
    if(!headers.Authorization) headers.Authorization = 'Bear Czl'
    return req;
})


/**
 * 响应拦截
 */
 service.interceptors.response.use((res) => {
     const { code, data, msg } = res.data;
     if (code === 200) {
        return data
     } else if (code === 40001) {
         message.error(TOKEN_INVALID);
         setTimeout(() => {
            router.push('login')
         },1500)
         return Promise.reject(TOKEN_INVALID)
     } else {
         message.error(msg || NETWORK_ERROR);
         return Promise.reject(msg || NETWORK_ERROR)
    }
 })

 /**
  * 请求核心函数
  * @param {*} options请求配置
  */
function request(options) {
    options.method = options.method || 'get'
    if (options.method.toLowerCase() === 'get') {
        options.params = options.data
    }

    if (config.env === 'prod') {
        service.defaults.baseURL = config.baseApi
    } else {
        service.defaults.baseURL = config.mock ? config.mockApi:config.baseApi
    }
    
     return service(options)
}
 
['get', 'post', 'delete', 'patch'].forEach((item) => {
    request[item] = (url, data, options) => {
        return request({
            url,
            data,
            method: item,
            ...options
        })
    }
})

export default request;

• main.js去配置

import 'ant-design-vue/dist/antd.css'; // 引入antd样式
import App from './App.vue'
import router from './router'
import request from './utils/request';

const app = createApp(App);
app.config.globalProperties.$request = request;
app.use(router).use(Antd).mount('#app');

• 去登陆组建试用一下下,成功啦

 mounted(){
    // this.$request({
    //   method:'get',
    //   url:'/api/private/v1/user/allUserList',
    //   data:{
    //     name:'czl'
    //   }
    // }).then((res)=>{
    //   console.log(res)
    // })

    this.$request.get('/api/private/v1/user/allUserList',{name:'czl'},{mock:true,loading:true}).then((res)=>{
      console.log(res)
    })
  },

3.storage二次封装

1.utils文件夹里面创建Storage.js文件

/**
 * Storage二次封装
 * @author Czl
 */
import config from '../config'
export default {
  setItem(key,val){
    let storage = this.getStroage();
    storage[key] = val;
    window.localStorage.setItem(config.namespace,JSON.stringify(storage))  
  },
  getItem(key){
    return this.getStroage()[key]
  },
  getStroage(){
    return JSON.parse(window.localStorage.getItem(config.namespace) || "{}");
  },
  clearItem(item,key){ // 这里有点问题，本来以前是只传key，就可以指定删除，现在朋友帮忙做了处理，传入两个值，进行一个判断
    let storage = this.getStroage()
    if(key) {
      delete storage[item][key]
    }else {
      delete storage[item]
    }
    window.localStorage.setItem(config.namespace,JSON.stringify(storage))
  },
  clearAll(){
    window.localStorage.clear()
  }
}

2.挂载main.js

import { createApp } from 'vue'
import Antd from 'ant-design-vue'; // 引入antd
import 'ant-design-vue/dist/antd.css'; // 引入antd样式
import App from './App.vue'
import router from './router'
import request from './utils/request';
import storage from './utils/storage';

const app = createApp(App);
app.config.globalProperties.$request = request;
app.config.globalProperties.$storage = storage;
app.use(router).use(Antd).mount('#app');

3.测试，成功使用

 mounted(){
      this.$storage.setItem('userInfo',{age:30,name:'czl',num:100})
      console.log('userInfo=>',this.$storage.getItem('userInfo'));
      this.$storage.clearItem("userInfo","age")
      // this.$storage.clearAll()
    }