前端完成登录功能

tonecn/src/views/Console/Dashboard.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+
+</script>
+<template>
+Dashboard
+</template>

tonecn/src/views/Console/Login.vue

@@ -1,225 +1,83 @@
 <script setup>
-// import { ref, watch } from 'vue';
+import { ElMessage } from 'element-plus';
-// import { ElMessage } from 'element-plus'
+import { reactive, ref } from 'vue';
-// import VerificationProcessVue from '@/components/RotationVerification.vue';
+import RotationVerification from '@/components/Common/RotationVerification.vue';
-// import router from '@/router';
+import { request } from '@/lib/request';
-// import ServerAPI from '@/assets/ServerAPI';
-// import ServerSDK from '@/assets/ServerSDK';
-// let phone = ref("");
-// let code = ref("");
-// let sendSIMCodeCoolingTime = ref(-1);
-// let ShowVerificationProcessVue = ref(false);
-// // 监听phone，使其保持3-4-4分割格式
-// watch(phone,(newData)=>{
-//     newData = newData.replace(/\D/g,'');
-//     let newDatalen = newData.split('').length;
-//     if(newDatalen >= 4 && newDatalen <= 7)
-//     {
-//         let part1 = newData.slice(0, 3);
-//         let part2 = newData.slice(3);
-//         newData = part1+ " " +part2;
-//     }else if(newDatalen >= 8){
-//         let part1 = newData.slice(0, 3);
-//         let part2 = newData.slice(3, 7);
-//         let part3 = newData.slice(7);
-//         newData = part1 + " " + part2 + " " + part3; 
-//     }
-//     phone.value = newData;
-// })
-// // 监听code，使其只能是数字
-// watch(code,(newData)=>{
-//     code.value = newData.replace(/\D/g,'');
-// })
 
