Vue+Iview+Node 登录demo
2024-10-20 21:11:57
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.效果展示
最新文章
- logback 配置详解（二）——appender
- 226 Invert Binary Tree
- Unity3D中脚本的执行顺序和编译顺序
- input固定定位后，当input框获取到焦点时，会离开手机软键盘的解决方法
- 创建C#串口通信程序详解
- php面向对象的特性：OOP的继承
- Android 常用UI控件之Tab控件的实现方案
- nexus3添加第三方jar
- sql server在使用xp_cmdshell
- C++中的数组和指针
- java 包之 BeanUtils包的使用
- python 自学笔记（四） 列表
- JavaSE思维导图(二)
- "No appenders found for logger" and "Please configure log4j properly"
- 2016-2017 CT S03E02: Codeforces Trainings Season 3 Episode 2
- CDN内容分发网络
- React-Native 之 项目实战(四)
- qt学习教程1.qt开发环境搭建
- Luogu P2743 [USACO5.1]乐曲主题Musical Themes
- vue项目目录结构