登录记住密码、修改默认页文件路径

src/views/dashboard/realTimeMonitor/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="home">
+    <!-- 顶部卡片 -->
+    <img class="show_img" src="@/assets/img/bg.jpg" alt="">
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "Workplace",
+  components: {},
+  data() {
+    return {
+   
+    }
+  },
+  mounted() {
+
+  }
+}
+</script>
+
+<style scoped>
+.home {
+  width: 100%;
+  height: 100%;
+  padding-bottom: 0;
+}
+
+.show_img {
+  width: 100%;
+  height: 90.5vh;
+}
+
+</style>

src/views/login/login.vue

@@ -7,43 +7,46 @@
       layout="vertical"
       class="login-form ele-bg-white"
       @keyup.enter="doSubmit"
-      >
+    >
       <h4>{{ $t('login.title') }}</h4>
       <a-form-item name="username">
         <a-input
+          v-model:value="form.username"
           allow-clear
           size="large"
-          v-model:value="form.username"
-          :placeholder="$t('login.username')">
+          :placeholder="$t('login.username')"
+        >
           <template #prefix>
-            <user-outlined/>
+            <user-outlined />
           </template>
         </a-input>
       </a-form-item>
       <a-form-item name="password">
         <a-input-password
-          size="large"
           v-model:value="form.password"
-          :placeholder="$t('login.password')">
+          size="large"
+          :placeholder="$t('login.password')"
+        >
           <template #prefix>
-            <lock-outlined/>
+            <lock-outlined />
           </template>
         </a-input-password>
       </a-form-item>
       <a-form-item name="captcha">
         <div class="login-input-group">
           <a-input
+            v-model:value="form.captcha"
             allow-clear
             size="large"
-            v-model:value="form.captcha"
-            :placeholder="$t('login.captcha')">
-            
+            :placeholder="$t('login.captcha')"
+          >
+
             <template #prefix>
-              <safety-certificate-outlined/>
+              <safety-certificate-outlined />
             </template>
           </a-input>
           <a-button class="login-captcha" @click="changeCode">
-            <img v-if="captcha" :src="captcha" alt=""/>
+            <img v-if="captcha" :src="captcha" alt="">
           </a-button>
         </div>
       </a-form-item>
@@ -58,7 +61,8 @@
           size="large"
           type="primary"
           :loading="loading"
-          @click="doSubmit">
+          @click="doSubmit"
+        >
           {{ loading ? $t('login.loading') : $t('login.login') }}
         </a-button>
       </a-form-item>
@@ -70,7 +74,7 @@
         <weibo-outlined class="login-oauth-icon" style="background: #CF1900;"/>
       </div> -->
     </a-form>
-    <div class="login-copyright">copyright © 2022 t-aaron.com all rights reserved.</div>
+    <div class="login-copyright">copyright © 2021 taauav.com all rights reserved.</div>
     <!-- 多语言切换 -->
     <!-- <div style="position: absolute;right: 30px;top: 20px;z-index: 999;">
       <a-dropdown placement="bottomLeft" :overlay-style="{minWidth: '120px'}">
@@ -84,14 +88,14 @@
         </template>
       </a-dropdown>
     </div> -->
-<!--    &lt;!&ndash; 实际项目去掉这段 &ndash;&gt;-->
-<!--    <div style="position: absolute;left: 30px;top: 20px;z-index: 999;">-->
-<!--      <a-radio-group v-model:value="direction" size="small">-->
-<!--        <a-radio-button :value="2">居左</a-radio-button>-->
-<!--        <a-radio-button :value="0">居中</a-radio-button>-->
-<!--        <a-radio-button :value="1">居右</a-radio-button>-->
-<!--      </a-radio-group>-->
-<!--    </div>-->
+    <!--    &lt;!&ndash; 实际项目去掉这段 &ndash;&gt;-->
+    <!--    <div style="position: absolute;left: 30px;top: 20px;z-index: 999;">-->
+    <!--      <a-radio-group v-model:value="direction" size="small">-->
+    <!--        <a-radio-button :value="2">居左</a-radio-button>-->
+    <!--        <a-radio-button :value="0">居中</a-radio-button>-->
+    <!--        <a-radio-button :value="1">居右</a-radio-button>-->
+    <!--      </a-radio-group>-->
+    <!--    </div>-->
   </div>
 </template>
 
