Vue3+ElementPlus+Koa2 全栈开发后台系统=＞封装api,vuex封装,登陆组件完成⑥

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

1.login页面构建

<template>
  <h1>欢迎来到登陆</h1>
  <el-button type="primary" @click="goHome">返回首页</el-button>
</template>

<script>
import {ref,defineProps,reactive} from 'vue';
import {useRouter} from 'vue-router';

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

    this.$request.get('/private/v1/user/allUserList',{name:'czl'},{mock:true,loading:true}).then((res)=>{
      console.log(res)
    })
  },
  setup(){
    const router = useRouter();
    const goHome = ()=>{
      router.push('/welcome')
    }
    return {
      goHome
    }
  }
}


</script>

<style>

</style>

2.封装api.js

/**
 * api管理
 */
import request from './../utils/request'
 
export default {
    login(params) {
        return request({
            url: '/users/login',
            method: 'post',
            data:params
        })
    }
}

3.配置config.js调用mock api

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

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

4.挂载main.js

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'
import request from './utils/request';
import storage from './utils/storage';
import api from './api';
import store from './store'

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

5.重写router.js

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

const routes = [
    {
        name: 'home',
        path: '/',
        meta: { title:'首页' },
        component: Home,
        redirect:'/welcome',
        children: [
            {
                name: 'welcome',
                path: '/welcome',
                meta: { title:'欢迎体验Vue3项目' },
                component:() => import('./../views/Welcome.vue')
            },
        ]
    },
    {
        name: 'login',
        path: '/login',
        meta: { title:'登陆' },
        component:() => import('./../views/Login.vue')
    },
]

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

6.封装vuex,store/index.js

/**
 * Vuex状态管理
 */
import { createStore } from 'vuex'
import mutations from './mutations'
import storage from '../utils/storage'

const state = {
    userInfo : "" || storage.getItem("userInfo") // 获取用户信息
}
export default createStore({
    state,
    mutations
})

7.封装vuex,src/store/mutations.js

/**
 * Mutations业务层数据提交
 */
import storage from "../utils/storage";

export default {
    saveUserInfo(state,userInfo) {
        state.userInfo = userInfo;
        storage.setItem('userInfo',userInfo)
    }
}

8.修改登陆token src/utils/request.js

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

const TOKEN_INVALID = 'Token认证失败,请重新登陆!';
const NETWORK_ERROR = '网络请求异常,请稍后重试!';
@@ -21,9 +22,9 @@ const service = axios.create({
 * 请求拦截
 */
service.interceptors.request.use((req) => {
    // TODO
    const headers = req.headers;
    if(!headers.Authorization) headers.Authorization = 'Bear Czl'
    const { token } = storage.getItem('userInfo');
    if (!headers.Authorization) headers.Authorization = 'Bearer ' + token;
    return req;
})