登录

src/views/login/index.vue

@@ -14,11 +14,11 @@
     <div class="right">
         <div class="title">{{ projectName }}</div>
         <div class="title sub-title">欢迎登录</div>
-        <el-form @keyup.enter="login">
+        <el-form :model="form" :rules="rules" label-width="0" @keyup.enter="login">
             <el-row>
                 <el-col :span="24">
-                    <el-form-item>
-                        <el-input v-model="username" placeholder="请输入用户名">
+                    <el-form-item prop="username">
+                        <el-input v-model="form.username" placeholder="请输入用户名">
                             <template #prefix>
                                 <img src="@/assets/images/user.png" alt="" />
                             </template>
@@ -26,8 +26,8 @@
                     </el-form-item>
                 </el-col>
                 <el-col :span="24">
-                    <el-form-item>
-                        <el-input v-model="password" type="password" show-password placeholder="请输入密码">
+                    <el-form-item prop="password">
+                        <el-input v-model="form.password" type="password" show-password placeholder="请输入密码">
                             <template #prefix>
                                 <img src="@/assets/images/pwd.png" alt="" />
                             </template>
@@ -53,26 +53,27 @@ import UpdatePwd from "./updatePwd.vue";
 
 const router = useRouter();
 const projectName = ref(getConfig("projectName"));
-const username = ref("");
-const password = ref("");
+const form = ref({
+  	username: null,
+  	password: null
+});
+
+const rules = reactive({
+  	username: [{ required: true, trigger: "blur", message: "用户名不能为空" }],
+  	password: [{ required: true, trigger: "blur", message: "密码不能为空" }]
+});
 
 const updatePwd = ref();
 const islogin = ref(false);
 
 const login = () => {
     islogin.value = true;
-    useUserStore().login({
-        username: username.value,
-        password: password.value
-    }).then(() => {
+    useUserStore().login(form).then(() => {
         islogin.value = false;
         router.push("/");
     }).catch(code => {
         islogin.value = false;
-        if (code === 204) {
-            password.value = "";
-            updatePwd.value.open();
-        } 
+        if (code === 204) updatePwd.value.open();
     })
 }