@@ -104,8 +108,8 @@ import {
   UserOutlined,
   WechatOutlined,
   WeiboOutlined
-} from '@ant-design/icons-vue';
-import setting from '@/config/setting';
+} from '@ant-design/icons-vue'
+import setting from '@/config/setting'
 
 export default {
   name: 'Login',
@@ -115,10 +119,10 @@ export default {
     SafetyCertificateOutlined,
     QqOutlined,
     WechatOutlined,
-    WeiboOutlined,
+    WeiboOutlined
     // GlobalOutlined
   },
-    data() {
+  data() {
     return {
       // 登录框方向, 0居中, 1居右, 2居左
       direction: 0,
@@ -126,104 +130,108 @@ export default {
       loading: false,
       // 表单数据
       form: {
-        username: 'admin',
-        password: '123456',
+        username: '',
+        password: '',
         key: '',
-        remember: true
+        remember: false
       },
       // 验证码base64数据
       captcha: '',
       // 验证码内容, 实际项目去掉
       text: ''
-    };
+    }
   },
   computed: {
     // 表单验证规则
     rules() {
       return {
         username: [
-          {required: true, message: this.$t('login.username'), type: 'string', trigger: 'blur'}
+          { required: true, message: this.$t('login.username'), type: 'string', trigger: 'blur' }
         ],
         password: [
-          {required: true, message: this.$t('login.password'), type: 'string', trigger: 'blur'}
+          { required: true, message: this.$t('login.password'), type: 'string', trigger: 'blur' }
         ],
         captcha: [
-          {required: true, message: this.$t('login.captcha'), type: 'string', trigger: 'blur'}
+          { required: true, message: this.$t('login.captcha'), type: 'string', trigger: 'blur' }
         ]
-      };
+      }
     },
     // 当前语言
     languages() {
-      return [this.$i18n.locale];
+      return [this.$i18n.locale]
     }
   },
   mounted() {
+    console.log('change cdn')
     if (setting.takeToken()) {
-      return this.goHome();
+      return this.goHome()
     }
-    this.changeCode();
+    this.changeCode()
+    this.form = Object.assign(
+      this.form,
+      JSON.parse(localStorage.getItem('login-form'))
+    )
   },
   methods: {
     /* 提交 */
     doSubmit() {
       this.$refs.form.validate().then(() => {
-        // if (this.form.code.toLowerCase() !== this.text) {
-        //   return this.$message.error('验证码错误');
-        // }
-        this.loading = true;
-        // let formData = new FormData();
-        // for (let key in this.form) {
-        //   formData.append(key, this.form[key]);
-        // }
+        this.loading = true
+        const { username, password, remember } = this.form
+        if (remember) {
+          localStorage.setItem('login-form', JSON.stringify({ username, password, remember }))
+        } else {
+          localStorage.removeItem('login-form')
+        }
         this.$http.post('/login/login', this.form).then((res) => {
-          this.loading = false;
+          this.loading = false
           if (res.data.code === 0) {
-            this.$message.success('登录成功');
+            this.$message.success('登录成功')
             this.$store.dispatch('user/setToken', {
               token: res.data.data.access_token,
               remember: this.form.remember
             }).then(() => {
-              this.goHome();
-            });
+              this.goHome()
+            })
           } else {
-            this.$message.error(res.data.msg);
+            this.$message.error(res.data.msg)
             // 刷新验证码
-            this.changeCode();
+            this.changeCode()
           }
-        });
+        })
       }).catch(() => {
-      });
+      })
     },
     /* 跳转到首页 */
     goHome() {
-      const query = this.$route.query;
-      const path = query && query.from ? query.from : '/';
+      const query = this.$route.query
+      const path = query && query.from ? query.from : '/'
       this.$router.push(path).catch(() => {
-      });
+      })
     },
     /* 更换图形验证码 */
     changeCode() {
       // 这里演示的验证码是后端返回base64格式的形式, 如果后端地址直接是图片请参考忘记密码页面
       this.$http.get('/login/captcha').then(res => {
         if (res.data.code === 0) {
-          this.captcha = res.data.data.captcha;
-          this.form.key = res.data.data.key;
+          this.captcha = res.data.data.captcha
+          this.form.key = res.data.data.key
           // // 实际项目后端一般会返回验证码的key而不是直接返回验证码的内容, 登录用key去验证, 你可以根据自己后端接口修改
           // this.text = res.data.text;
           // // 自动回填验证码, 实际项目去掉这个
           // this.form.code = res.data.text;
         } else {
-          this.$message.error(res.data.msg);
+          this.$message.error(res.data.msg)
         }
       }).catch(e => {
-        this.$message.error(e.message);
-      });
+        this.$message.error(e.message)
+      })
     },
     /* 切换语言 */
-    changeLanguage({key}) {
-      this.$i18n.locale = key;
-      localStorage.setItem('i18n-lang', key);
-      this.$refs.form.clearValidate();
+    changeLanguage({ key }) {
+      this.$i18n.locale = key
+      localStorage.setItem('i18n-lang', key)
+      this.$refs.form.clearValidate()
     }
   }
 }
@@ -363,4 +371,4 @@ export default {
     transform: translateX(-50%);
   }
 }
-</style>
+</style>