登陆跳转
<template>
<div>
<el-form
:model="loginFrom"
:rules="rules"
ref="loginFrom"
label-width="100px"
class="demo-loginFrom"
>
<el-form-item label="账号" prop="username">
<el-input v-model="loginFrom.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="loginFrom.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">立即创建</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
// prop 是:model对象下面的一个属性，表单验证和重置必填这个
import axios from "axios";
export default {
data() {
return {
loginFrom: {
username: "admin",
password: "123456"
},
rules: {
username: [
{ required: true, message: "请输入账号", trigger: "blur" },
{ min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" }
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" }
]
}
};
},
methods: {
//ref用在组件中表示当前组件
//this.$refs.forName
login(){
// http://locaolhost:8888/api/private/v1/login
axios.post('http://localhost:8888/api/private/v1/login',this.loginFrom)
.then(res => {
const {data,meta} = res.data
console.log(data);
if(meta.status == 200){
console.log('登陆成功');
this.$router.push('/home')
}else{
console.log('登陆失败');
}
})
},
submitForm() {
this.$refs.loginFrom.validate(valid => {
if (valid) {
this.login()
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm() {
this.$refs.loginFrom.resetFields();
}
}
};
</script>
<style>
</style>
