<template>
<div class="Login">
<div class="LoginForm">
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="用户名" prop="username">
<el-input type="username" v-model="ruleForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
username:""
},
rules: {
username: [
{ required: true, message: "请输入账号", trigger: "blur" },
{ min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
],
pass: [
{ validator:validatePass, trigger: "blur" },
{ min: 6, max: 12, message: "长度在 6 到 20 个字符", trigger: "blur" },
],
checkPass: [
{ validator:validatePass2,trigger: "blur" },
{ min: 6, max: 12, message: "长度在 6 到 20 个字符", trigger: "blur" },
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
var formdata = new FormData();
formdata.append("username", this.ruleForm.username);
formdata.append("password", this.ruleForm.pass);
let config = {
headers: {
"Content-Type": "multipart/form-data",
},
}; //设置请求头!
this.$http.post("/user/login",formdata,config).then((res)=>{
let data=res.data;
if(res.data.status==0){
sessionStorage.setItem("userToken",data.data.token);
sessionStorage.setItem("userInfo",JSON.stringify(data.data.userInfo));
sessionStorage.setItem("userRole",data.data.userInfo.role);
this.$router.push("/index");
}else if(res.data.status==1){
this.$message.error("用户不存在或密码错误");
this.resetForm("ruleForm");
}
// this.$router.push("/alive");
})
} else {
this.$message.error("验证错误");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
mounted(){
this.$message.success("请先登录");
}
}
</script>
<style lang="less" scoped>
.Login{
position: absolute;
width:100%;
height:100%;
background: url("../assets/bg.png") no-repeat ;
background-size:cover;
}
.LoginForm{
width: 35%;
padding: 100px;
position: absolute;
right: 0;
top: 10%;
/deep/.el-input{
width: 70%;
}
}
</style>
login组件
最新推荐文章于 2022-10-02 12:18:32 发布