feat: 完成登录和注册页面

RollCallClient/src/views/Login.vue

@@ -0,0 +1,204 @@
+<script setup>
+import { User, Lock } from '@element-plus/icons-vue'
+import { ref } from 'vue'
+import { useRouter } from "vue-router";
+import { userLoginService, userRegisterService } from "@/api/admin.js";
+import { ElMessage } from "element-plus";
+import { useTokenStore } from "@/store/token.js";
+import { useUsernameStore } from "@/store/username.js";
+import {updateStudent} from "@/api/student.js";
+
+const router = useRouter();
+const tokenStore = useTokenStore()
+const usernameStore = useUsernameStore()
+const isRegister = ref(false)
+const ruleFormRef = ref()
+
+const loginForm = ref({
+  username: 'admin',
+  password: 'abcd1234'
+})
+
+const registerForm = ref({
+  username: '',
+  password: '',
+  rePassword: ''
+})
+
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名', trigger: 'change' },
+    { min: 3, max: 20, message: '用户名长度应为 3 到 20 为非空字符', trigger: 'change' },
+    { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能包含字母、数字和下划线', trigger: 'change' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'change' },
+    { min: 8, max: 32, message: '密码长度应为 8 到 32 为非空字符', trigger: 'change' }
+  ],
+  rePassword: [
+    { required: true, message: '请再次输密码', trigger: 'change'},
+    {
+      validator: (rule, value, callback) => {
+        if (value === '') {
+          callback(new Error('请再次输入密码'));
+        } else if (value !== registerForm.value.password) {
+          callback(new Error('两次输入的密码不一致'));
+        } else {
+          callback();
+        }
+      },
+      trigger: 'change'
+    }
+  ]
+}
+
+const handleCommitStudent = async () => {
+  if (!ruleFormRef.value) return
+  await ruleFormRef.value.validate(async (valid, fields) => {
+    if (valid) {
+      loadingSaveDialog.value = true
+      const response = await updateStudent(studentForm.value)
+      if (response.code === 1) {
+        ElMessage.success('保存成功')
+        editStudentDialogVisible.value = false
+        await handlePageQuery({prop: 'Empty', order: 'Empty'})
+      } else {
+        ElMessage.error(response.msg || '保存失败')
+      }
+      loadingSaveDialog.value = false
+    } else {
+      return false
+    }
+  })
+}
+
+const handleUserLogin = async () => {
+  if (!ruleFormRef.value) return
+  await ruleFormRef.value.validate(async (valid, fields) => {
+    if (valid) {
+      let response = await userLoginService(loginForm.value)
+      if (response.code === 1) {
+        tokenStore.setToken(response.data.token)
+        usernameStore.setUsername(loginForm.value.username)
+        ElMessage.success('登录成功')
+        await router.push('/home')
+      } else {
+        ElMessage.error("登录失败，原因: " +response.msg)
+      }
+    } else return false
+  })
+}
+
+const handleUserRegister = async () => {
+  if (!ruleFormRef.value) return
+  await ruleFormRef.value.validate(async (valid, fields) => {
+    if (valid) {
+      let response = await userRegisterService(registerForm.value)
+      if (response.code === 1) {
+        ElMessage.success('注册成功')
+        isRegister.value = false
+      } else {
+        ElMessage.error('注册失败，原因: ' + response.msg)
+      }
+    } else return false
+  })
+}
+
+
+</script>
+
+<template>
+  <el-row class="login-page">
+    <el-col :span="12" class="bg"></el-col>
+    <el-col :span="6" :offset="3" class="form">
+      <!-- 注册表单 -->
+      <el-form ref="ruleFormRef" size="large" autocomplete="off" v-if="isRegister" :model="registerForm" :rules="rules">
+        <el-form-item>
+          <h1>注 册</h1>
+        </el-form-item>
+        <el-form-item prop="username">
+          <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerForm.username"></el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerForm.password"></el-input>
+        </el-form-item>
+        <el-form-item prop="rePassword">
+          <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerForm.rePassword"></el-input>
+        </el-form-item>
+        <!-- 注册按钮 -->
+        <el-form-item>
+          <el-button class="button" type="primary" auto-insert-space @click="handleUserRegister">
+            注 册
+          </el-button>
+        </el-form-item>
+        <el-form-item class="flex">
+          <el-link type="info" :underline="false" @click="isRegister = false">
+            ← 返 回
+          </el-link>
+        </el-form-item>
+      </el-form>
+      <!-- 登录表单 -->
+      <el-form ref="ruleFormRef" size="large" autocomplete="off" :model="loginForm" :rules="rules" v-else>
+        <el-form-item>
+          <h1>登 录</h1>
+        </el-form-item>
+        <el-form-item prop="username">
+          <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="loginForm.username"/>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="loginForm.password" @keyup.enter />
+        </el-form-item>
+        <el-form-item class="flex">
+          <div class="flex">
+            <el-checkbox>记住我</el-checkbox>
+            <el-link type="primary" :underline="false">忘记密码？</el-link>
+          </div>
+        </el-form-item>
+        <!-- 登录按钮 -->
+        <el-form-item>
+          <el-button class="button" type="primary" auto-insert-space @click="handleUserLogin">登 录</el-button>
+        </el-form-item>
+        <el-form-item class="flex">
+          <el-link type="info" :underline="false" @click="isRegister = true">
+            注 册 →
+          </el-link>
+        </el-form-item>
+      </el-form>
+    </el-col>
+  </el-row>
+</template>
+
+<style lang="scss" scoped>
+/* 样式 */
+.login-page {
+  height: 100vh;
+  background-color: #fff;
+
+  .bg {
+    background: url('@/assets/logo.webp') no-repeat 40% center / 400px auto,
+    url('@/assets/login_bg.webp') no-repeat center / cover;
+    border-radius: 0 20px 20px 0;
+  }
+
+  .form {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    user-select: none;
+
+    .title {
+      margin: 0 auto;
+    }
+
+    .button {
+      width: 100%;
+    }
+
+    .flex {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+</style>