**一 登录的流程
1.登录的form表单
<!-- ref="loginFormRef" 代表重置表单 -->
<el-form class="wzl_login_form" :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
<!-- 用户名 -->
<!-- prop="username 代表验证" -->
<el-form-item prop="username">
<el-input prefix-icon="iconfont icon-user" v-model="loginForm.username"></el-input>
</el-form-item>
<!-- 密码 -->
<el-form-item prop="password">
<el-input prefix-icon="iconfont icon-3702mima" v-model="loginForm.password" type="password"></el-input>
</el-form-item>
<!-- 登录按钮 -->
<el-form-item class="wzl_btns">
<el-button type="primary" @click="login">登录</el-button>
<el-button type="info" @click="resetLoginForm">重置</el-button>
</el-form-item>
</el-form>
<!-- 登录表单区域结束-->
2.登录的表单校验
data() {
return {
// 这是登录表单的数据绑定对象
loginForm:{
username:'',
password:'',
},
//这是表单的验证正则的对象55
loginFormRules:{
username:[
{ required: true, message: '请输入登录用户名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
password:[
{ required: true, message: '请输入登录密码', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 6 个字符', trigger: 'blur' }
],
}
};
},
3.登录的接口调用
methods: {
// 点击重置按钮,重置登录表单
resetLoginForm(){
this.$refs.loginFormRef.resetFields();
},
login(){
if(this.loginForm.username == "" || this.loginForm.password == ""){
this.$message.error("用户名和密码不能为空");
return false;
}
//获取线上接口
this.$axios.post("https://www.liulongbin.top:8888/api/private/v1/login",{
username:this.loginForm.username,//用户名
password:this.loginForm.password,//用户密码
}).then(res=>{
console.log(res)
if(res.meta.status == 200){
//成功信息提示
this.$message.success(res.meta.msg);
// 登录成功吧token值存到本地
sessionStorage.setItem("wangzhaolong",res.data.token);
//登录成功跳转到后台首页
this.$router.push('/admin/wanghome')
}else{
//失败提示的信息
this.$message.error(res.meta.msg)
}
})
}
}
4.你对登录的流程以及总结?
- 我们先在
data
中定义一个loginForm
数组,数组里面存放登录的用户名username
和登录的密码password
- 在通过
el-form :model
进行双向绑定 ,然后在input
框内 绑定对应的属性名 - 然后我们在methods方法里进行掉接口
- 我们通过
this.$axios.get
(“路径名”,后面跟上对应的参数),然后判断他后台返回来的状态 如果等于200的情况下,让他跳转到后台的首页并且把他的token
值存储到本地,然后提示用户登录成功,不等于200的情况下让他,提示用户登录失败