<template>
<div>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="ruleForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="login">登录</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
username: "",
password: ""
},
rules: {
username: [
{
required: true,
message: "请输入用户名",
trigger: ["blur", "change"]
},
{
pattern: /^1\d{4,10}$/,
message: "请输入正确用户名",
trigger: ["blur", "change"]
}
],
password: [
{
required: true,
message: "请输入密码",
trigger: ["blur", "change"]
},
{
pattern: /^\d{3,8}$/,
message: "请输入合法的密码",
trigger: ["blur", "change"]
}
]
}
};
},
methods: {
async login() {
try {
await this.$refs.ruleForm.validate();
let res = await this.$axios.post(`/login`, {
username: this.ruleForm.username,
password: this.ruleForm.password
});
this.$message.success("登录成功");
console.log(res.data);
localStorage.setItem("token", res.data.data.token);
localStorage.setItem("user", JSON.stringify(res.data.data.user));
this.$router.push("home/list");
} catch (error) {
this.$message.error("登录失败");
}
},
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
}
}
};
</script>
<style lang="less" scoped>
.el-form {
width: 500px;
border: 1px solid #000;
padding: 40px;
margin: 0 auto;
margin-top: 200px;
padding-left: 0px;
padding-bottom: 20px;
border-radius: 10px;
}
</style>
