1. 设计登陆页

1.1 界面代码

• 创建src/views/admin/login/index.vue并完善如下：

 <template>
   <div class="login-wrapper">
     <div class="login-card">
       <div class="login-cover">
         <h1 class="login-title">管理员登陆</h1>
         <h4 class="login-subtitle">Mallray CMS 欢迎您再次登陆</h4>
       </div>
       <div class="login-body">
         <el-form
             ref="formRef"
             size="large"
             :model="form"
             :rules="rules"
             @keyup.enter="submit"
         >
           <el-form-item prop="username">
             <el-input
                 clearable
                 v-model="form.username"
                 placeholder="请输入登录账号"
                 :prefix-icon="User"
             />
           </el-form-item>
           <el-form-item prop="password">
             <el-input
                 show-password
                 v-model="form.password"
                 placeholder="请输入登录密码"
                 :prefix-icon="Lock"
             />
           </el-form-item>
           <el-form-item>
             <el-button
                 size="large"
                 type="primary"
                 :loading="loading"
                 style="width: 100%"
                 @click="submit"
             >
               登录
             </el-button>
           </el-form-item>
         </el-form>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
   import { ref, reactive } from 'vue';
   import { User, Lock } from '@element-plus/icons-vue';
 
   /** 表单对象 */
   const formRef = ref();
 
   /** 加载状态 */
   const loading = ref(false);
 
   /** 表单数据 */
   const form = reactive({
     username: '',
     password: '',
   });
 
   /** 表单验证规则 */
   const rules = reactive({
     username: [
       {
         required: true,
         message: '请输入登录账号',
         type: 'string',
         trigger: 'blur'
       }
     ],
     password: [
       {
         required: true,
         message: '请输入登录密码',
         type: 'string',
         trigger: 'blur'
       }
     ]
   });
 
   /**
    * 登陆提交
    */
   const submit = () => {
     console.log(form);
   }
 
 </script>
 
 <style scoped>
   .login-wrapper {
     min-height: 100vh;
     box-sizing: border-box;
     padding: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background-color: #e8f8ff;
   }
 
   .login-card {
     width: 500px;
     background-color: #ffffff;
   }
 
   .login-cover {
     padding: 16px 8px;
     background-color: #1681fd;
     text-align: center;
   }
 
   .login-body {
     padding: 32px 48px 0 48px;
   }
 
   .login-title {
     color: rgba(255, 255, 255, 0.98);
     font-size: 26px;
     margin: 0 0 6px 0;
     font-weight: normal;
   }
 
   .login-subtitle {
     color: rgba(255, 255, 255, 0.8);
     font-size: 16px;
     font-weight: normal;
     letter-spacing: 4px;
   }
 
 </style>

2.创建全局配置并完善路由

2.1 创建配置文件

• 创建src/config/setting.js文件，并完善内容如下：

 /** 系统名称 */
 export const PROJECT_NAME = 'Mallray CMS管理系统';
 
 /** 路由重定向 */
 export const REDIRECT_PATH = '/redirect';

2.2 完善路由

• 找到src/router/index.js并修改如下：

 import { createRouter, createWebHistory } from 'vue-router'
 import { PROJECT_NAME, REDIRECT_PATH } from '@/config/setting.js'
 
 /**
  * 静态路由
  */
 const routes = [
   { path: '/login', component: () => import('@/views/admin/login/index.vue'), meta: {title: '管理登陆'} },
   {
     path: '/main',
     component: () => import('@/views/admin/main.vue'),
     meta: {requiresAuth: true, title: '后台管理'},
     children: [
       { path: '', component: () => import('@/views/admin/workplace/index.vue') },
     ]
   },
 ];
 
 /**
  * 创建全局路由对象
  */
 const router = createRouter({
   history: createWebHistory(),
   routes
 });
 
 /**
  * 全局路由守卫
  */
 router.beforeEach(async (to, from, next) => {
   if (!to.path.includes(REDIRECT_PATH)) {
     setPageTitle(to.meta?.title);
   }
   next();
 });
 
 /**
  * 为每个页面增加title有利于seo
  */
 const setPageTitle = (title) => {
   const names = [];
   if (title) {
     names.push(title);
   }
   if (PROJECT_NAME) {
     names.push(PROJECT_NAME);
   }
   document.title = names.join(' - ');
 }
 
 export default router