增加登录验证逻辑

src/App.vue

@@ -5,20 +5,16 @@
 </template>
 
 <script>
-import GloablLayout from './components/layout/GloablLayout'
 export default {
-  name: 'App',
-  components: {GloablLayout}
+  name: 'App'
 }
 </script>
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  /*text-align: center;*/
-  color: #2c3e50;
-  /*margin-top: 60px;*/
+  /*font-family: 'Avenir', Helvetica, Arial, sans-serif;*/
+  /*-webkit-font-smoothing: antialiased;*/
+  /*-moz-osx-font-smoothing: grayscale;*/
+  /*color: #2c3e50;*/
 }
 </style>

src/components/login/Login.vue

@@ -9,16 +9,23 @@
         <div class="desc">Vue Antd 是西湖区最具影响力的 Web 设计规范</div>
       </div>
       <div class="login">
-        <a-form @submit="onSubmit">
-          <a-tabs size="large" style="text-align: center">
+        <a-form @submit="onSubmit" :autoFormCreate="(form) => this.form = form">
+          <a-tabs size="large" :tabBarStyle="{textAlign: 'center'}">
             <a-tab-pane tab="账户密码登录" key="1">
-              <a-form-item>
-                <a-input size="large" placeholder="admin/iczer" >
+              <a-alert type="error" :closable="true" v-show="error" :message="error" showIcon style="margin-bottom: 24px;" />
+              <a-form-item
+                fieldDecoratorId="name"
+                :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入账户名', whitespace: true}]}"
+              >
+                <a-input size="large" placeholder="admin" >
                   <a-icon slot="prefix" type="user" />
                 </a-input>
               </a-form-item>
-              <a-form-item>
-                <a-input size="large" placeholder="888888/123456" type="password">
+              <a-form-item
+                fieldDecoratorId="password"
+                :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入密码', whitespace: true}]}"
+              >
+                <a-input size="large" placeholder="888888" type="password">
                   <a-icon slot="prefix" type="lock" />
                 </a-input>
               </a-form-item>
@@ -48,14 +55,14 @@
             <a style="float: right">忘记密码</a>
           </div>
           <a-form-item>
-            <a-button style="width: 100%;margin-top: 24px" size="large" htmlType="submit" type="primary">登录</a-button>
+            <a-button :loading="logging" style="width: 100%;margin-top: 24px" size="large" htmlType="submit" type="primary">登录</a-button>
           </a-form-item>
           <div>
             其他登录方式
             <a-icon class="icon" type="alipay-circle" />
             <a-icon class="icon" type="taobao-circle" />
             <a-icon class="icon" type="weibo-circle" />
-            <router-link style="float: right" to="/" >注册账户</router-link>
+            <router-link style="float: right" to="/dashboard/workplace" >注册账户</router-link>
           </div>
         </a-form>
       </div>
@@ -75,17 +82,51 @@ import AInputGroup from 'vue-antd-ui/es/input/Group'
 import AButton from 'vue-antd-ui/es/button/button'
 import ACol from 'vue-antd-ui/es/grid/Col'
 import ACheckbox from 'vue-antd-ui/es/checkbox/Checkbox'
+import AAlert from 'vue-antd-ui/es/alert/index'
 
 const ATabPane = ATabs.TabPane
 
 export default {
   name: 'Login',
-  components: {ACheckbox, ACol, AButton, AInputGroup, AIcon, AInput, AFormItem, GloablFooter, ATabPane, ATabs, AForm},
+  components: {
+    AAlert,
+    ACheckbox,
+    ACol,
+    AButton,
+    AInputGroup,
+    AIcon,
+    AInput,
+    AFormItem,
+    GloablFooter,
+    ATabPane,
+    ATabs,
+    AForm},
+  data () {
+    return {
+      logging: false,
+      error: ''
+    }
+  },
   methods: {
     onSubmit (e) {
       e.preventDefault()
-      console.log('submit')
-      this.$router.push('/')
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.logging = true
+          this.$axios.post('/login', {
+            name: this.form.getFieldValue('name'),
+            password: this.form.getFieldValue('password')
+          }).then((res) => {
+            this.logging = false
+            const result = res.data
+            if (result.code >= 0) {
+              this.$router.push('/dashboard/workplace')
+            } else {
+              this.error = result.message
+            }
+          })
+        }
+      })
     }
   }
 }

src/mock/index.js

@@ -1,6 +1,7 @@
 import Mock from 'mockjs'
 import '@/mock/user/current'
 import '@/mock/project'
+import '@/mock/user/login'
 
 // 设置全局延时
 Mock.setup({

src/mock/user/login.js

@@ -0,0 +1,16 @@
+import Mock from 'mockjs'
+import '@/mock/extend'
+
+Mock.mock('/login', 'post', ({body}) => {
+  let result = {}
+  const {name, password} = JSON.parse(body)
+
+  if (name !== 'admin' || password !== '888888') {
+    result.code = -1
+    result.message = '账户名或密码错误（admin/888888）'
+  } else {
+    result.code = 0
+    result.message = '登录成功'
+  }
+  return result
+})

src/router/index.js

@@ -37,6 +37,7 @@ export default new Router({
       path: '/',
       name: 'home',
       component: MenuView,
+      redirect: '/login',
       icon: 'none',
       invisible: true,
       children: [
@@ -50,7 +51,6 @@ export default new Router({
               path: '/dashboard/workplace',
               name: '工作台',
               component: WorkPlace,
-              alias: '/',
               icon: 'none'
             },
             {