基于Vue3+Antd-vue+jsx语法的后台管理系统模板_antd +js+vue3后台模板

一、登录页面

import { reactive, defineComponent, onMounted } from 'vue';
// import { useStore } from 'vuex';
import './index.less';
import Final from '@/config/keys';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { Input, Checkbox, Button, message, Spin } from 'ant-design-vue';
import { onBeforeRouteLeave } from 'vue-router';
import router from '@/router';
import { useStore } from 'vuex';


const Login = defineComponent({
    name: 'LongLogin',
    setup() {
        const data = reactive({
            info: {
                username: 'admin',
                password: 'admin'
            },
            remembered: true,
            // 请求中状态
            spinning: false
        });

        const store = useStore();

        const login = () => {
            if (data.info.username !== '' && data.info.password !== '') {
                data.spinning = true;
                store.commit('user/setUserInfo', data);
                localStorage.setItem('username', data.info.username)
                data.remembered && localStorage.setItem(Final.TOKEN, "token");
                const from = router.currentRoute.value.query.from;
                router.push(from || '/');
            } else {
                message.error('登录信息不能为空！');
            }
        };

        const keyUpHandler = (e) => {
            if (e.keyCode == 13) {
                login();
            }
        };
        const forgetPaw = () => {
            message.warning('暂时无此功能')
        }

        onMounted(() => {
            document.addEventListener('keyup', keyUpHandler);
        });

        onBeforeRouteLeave((_to, _from, next) => {
            // 清除按键监控
            document.removeEventListener('keyup', keyUpHandler);
            next();
        });
        return () => (
            <div class="login" id="login">
                <Spin spinning={data.spinning}>
                    <div class="login-container">
                        <div class="login-form">
                            <h1 class="form-title">Vue3-管理系统</h1>
                            <p class="text-help">登录Vue3-管理系统</p>
                            <div class="form-item">
                                <Input
                                    size="large"
                                    type="text"
                                    value={data.info.username}
                                    onChange={(e) => {
                                        data.info.username = e.target.value;
                                    }}
                                    placeholder="username: 1"
                                    prefix={<UserOutlined />}
                                ></Input>
                            </div>
                            <div class="form-item">
                                <Input
                                    size="large"
                                    type="password"
                                    value={data.info.password}
                                    onChange={(e) => {
                                        data.info.password = e.target.value;
                                    }}
                                    show-password
                                    placeholder="password: 1"
                                    prefix={<LockOutlined />}
                                ></Input>
                            </div>
                            <div class="form-item" style="margin-bottom: 14px">
                                <Checkbox
                                    checked={data.remembered}
                                    onChange={(e) => {
                                        data.remembered = e.target.checked;
                                    }}
                                >
                                    记住我
                                </Checkbox>
                                <span
                                    class="forget-p-help cper"
                                    onClick={forgetPaw}
                                >
                                    忘记密码？
                                </span>
                            </div>
                            <div class="form-item">
                                <Button type="primary" onClick={login} style="width: 100%" size="large">
                                    登录
                                </Button>
                            </div>
                        </div>
                        <div class="login-welcome">
                            <p>鹿踏雾而来</p>
                            <p>鲸随浪而涌</p>
                        </div>
                    </div>
                </Spin>
            </div>
        );
    }
});

export default Login;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

二、首页

三、目录文件夹

四、Vue-router的封装

1、config.js

const getCom = (path, base) => {
    if (base) {
        return () => import(`@/${base}/${path}`)
    }
    return () => import(`@/views/${path}`)
}

// 主路由
export const routes = [
    {
        path: "/", name: "Home", component: getCom('layout', 'components'),
        redirect: '/',
        children: [
            {
                path: "/",
                name: "config",
                meta: { title: '配置', icon: 'CodeOutlined' }, component: getCom('empty'),
                children: [
                    {
                        path: "home",
                        name: "home",
                        meta: { title: '首页', icon: 'CodeOutlined' }, component: getCom('home'),
                    },
                    {
                        path: "System",
                        name: "System",
                        meta: { title: '系统', icon: 'SlidersFilled' }, component: getCom('system'),
                    },
                ]
            },
        ]
    },
    {
        path: '/login',
        name: 'Login',
        meta: { title: '登录' },
        component: getCom('login'),

    },
];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

2.index.js

import { createRouter, createWebHistory } from "vue-router";
import { routes } from "./config";
import NProgress from 'nprogress';
import { getToken } from '@/utils/index.js';

import store from '@/store';

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});


router.beforeEach(async (to, _, next) => {
  NProgress.start();

  const token = getToken();

  // 返回之前页面如有额外query参数可自行携带
  // 例如：
  // const { query } = to;
  // delete query.from;
  // next(`/?${Object.entries(query).join('&').replace(/,/g, '=')}`);

  if (token) {
    // 检测是否有用户信息
    // if (!store.state.user.info?.username) {
    //   // 获取用户信息
    //   await store.dispatch('user/getLoginUser');
    // }
    store.commit('user/setUserInfo', { info: { username: localStorage.getItem('username') } });
    // 有token时，前往登录页
    if (/^\/login.*/.test(to.path)) {
      if (to.query.from) {
        // 存在登录跳转回页面
        next(to.query.from);
      } else {
        next('/');
      }
    } else {
      store.commit('setting/routeChanged', {
        path: to.path,
        breadcrumbs: to.matched
          .filter((item) => item.meta?.title)
          .map((item) => item.meta?.title)
      });

      document.title = `Vue3 - 管理系统`;
      next();
    }
  } else {
    // 没有token

    // 判断是否是登录页，防止死循环
    if (/^\/login.*/.test(to.path)) {
      next();
    } else if (/^\/404/.test(to.path)) {
      const from = to.query.from;
      next(from ? `/login?from=${from}` : `/login`);
    } else {
      next(`/login?from=${to.path}`);
    }
  }
});

router.afterEach(() => {
  NProgress.done();
});




export default router;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

五、Vuex的封装

1.index.js

import { createStore } from "vuex";
import setting from './modules/setting';
import menu from './modules/menu';
import user from './modules/user';




export default createStore({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    setting,
    menu,
    user
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2、user.js

import Final from '@/config/keys';
const initInfo = {
  username: '',
  avatar: ''
};

const state = {
  info: initInfo,
  token: localStorage.getItem(Final.TOKEN) || ''
};

const mutations = {
  setToken(state, payload) {
    state.token = payload.token;
  },
  reset(state) {
    state.token = '';
    state.info = initInfo;
    localStorage.removeItem(Final.TOKEN);
  },
  setUserInfo(state, payload) {
    state.info = payload.info;
  }
};

const actions = {

};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

github地址：https://github.com/zhengdechang/vue3-admin