refactor: 提交代码

vue-demo/src/App.vue

 <template>
   <v-app id="app">
-    <!-- <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link> |
-      <router-link to="/login">Login</router-link>
-    </div> -->
     <router-view/>
   </v-app>
 </template>

vue-demo/src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import test from './modules/test'
+import system from './modules/system'
 Vue.use(VueRouter)
 
 const routes = [
@@ -19,13 +20,14 @@ const routes = [
   },
   {
     path: '/index',
-    name: 'AppLayout',
+    name: 'Index',
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "AppLayout" */ '../views/layouts/AppLayout.vue'),
     children: [
-      test
+      test,
+      system
     ]
   }
 ]

vue-demo/src/router/modules/system.js

+const routes = {
+  path: '/system',
+  name: 'System',
+  component: {
+    template: '<router-view></router-view>'
+  },
+  meta: {
+
+  },
+  children: [
+    {
+      path: 'user',
+      name: 'User',
+      component: () => import('@/views/system/User.vue'),
+      meta: {
+        icon: ''
+      }
+    },
+    {
+      path: 'role',
+      name: 'Role',
+      component: () => import('@/views/system/Role.vue'),
+      meta: {
+        icon: ''
+      }
+    }
+  ]
+}
+
+export default routes

vue-demo/src/views/auth/Login.vue

@@ -12,29 +12,6 @@
         >
       </p>
     </div>
-    <!-- <v-col cols="12" sm="6" md="8" class="info justify-center">
-          <v-layout row wrap  align-center justify-center fill-height >
-            <v-container>
-              <v-row  class="justify-center">
-                <v-col cols="9" sm="6" md="9">
-                    <h2 class="display-1 white--text font-weight-medium"  align="left">Elegant Design with unlimited features, built with love</h2>
-                </v-col>
-             </v-row>
-             <v-row  class="justify-center">
-                <v-col cols="9" sm="6" md="9">
-                    <h6 class="subtitle-1 mt-4 white--text op-5 font-weight-regular"  align="left">Wrappixel helps developers to build organized and well-coded admin dashboards full of beautiful and feature rich modules.</h6>
-                </v-col>
-             </v-row>
-             <v-row  class="justify-center">
-                <v-col cols="9" sm="6" md="9">
-                  <button type="button" class="mt-4 text-capitalize v-btn v-btn--depressed v-btn--flat v-btn--outlined theme--light v-size--x-large white--text">
-                      <span class="v-btn__content">Learn More</span>
-                  </button>
-                </v-col>
-             </v-row>
-          </v-container>
-          </v-layout>
-      </v-col>-->
     <div class="right">
       <div>
         <v-card-title>
@@ -66,9 +43,9 @@
             <v-row>
               <v-col>
                 <v-text-field
-                  name="username"
+                  v-model="loginForm.username"
                   :rules="[rules.required]"
-                  label="E-mail"
+                  label="Username"
                   outlined
                   required
                 ></v-text-field>
@@ -79,7 +56,7 @@
                 <v-text-field
                   :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                   :type="show ? 'text' : 'password'"
-                  name="password"
+                  v-model="loginForm.password"
                   label="Password"
                   outlined
                   value
@@ -108,7 +85,7 @@
                   type="submit"
                   :loading="loading"
                   :disabled="loading"
-                  @click="loader = 'loading'"
+                  @click="submit"
                   color="primary"
                   block
                   >SIGN IN</v-btn
@@ -132,30 +109,42 @@
 export default {
   data () {
     return {
-      loader: null,
-      loading: null,
+      loading: false,
       show: false,
       remember: false,
-      password: 'Password',
+      loginForm: {
+        username: '',
+        password: ''
+      },
       rules: {
-        required: value => !!value || 'Required.',
-        emailMatch: () => "The email and password you entered don't match"
+        required: value => !!value || 'The field is required.',
+        userMatch: () => "The username you entered don't match"
       }
     }
   },
-  watch: {
-    loader () {
-      const l = this.loader
-      this[l] = !this[l]
-
-      setTimeout(() => (this[l] = false), 3000)
-
-      this.loader = null
-    }
-  },
   methods: {
     submit () {
-
+      this.loading = true
+      this.$store
+        .dispatch('login', this.loginForm)
+        .then(() => {
+          console.log('xxx')
+          try {
+            this.$router.push({ name: 'Index' })
+          } catch (e) {
+            this.$router.push({ path: '/' })
+          }
+        })
+        .catch((res) => {
+          console.log('login-failed', res)
+          this.$message({
+            type: 'error',
+            text: this.$t('common.invalid_password_username')
+          })
+        })
+        .finally(() => {
+          this.loading = false
+        })
     }
   }
 }
@@ -197,40 +186,4 @@ export default {
     }
   }
 }
-.custom-loader {
-  animation: loader 1s infinite;
-  display: flex;
-}
-@-moz-keyframes loader {
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-@-webkit-keyframes loader {
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-@-o-keyframes loader {
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-@keyframes loader {
-  from {
-    transform: rotate(0);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 </style>