vue3重构通用后台管理系统

vue3的一些区别

和vue2不同的是，vue3使用vite进行构建框架，在我的主观感受来看速度是变快了，还有vue3使用了setup来将vue2的data优化了，还可以使用setup语法糖。在vue3中没有了this要实现对应的操作就需要使用proxy来操作，还有就是vue3需要使用一些方法useRouter还有useStore都需要引用，还有一些方法也是引用的进行使用。

关于项目

完成的功能十分类似，就是完成通用后台管理系统。在实现的时候，使用了elementplus（适用于vue3），谈几个创新的点。

配置环境

const env = import.meta.env.MODE || 'prod'

const EnvConfig = {
    development: {
        baseApi: '/api',
        mockApi: 'https://www.fastmock.site/mock/300283cb590d2022f75682f11a1848b0/api',
    },
    test: {
        baseApi: '//test.future.com/api',
        mockApi: 'https://www.fastmock.site/mock/300283cb590d2022f75682f11a1848b0/api',
    },
    pro: {
        baseApi: '//future.com/api',
        mockApi: 'https://www.fastmock.site/mock/300283cb590d2022f75682f11a1848b0/api',
    },
}

export default {
    env,
    // mock的总开关,
    mock: false,
    ...EnvConfig[env]
}

env获得的是当前的环境，默认的是prod，用相关的es6语法进行匹配，envconfig得到env的值，得到baseApi和mockApi，仔设置一个mock为开关。在后续的请求中，将mock置为false就关闭了mock开关。

axios请求的封装

创建axios实例对象

const service = axios.create({
    baseURL: config.baseApi
})

在请求之前干些事情

service.interceptors.request.use((req) => {
    //可以自定义header
    //jwt-token认证的时候 会使用到
    return req;
})

在请求之后干些事情

service.interceptors.response.use((res) => {
    // 可以直接在这里结构 这样拿数据就不会那么麻烦了
    // console.log(res.data)
    const { code, data, msg } = res.data
    //根据公司后端 协商的情况来决定
    if (code == 200) {
        return data
    } else {
        //网络请求错误
        ElMessage.error(msg || NETWORK_ERROR)
        return Promise.reject(msg || NETWORK_ERROR)
    }
})

当返回的res.data.code不是200的时候，就发消息提示。

function request(options) {
    options.method = options.method || 'get'
    if (options.method.toLowerCase() == 'get') {
        options.params = options.data
    }
    //对mock的处理
    let isMock = config.mock
    if (typeof options.mock !== 'undefined') {
        isMock = options.mock
    }
    //对线上环境做处理
    if (config.env == 'prod') {
        //不给你用到mock的机会
        service.defaults.baseURL = config.baseApi
    } else {
        service.defaults.baseURL = isMock ? config.mockApi : config.baseApi
    }
    return service(options)
}

ismock就是上面我说的情况，ismock默认的值为false，mock不存在的时候，ismock就是 使用baseApi mock存在的时候，isMock为true 使用的就是mockApi

将请求封装到Api

将请求封装到api.js中，将所有的方法封装到api.js中

将vuex中的数据长时间保存

const menu = JSON.parse(localStorage.getItem('menu'))
state.menu = menu
const menuArray=[]

vuex中的menu的数据 就在刷新的时候menu就会丢失,把数据存入localstorage中,再从locastorage里面拿出来

导航守卫

router.beforeEach((to, from, next) => {
    store.commit('getToken')
    const token = store.state.token
    if (!token && to.name !== "login") {
        next({ name: 'login' })
    } else if (!checkRouter(to.path)) {
        next({ name: 'home' })
    } else {
        next()
    }
})

如果跳转的目标不是login也不是token就会跳转 如果不存在目标的路由就不实现跳转 其余的情况就是会跳转到login页面