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.效果展示