1、通过v-model指令双向数据绑定登陆表单的数据对象
- 1、定义登陆表单的数据绑定对象
loginForm:{username,password}
loginForm: {
username: 'admin',password: '123456',},
- 2、在
form
表单中通过动态:model
绑定登陆表单的数据对象
<el-form class="login_form" :model="loginForm">..</<el-form>
- 3、在
input
输入框中通过v-model
指令绑定登陆表单的数据对象的属性(username,password)
<el-input placeholder="用户名" v-model="loginForm.username"></el-input>
<el-input placeholder="密码" type="password" v-model="loginForm.password"></el-input>
2、通过v-rule指令绑定登陆表单的校验规则
- 1、定义登陆表单的规则对象
loginFormRules:{username:[],password:[]}
loginFormRules: {
username: [
{
required: true, message: '请输入用户名称', trigger: 'blur' },
{
min: 3, max: 10, message: '长度在3-10字符中' },],
password: [
{
required: true, message: '请输入密码', trigger: 'blur' },
{
min: 6, max: 15, message: '长度在6-15字符中' },],
},
- 2、在
form
表单中通过动态:rules
绑定登陆表单的规则对象loginFormRules
<el-form class="login_form" :model="loginForm" :rules="loginFormRules">..</<el-form>
- 3、在
form-item
中通过prop
属性绑定登陆表单的规则对象的具体属性
<el-form-item prop="username">
<el-input placeholder="用户名" v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input placeholder="密码" type="password" v-model="loginForm.password"></el-input>
</el-form-item>
3、通过ref获取对象,现通过resetFields()方法重置数据
- 1、在form表单中添加属性
(ref="loginFormRef")
<el-form :model="loginForm" :rules="loginFormRules" ref="loginFormRef">..</el-form>
- 2、定义
(resetLoginForm)
重置数据函数,通过($refs.loginFormRef)
获取对象,再通过resetFields()
方法重置数据
resetLoginForm() {
this.$refs.loginFormRef.resetFields()}
- 3、在重置按钮中绑定
(resetLoginForm)
重置数据方法
<el-button type="info" @click="resetLoginForm">重置</el-button>
4、通过(validate)方法进行数据校验,通过$http.post()发出登陆请求,通过sessionStorage.setItem()方法设置token,保持登陆状态
- 1、通过
($refs.loginFormRef)
获取对象,再通过validate()
方法进行数据校验 - 2、通过
$http.post()
请求向api发出登陆请求,获取{data:res}
结果 - 3、判断
{res.meta.status}
结果是否为200,是的话就发出$message.success()
成功消息,不是200的话就发出$message.error()
失败消息 - 4、通过
window.sessionStorage.setItem('token', res.data.token)
,设置token - 5、最后通过
this.$router.push('/home')
跳转到主页面 - 6、在登陆按钮中通过@click绑定
login()
登陆方法
login() {
this.$refs.loginFormRef.validate(async (valid) => {
if (!valid) return
// 向api服务器发出登陆请求
const {
data: res } = await this.$http.post('login', this.loginForm)
// 判断结果状态,是否登陆成功,弹出弹框
if (res.meta.status !== 200) return this.$message.error('登陆失败!')
this.$message.success('登陆成功!')
// 1、将登陆成功之后的token,保存到客户端的sessionStorage中,进行身份验证
window.sessionStorage.setItem('token', res.data.token)
// 2、通过编程式导航跳转到后台主页,路由地址为/home
this.$router.push('/home')
})
}
<el-button type="primary" @click="login">登陆</el-button>
5、Vue登陆功能详情:
https://blog.csdn.net/weixin_45065754/article/details/123433168
6、 项目学习视频来源(B站):
【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】,大家可以看着视频做噢,里面写讲得非常详细,就这样啦~