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);