-// // 按钮 - 发送验证码，先获取图像验证码，发短信由其他函数触发
+const isCaptchaShow = ref(false);
-// let sendSIMCode = async () => {
+const loginStatus = ref(false);
-//     // 冷却判定
+const formData = reactive({
-//     if(sendSIMCodeCoolingTime.value >= 0)
+    username: '',
-//     {
+    password: ''
-//         // 还在冷却中，不允许发送
+})
-//         ElMessage({
+const loginHandle = () => {
-//             message: '冷却中，稍后再来获取吧',
+    if (!formData.username || !formData.password) {
-//             type: 'warning',
+        return ElMessage.warning('请填写账户名和密码')
-//         });
+    }
-//         return;
+    isCaptchaShow.value = true;
-//     }
+}
-//     // 手机号合法性验证
+const login = async () => {
-//     const regex = /^1[3-9]\d{9}$/;
+    loginStatus.value = true;
-//     if(!regex.test(phone.value.replace(/\D/g,'')))
+    try {
-//     {
+        let loginRes = await request.post('/console/login', {
-//         ElMessage({
+            username: formData.username,
-//             message: '请输入正确的手机号',
+            password: formData.password,
-//             type: 'warning',
+            session: localStorage.getItem('captcha-session')
-//         });
+        })
-//         return;
+        loginStatus.value = false;
-//     }
+        switch (loginRes.code) {
-
+            case 0:
-//     // 准备发送验证码
+                // 成功
-//     // 滑动验证码验证
+                localStorage.setItem('jwtToken', loginRes.data.token);
-//     ShowVerificationProcessVue.value = true;
+                ElMessage.success('登录成功');
-// }
+                return setTimeout(() => {
-
+                    window.location.reload();
-// // 按钮 - 登录
+                }, 1000);
-// let login = async () => {
+            case -1:
-//     // 是否已经发送验证码
+                // 参数缺失
-//     if(sendSIMCodeCoolingTime.value == -1)
+                return ElMessage.error('参数缺失');
-//     {
+            case -3:
-//         // 其他情况（冷却倒数，冷却结束）都可以发送
+                // 服务器错误
-//         ElMessage({
+                return ElMessage.error('服务器错误');
-//             message: '请先获取验证码',
+            case -6000:
-//             type: 'warning',
+                // 用户不存在
-//         });
+                return ElMessage.error('用户不存在');
-//         return;
+            case -6001:
-//     }
+                // 账户名或密码错误
-//     // 手机号合法性验证
+                return ElMessage.error('账户名或密码错误');
-//     const regex = /^1[3-9]\d{9}$/;
+            default:
-//     if(!regex.test(phone.value.replace(/\D/g,'')))
+                return ElMessage.error(`未知错误 ${loginRes.message}`)
-//     {
+        }
-//         ElMessage({
+    } catch (error) {
-//             message: '请输入正确的手机号',
+        loginStatus.value = false;
-//             type: 'warning',
+        return ElMessage.error(`未知错误 ${error}`)
-//         });
+    }
-//         return;
+}
-//     }
-//     // 验证码合法性验证
-//     const regex2 = /\d{6}$/;
-//     if(!regex2.test(code.value))
-//     {
-//         ElMessage({
-//             message: '请输入正确的验证码',
-//             type: 'warning',
-//         });
-//         return;
-//     }
-//     // ...可以登录
-//     // console.log(localStorage.getItem('login_session'))
-//     let loginRes = await ServerSDK.Login(
-//         phone.value.replace(/\D/g,''),
-//         code.value
-//     )
-//     if(loginRes == 1)
-//     {
-//         ElMessage({
-//             message: '登录成功',
-//             type: 'success',
-//         });
-//         setTimeout(() => {
-//             router.push({name: 'console_console'});
-//         }, 1000);
-//     }else if(loginRes == 0){
-//         ElMessage({
-//             message: '验证码已过期',
-//             type: 'warning',
-//         });
-//     }else if(loginRes == -1){
-//         ElMessage({
-//             message: '验证码已失效',
-//             type: 'warning',
-//         });
-//     }else if(loginRes == -2){
-//         ElMessage({
-//             message: '验证码错误',
-//             type: 'warning',
-//         });
-//     }else{
-//         ElMessage({
-//             message: '登录失败，请重试',
-//             type: 'error',
-//         });
-//     }
-// }
-
-// // 短信验证码发送成功，修改界面交互
-// let verify_success = async () => {
-//     // 验证成功，等待接收验证码后登录
-//     let sendSIMCodeRes = await ServerAPI.async_postRequest('SendSMSCode',{
-//         'phone': phone.value.replace(/\D/g,''),
-//         'session': localStorage.getItem('RVSession')
-//     })
-//     console.log(sendSIMCodeRes)
-//     if(sendSIMCodeRes && sendSIMCodeRes.status == 'OK')
-//     {
-//         // 发送成功，等待接收验证码后登录
-//         ElMessage({
-//             message: '发送成功',
-//             type: 'success',
-//         });
-//     }else{
-//         // 发送失败
-//         ElMessage({
-//             message: '发送失败，请重试',
-//             type: 'error',
-//         });
-//     }
-//     ShowVerificationProcessVue.value = false;// 关闭验证码界面
-//     sendSIMCodeCoolingTime.value = 59;// 冷却倒计时
-//     let SIMCodeCoolingTimer = setInterval(() => {
-//         sendSIMCodeCoolingTime.value--;
-//         if(sendSIMCodeCoolingTime.value <= 0)
-//         {
-//             clearInterval(SIMCodeCoolingTimer);
-//             sendSIMCodeCoolingTime.value = -2;
-//         }
-//     }, 1000);
-// }
-// // 图像验证码验证失败，短信验证码未发送
-// let verify_fail = () => {
-//     ShowVerificationProcessVue.value = false;
-//     ElMessage({
-//         message: '发送失败，请重试',
-//         type: 'error',
-//     });
-// }
-
-// let onDev = () => {
-//     ElMessage({
-//         message: '抱歉，当前内容暂未开放',
-//         type: 'warning',
-//     });
-// }
 </script>
 <template>
-<div class="bcc"></div>
+    <div class="bcc"></div>
-<div class="main-container">
+    <div class="main-container">
         <h1>登录到控制台</h1>
