五、Vue3+Ts+Vite+AntdUI构建后台基础模板——VUEX与加载中

一、修改一些配置

//.eslintrc
module.exports = {
    ......
    rules: {
       ......
        'import/no-unresolved': [
           ...
        ],
        //原有基础上加入以下
        'no-param-reassign': [
            'error',
            {
                props: true,
                ignorePropertyModificationsFor: [
                    'state', // for vuex state
                ],
            },
        ],
    },
};

复制代码

二、vuex加入loading模块

1. store目录下的index.ts

// 文件地址：@/store/index.ts
// 前面这里有书写错误,
// 正确内容是：
import { createStore } from 'vuex';

export default createStore({
    state: {},
    mutations: {},
    actions: {},
    modules: {},
});

复制代码

2. store目录下新建modules目录
3. modules目录下新建loading.ts

// @/store/modules/loading.ts
const loading = {
    namespaced: true,
    state: {
        loadingState: false,
    },
    getters: {},
    mutations: {
        showLoading(state) {
            state.loadingState = true;
        },
        hideLoading(state) {
            state.loadingState = false;
        },
    },
    actions: {},
};
export default loading;
复制代码

4. 修改store目录下的index.ts

import { createStore } from 'vuex';
import loading from '@/store/modules/loading';

export default createStore({
    state: {},
    mutations: {},
    actions: {},

    modules: {
        loading,
    },
});
复制代码

三、Layout加入加载中

<!--@/layout/index.vue-->
<template>
    <a-layout class="layout">
        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
            ......
        </a-layout-sider>
        <a-layout>
            <a-layout-header style="background: #fff; padding: 0 20px">
                ......
            </a-layout-header>
            <!--修改了以下部分-->
            <a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }">
                <a-spin :spinning="$store.state.loading.loadingState" :delay="300" size="large">
                    <router-view />
                </a-spin>
            </a-layout-content>
            <!---->
        </a-layout>
    </a-layout>
</template>
<script lang="ts">
    ......
</script>
<style lang="less" scoped>
    ......
</style>

复制代码

四、App.vue加入加载中

<!--@/App.vue-->
<template>
    <layout v-if="$route.meta.layout" />
    <a-spin :spinning="$store.state.loading.loadingState" :delay="300" size="large" v-else>
        <router-view />
    </a-spin>
</template>

<script lang="ts">
    ......
</script>

<style lang="less">
#app {
    width: 100%;
    height: 100%;
}
.ant-spin-nested-loading,
.ant-spin-container {
    width: 100%;
    height: 100%;
}
.ant-spin {
    max-height: unset !important;
}
</style>

复制代码

五、修改@/request/http.ts

import { message } from 'ant-design-vue';
import axios, { AxiosRequestConfig } from 'axios';
import store from '@/store';
import base from '@/request/base';

// 设置超时时间
const instance = axios.create({
    timeout: 1000 * 10,
});
// 设置公共路径 和 Content-Type
instance.defaults.baseURL = base.baseurl;

interface AxiosConfig extends AxiosRequestConfig {
    loading?: boolean;
}

const Fetch = ({
    url = '',
    method = 'GET',
    data = {},
    params = {},
    headers = {
        'Content-Type': 'application/json',
    },
    loading = true,
}: AxiosConfig) => {
    if (loading) {
        // loading
        store.commit('loading/showLoading');
    }

    return new Promise((resolve, reject) => {
        instance({
            url,
            method,
            data,
            params,
            headers,
        })
            .then((res) => {
                store.commit('loading/hideLoading');
                resolve(res.data.data);
            })
            .catch((err) => {
                store.commit('loading/hideLoading');
                message.error('请求失败');
                reject(err);
            });
    });
};

export default Fetch;

复制代码

六、修改mokc/login.ts

1. 加入响应延迟时间
2. 加入success参数

// mokc/login.ts
import Mock from 'mockjs';

export default [
    {
        // http://mockjs.com/examples.html
        url: '/mock/api/login',
        method: 'post',
        timeout: 500,
        // statusCode: 500,
        response: ({ body }) => {
            return {
                code: 200,
                success: true,
                message: 'ok',
                data: {
                    // query: body,
                    token: Mock.Random.string('lower', 200),
                },
            };
        },
    },
];

复制代码

七、测试请求时的加载中

1. 运行项目
2. 访问http://localhost:3000/#/login
3. 登录出现加载正常显示
4. 完成VUEX与加载中开发

八、源代码地址

https://github.com/jiangzetian/vue3-admin-template
复制代码

九、视频演示及源码

本文演示视频：点击浏览

更多前端内容欢迎关注公众号：天小天个人网