将登录页的显示改为动态的

package.json

@@ -18,7 +18,7 @@
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "vue": "^2.7.10",
-    "vue-router": "^3.6.3",
+    "vue-router": "^3.6.5",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

src/store/modules/user.js

@@ -43,10 +43,9 @@ const mutations = {
 
 const actions = {
   // 登录
-  login({ commit }, userInfo) {
-    const { loginForm } = userInfo;
+  login({ commit }, form) {
     return new Promise((reslove, reject) => {
-      login(loginForm)
+      login(form)
         .then(response => {
           setUserInfo(response);
           commit(user.SET_USER_INFO, response);

src/views/login/index.vue

@@ -2,12 +2,12 @@
   <div class="login">
     <main class="login-container">
       <div class="login-container-logo">
-        <el-image :src="$store.state.app.config.logo_image_url_home"></el-image>
+        <el-image :src="$store.state.app.config.logo_image_url_home" />
       </div>
-      <div class="login-container-title">欢迎使用全球汉语教学平台后台管理系统</div>
+      <div class="login-container-title">{{ `欢迎使用${title}后台管理系统` }}</div>
       <div class="login-container-admin">
         <div class="login-container-admin-title">管理员登录</div>
-        <el-form ref="loginForm" class="login-container-admin-form" :model="loginForm" :rules="loginRules">
+        <el-form ref="login" class="login-container-admin-form" :model="loginForm" :rules="loginRules">
           <el-form-item prop="user_name">
             <el-input
               ref="user_name"
@@ -71,73 +71,78 @@
 </template>
 
 <script>
+export default {
+  name: 'Login'
+};
+</script>
+
+<script setup>
 import { GetLogo, GetVerificationCodeImage } from '@/api/app';
 import { setConfig } from '@/utils/auth';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router/composables';
+import { Message } from 'element-ui';
+
+import store from '@/store';
 import md5 from 'md5';
 
-export default {
-  name: 'Login',
-  data() {
-    return {
-      isRemember: true,
-      loading: false,
-      isAgree: true,
-      loginForm: {
-        verification_code_image_text: '',
-        user_name: 'admin',
-        password: '123456',
-        is_password_md5: 'true',
-        user_type: 'ADMIN',
-        verification_code_image_id: ''
-      },
-      loginRules: {
-        user_name: [{ required: true, trigger: 'blur', message: '用户名不能为空！' }],
-        verification_code_image_text: [{ required: true, trigger: 'blur', message: '验证码不能为空' }]
-      },
-      image_content_base64: ''
-    };
-  },
-  created() {
-    GetLogo().then(res => {
-      document.title = res.title;
-      setConfig(res);
-    });
-    this.updateVerificationCode();
-  },
-  methods: {
-    updateVerificationCode() {
-      GetVerificationCodeImage().then(({ image_id, image_content_base64 }) => {
-        this.loginForm.verification_code_image_id = image_id;
-        this.image_content_base64 = image_content_base64;
-      });
-    },
-
-    handleLogin() {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          this.loading = true;
-          const loginForm = { ...this.loginForm };
-          loginForm.password = md5(loginForm.password).toUpperCase();
-          this.$store
-            .dispatch('user/login', { loginForm })
-            .then(() => {
-              this.$router.push({ path: '/jump' });
-              this.loading = false;
-              this.$message.success({
-                message: '登录成功！',
-                duration: 1 * 1000
-              });
-            })
-            .catch(() => {
-              this.loading = false;
-              this.updateVerificationCode();
-            });
-        }
-        return false;
-      });
+const router = useRouter();
+let isRemember = ref(true);
+let loading = ref(false);
+let isAgree = ref(true);
+let loginForm = ref({
+  verification_code_image_text: '',
+  user_name: 'admin',
+  password: '123456',
+  is_password_md5: 'true',
+  user_type: 'ADMIN',
+  verification_code_image_id: ''
+});
+let loginRules = ref({
+  user_name: [{ required: true, trigger: 'blur', message: '用户名不能为空！' }],
+  verification_code_image_text: [{ required: true, trigger: 'blur', message: '验证码不能为空' }]
+});
+let image_content_base64 = ref('');
+let title = ref('');
+
+GetLogo().then(res => {
+  document.title = res.title;
+  title.value = res.title;
+  setConfig(res);
+});
+function updateVerificationCode() {
+  GetVerificationCodeImage().then(({ image_id, image_content_base64: img_content }) => {
+    loginForm.value.verification_code_image_id = image_id;
+    image_content_base64.value = img_content;
+  });
+}
+updateVerificationCode();
+
+let login = ref();
+function handleLogin() {
+  login.value.validate(valid => {
+    if (valid) {
+      loading.value = true;
+      const form = { ...loginForm.value };
+      form.password = md5(form.password).toUpperCase();
+      store
+        .dispatch('user/login', form)
+        .then(() => {
+          router.push({ path: '/jump' });
+          loading.value = false;
+          Message.success({
+            message: '登录成功！',
+            duration: 1 * 1000
+          });
+        })
+        .catch(() => {
+          loading.value = false;
+          updateVerificationCode();
+        });
     }
-  }
-};
+    return false;
+  });
+}
 </script>
 
 <style lang="scss">