-    <el-popover
+        <el-popover placement="bottom" :width="300" trigger="click">
-        placement="bottom"
+            <p>控制台是特恩(TONE)网页中的一个控制器界面，如果您是管理员，可通过登录后编辑本网页中的内容（资源、工具、日记等），详情请见<strong style="cursor: pointer;"
-        :width="300"
+                    @click="onDev">《特恩(TONE)控制台使用协议》</strong></p>
-        trigger="click"
-    >
-        <!-- <p>控制台是特恩(TONE)网页中的一个控制器界面，您可以使用其中开放的一些控制器功能。普通访客可通过登录后的界面暂存合法文件（图片、视频、文档、音频、压缩包等），管理员可通过登录后编辑本网页中的内容（资源、工具、日记等），详情请见<strong style="cursor: pointer;">《特恩(TONE)控制台使用协议》</strong></p> -->
-        <p>控制台是特恩(TONE)网页中的一个控制器界面，如果您是管理员，可通过登录后编辑本网页中的内容（资源、工具、日记等），详情请见<strong style="cursor: pointer;" @click="onDev">《特恩(TONE)控制台使用协议》</strong></p>
             <template #reference>
                 <h3>控制台是什么？</h3>
             </template>
         </el-popover>
         <div class="form-container">
-        <el-input 
+            <el-input v-model="formData.username" class="input" placeholder="请输入账户名" clearable>
-            v-model="phone" 
-            class="input" 
-            placeholder="请输入手机号" 
-            maxlength="13"
-            inputmode="tel"
-            clearable>
-            <template #prepend> <div class="phone-prepend">+86</div></template>
             </el-input>
-        <el-input 
+            <el-input v-model="formData.password" show-password class="input" placeholder="密码">
-            v-model="code" 
-            class="input"  
-            maxlength="6"
-            inputmode="numeric"
-            placeholder="验证码">
-            <template #append>
-                <el-button class="sendSIMCode-button" :class="{ 'sendSIMCode-button-cooling' : (sendSIMCodeCoolingTime > 0) }" @click="sendSIMCode">{{ sendSIMCodeCoolingTime > 0 ? `${sendSIMCodeCoolingTime}秒后再获取` : "获取验证码"}}</el-button>
-            </template>
             </el-input>
-        <el-button class="login-botton" @click="login">登录</el-button>
+            <el-button class="login-botton" @click="loginHandle" :loading="loginStatus">登录</el-button>
         </div>
-</div>
+    </div>
-<VerificationProcessVue v-if="ShowVerificationProcessVue" @fail="verify_fail" @success="verify_success" :phone="phone" />
+    <RotationVerification v-if="isCaptchaShow" @fail="() => { isCaptchaShow = false; ElMessage.warning('验证失败') }"
+        @success="() => { isCaptchaShow = false; login() }" />
 </template>
 <style scoped>
-.bcc{
+.bcc {
     position: fixed;
     left: 0;
     top: 0;
@@ -228,67 +86,53 @@
     z-index: -1;
     background-color: #f6f8f9;
 }
-.main-container{
+
+.main-container {
     padding: 30px;
     margin-bottom: 160px;
 }
-.main-container>h1{
+
+.main-container>h1 {
     text-align: center;
     font-size: 42px;
     font-weight: 400;
     margin-top: 50px;
     cursor: default;
 }
-.main-container>h3{
+
+.main-container>h3 {
     text-align: center;
     cursor: pointer;
 }
-.main-container .form-container{
+
+.main-container .form-container {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
-.phone-prepend{
+
-    width: 20px;
+.form-container .input {
-    margin-left: -10px;
-    cursor: default;
-    text-align: center;
-    font-size: 15px;
-}
-.form-container .input{
     width: 260px;
     height: 35px;
     font-size: 16px;
     margin-top: 10px;
 }
-.input .sendSIMCode-button{
+
-    font-size: 14px;
+.login-botton {
-    font-weight: 400;
-    color: #333;
-    width: 120px;
-}
-.input .sendSIMCode-button:hover{
-    color: #333;
-}
-.input .sendSIMCode-button-cooling{
-    color: #888;
-}
-.input .sendSIMCode-button-cooling:hover{
-    color: #888;
-}
-.login-botton{
     margin-top: 10px;
     width: 260px;
     height: 35px;
     font-weight: 500;
 }
-.login-botton:hover{
+
+.login-botton:hover {
     background-color: #fff;
     border-color: rgb(220, 223, 230);
     color: #222;
 }
-.login-botton:focus{
+
+.login-botton:focus {
     background-color: #fff;
     border-color: rgb(220, 223, 230);
     color: #606266;