Vue+Iview+Node 登录demo

1.相关组件安装 axios  iview  js-cookie  crypto-js

2.子父组件传值、监听窗体大小改变、记住密码 、自定义组件（事件 、props）

created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

computed：计算属性，只在初始化时被调用。

methods：  里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed。

watch：类似于监听机制+事件机制

父组件：

 <style lang="less">
 @import "./login.less";
 </style>

 <template>
   <div class="login">
     <div class="header Cblue">
       <div class="wrapper clearfix">
         <h1>VUE+IVIEW V1.0</h1>
         <span class="QRspan">
           <Icon type="logo-googleplus" size="24" />
           <span>关注公众号</span>
           <img class="QRimg" src="../../assets/images/qr.png" />
         </span>
       </div>
     </div>
     <div class="content" :style="{height: screenHeight}">
       <div class="wrapper">
         <img class="bg1" src="../../assets/images/bg1.png" />
         <div class="loginBox">
           <div class="logo">
             <img src="../../assets/images/logo.png" />
           </div>
           <div class="formDiv">
             <login-form @on-success-valid="handleSubmit" :username="localusername" :userpwd="localuserpwd"></login-form>
           </div>
         </div>
       </div>
     </div>
     <div class="footer">
       <div class="wrapper">
         <span>Copyright © 2019-2020 Lin.Su</span>
       </div>
     </div>
   </div>
 </template>

 <script>
 import LoginForm from '_c/login-form'
 import { mapActions } from 'vuex'
 export default {
   components: {
     LoginForm
   },
   data () {
     return {
       screenHeight: ''
     }
   },
   methods: {
     ...mapActions(['handleLogin', 'svaeUserInfo']),
     handleSubmit ({ userName, password, remember }) {
       this.handleLogin({ userName, password }).then(res => {
         const user = res.userinfo
         user.pwd = password
         if (res.code === 200) {
           this.svaeUserInfo({ user, remember })
           this.$router.push({
             name: this.$config.homeName
           })
         } else {
           this.$Message.error({
             content: res.msg,
             duration: 10
           })
         }
       }).catch(err => {
         if (err.message === 'NetWorkeError') {
           this.$Message.error({
             content: '接口服务异常',
             duration: 10
           })
         }
       })
     },
     getHeight () {
       let windowHeight = document.documentElement.clientHeight
       this.screenHeight = windowHeight - 102 - 138 + 'px'
     }
   },
   created () {
     window.addEventListener('resize', this.getHeight)
     this.getHeight()
   },
   mounted () {
     const that = this
     window.onresize = () => {
       that.getHeight()
     }
   },
   computed: {
     localusername () {
       var userinfo = JSON.parse(this.$store.state.user.userinfo)
       if (userinfo) {
         return userinfo.username
       }
       return ''
     },
     localuserpwd () {
       var userinfo = JSON.parse(this.$store.state.user.userinfo)
       if (userinfo) {
         return userinfo.pwd
       }
       return ''
     }
   },
   watch: {
     screenHeight (val) {
       this.screenHeight = val
     }
   }
 }
 </script>

 <style>
 </style>

子组件

 <template>
   <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
     <FormItem prop="userName">
       <Input v-model="form.userName" placeholder="请输入用户名">
         <span slot="prepend">
           <Icon :size="16" type="ios-person"></Icon>
         </span>
       </Input>
     </FormItem>
     <FormItem prop="password">
       <Input type="password" v-model="form.password" placeholder="请输入密码">
         <span slot="prepend">
           <Icon :size="14" type="md-lock"></Icon>
         </span>
       </Input>
     </FormItem>
     <FormItem label="记住密码">
       <i-switch v-model="form.remember" size="large">
         <span slot="open">开</span>
         <span slot="close">关</span>
       </i-switch>
     </FormItem>
     <FormItem>
       <Button @click="handleSubmit" type="primary" long>登录</Button>
     </FormItem>
   </Form>
 </template>
 <script>
 export default {
   name: 'LoginForm',
   props: {
     userNameRules: {
       type: Array,
       default: () => {
         return [{ required: true, message: '账号不能为空', trigger: 'blur' }]
       }
     },
     passwordRules: {
       type: Array,
       default: () => {
         return [{ required: true, message: '密码不能为空', trigger: 'blur' }]
       }
     },
     userpwd: {
       type: String,
       default: ''
     },
     username: {
       type: String,
       default: ''
     }
   },
   data () {
     return {
       form: {
         userName: this.username,
         password: this.userpwd,
         remember: false
       }
     }
   },
   computed: {
     rules () {
       return {
         userName: this.userNameRules,
         password: this.passwordRules
       }
     }
   },
   methods: {
     handleSubmit () {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.$emit('on-success-valid', {
             userName: this.form.userName,
             password: this.form.password,
             remember: this.form.remember
           })
         }
       })
     }
   }
 }
 </script>

3.效果展示