新建登錄頁面

在 src/views/auth 新建 Login.vue 文件，復制貼入以下代碼：

src/views/auth/Login.vue

 1 <template>
 2   <div class="row">
 3     <div class="col-md-4 col-md-offset-4 floating-box">
 4       <Message :show.sync="msgShow" :type="msgType" :msg="msg"/>
 5 
 6       <div class="panel panel-default">
 7
 
         <div class="panel-heading">
 8           <h3 class="panel-title">請登錄</h3>
 9         </div>
10 
11         <div class="panel-body" data-validator-form>
12           <div class="form-group">
13             <label class="control-label">用戶名</label>
14
 
             <input v-model.trim="username" v-validator.required="{ title: ‘用戶名‘ }" type="text" class="form-control" placeholder="請填寫用戶名">
15           </div>
16           <div class="form-group">
17             <label class="control-label">密碼</label>
18             <input v-model.trim="password" id="password" v-validator.required="{ title: ‘密碼‘ }" type="password" class="form-control" placeholder="請填寫密碼">
19
 
           </div>
20           <br>
21           <button @click="login" type="submit" class="btn btn-lg btn-success btn-block">
22             <i class="fa fa-btn fa-sign-in"></i> 登錄
23           </button>
24         </div>
25       </div>
26     </div>
27   </div>
28 </template>
29 
30 <script>
31 export default {
32   name: ‘Login‘,
33   data() {
34     return {
35       username: ‘‘, // 用戶名
36       password: ‘‘, // 密碼
37       msg: ‘‘, // 消息
38       msgType: ‘‘, // 消息類型
39       msgShow: false // 是否顯示消息，默認不顯示
40     }
41   },
42   methods: {
43     login(e) {
44       this.$nextTick(() => {
45         const target = e.target.type === ‘submit‘ ? e.target : e.target.parentElement
46 
47         if (target.canSubmit) {
48           this.submit()
49         }
50       })
51     },
52     submit() {
53       const user = {
54         name: this.username,
55         password: this.password
56       }
57       const localUser = this.$store.state.user
58 
59       if (localUser) {
60         if (localUser.name !== user.name || localUser.password !== user.password) {
61           this.showMsg(‘用戶名或密碼不正確‘)
62         } else {
63           this.$store.dispatch(‘login‘)
64         }
65       } else {
66         this.showMsg(‘不存在該用戶‘)
67       }
68     },
69     showMsg(msg, type = ‘warning‘) {
70       this.msg = msg
71       this.msgType = type
72       this.msgShow = false
73 
74       this.$nextTick(() => {
75         this.msgShow = true
76       })
77     }
78   }
79 }
80 </script>
81 
82 <style scoped>
83 
84 </style>

// 1.驗證：填寫input中的驗證規則:驗證時候要在panel-body上寫data-validator-form屬性
//2.寫login時，看是否是提交按鈕

登錄功能實現