vueDemo PartOne 登入模組 +iview

1.獲取登入所需要的使用者名稱和密碼資訊

所以採用v-model對使用者名稱和密碼進行雙向繫結。即可獲取使用者輸入的內容,儲存在loginData中，再進行驗證時和自定義的userMsg驗證即可。
為了簡便操作，這裡的使用者資訊沒有通過後臺獲取，只是在這裡簡單的自定義了一個使用者物件。即使在與後臺互動時，也是相差無幾的。

<Input type="text" v-model="loginData.user" placeholder="使用者名稱">
<Input type="password" v-model="loginData.password" placeholder="密碼">

//密碼資訊
return {
        loginData: {
          user: '',
          password: '',
          switch: false
        },
        //預設使用者密碼
        userMsg: {
          user: 'admin',
          password: '123456'
        }
      }
    }

2. 登入操作

實現登入便是點選登入按鈕,@click="handleSubmit(loginData)用v-on繫結了handleSubmit事件,執行登入驗證以及頁面跳轉操作。

<Button type="primary" long size="large" @click="handleSubmit(loginData)">
    登入
</Button>`

handleSubmit(data) {
   /******登入驗證等省略******/
   this.$router.push({path: '/main'});      //路由跳轉
}

//實現路由的跳轉還需要在我們的router檔案中，配置路由的路徑和相應的元件名：
  routes: [
    {
      path: '/',    
      name: 'login',
      component: login
    },
    {
        path:'/main',
        name:'main',
        component:main
   }
  ]

3. 結合localStorage的記住密碼
   localStorage的簡單使用方法:https://blog.csdn.net/mjzhang1993/article/details/70820868

<span slot="label" v-bind:class="{remember:loginData.switch}">記住密碼?</span>
<i-switch v-model="loginData.switch">
    <span slot="open">On</span>
    <span slot="close">Off</span>
</i-switch>

 handleSubmit(data) {
        //判斷使用者名稱密碼是否正確
if (this.loginData.user == this.userMsg.user && this.loginData.password == this.userMsg.password) {
  if (this.loginData.switch == true) {   //記住密碼
  localStorage.setItem('user', JSON.stringify(this.loginData));
  }
  else{
    localStorage.removeItem('user');
  }
  console.log(this.loginData);
   this.$store.commit('changeLoginStatus', this.loginData.user);
   this.$router.push({path: '/main'});
     }
   else {
      this.$Message.error('賬號或密碼輸入錯誤！');
   }
 }

這裡的原理其實也非常容易理解。對於這個switch的的按鈕，只負責資料的繫結。主要還是在於點選登入按鈕時所執行的操作。通過switch的狀態，根據不同情況處理資料。

1. 當我們選擇記住密碼後，如果密碼輸入正確，我們向localstorage傳遞我們的使用者資訊這個物件，儲存當前使用者的賬號和密碼，以及密碼儲存的狀態。
2. 如果沒有選擇儲存密碼，則從localstorage中移除當前登入資訊
3. 因為相關裡的使用者資訊直接與兩個輸入框雙向繫結，所以從localstorage中獲取的值直接給輸入框繫結的資料，無需再重新賦值

4.登入狀態管理

在程式碼的處理中，子元件想要獲得父元件的資料，我們可以用到prop，當父元件想要獲得子元件的資料是，我們可以用到$emit那麼兄弟元件之間、甚至是沒啥關係的元件想要獲得其他元件的資訊時，應當怎麼處理呢？
對於狀態管理的學習，我是把其當做我們程式中的全域性變數去理解，他是我們所有元件都能共享的內容。詳情用法可檢視官網vuex

1. 程式碼的放置位置
   我們可以放在main.js中(不建議這麼做），為了方便程式碼的管理，可以新建另外的資料夾以方vuex的程式碼。但因為這次程式碼量比較少，我就偷懶放在了main.js中了

let store = new Vuex.Store({
    state:{
        loginStatus:'登入'
    },
    mutations:{
        changeLoginStatus(state,name){
            state.loginStatus=name;
        }
    }
})

store中的資料的是不能直接在元件中修改的，必須得通過vuex中的mutation去執行修改操作。

當點選登入按鈕後，執行下面行程式碼，就會到我們的vuex中的程式碼中去執行。
this.$store.commit('changeLoginStatus', this.loginData.user);