1.在配置路由路径的文件夹里加上如下图的语句
2.在main.js里添加
3.login.vue
<template>
<div>
<!-- 表单-->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
<!-- 用户名一行-->
<el-row class="rowStyle">
<el-col :span="18" :offset="3">
<el-form-item prop="userName">
<el-input class="inputStyle" v-model="ruleForm.userName" placeholder="用户名"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="18" :offset="3">
<el-form-item prop="password">
<el-input class="inputStyle" v-model="ruleForm.password" placeholder="密码"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row class="rowStyle">
<el-col :span="18" :offset="3">
<el-form-item>
<el-button class="buttonStyle buttonStyle1" @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="18" :offset="3">
<el-form-item>
<el-button class="buttonStyle buttonStyle2" @click="submitForm('ruleForm')">登录</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
name: "register.vue",
data() {
return {
ruleForm: {
userName: '',
password:''
},
rules: {
userName: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
password:[
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 3, max: 6, message: '长度在 3 到6 个字符', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
let _this = this;
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
this.$axios.post('/login/login',
this.$qs.stringify({
name: this.ruleForm.userName,
password: this.ruleForm.password })
)
.then(res => {
console.log(res)
sessionStorage.setItem("token", 'true');
_this.$router.push({path: '/homePage/homePagePeople'})
// if(res.data.code == '1') {
// this.errorTip = false;
// alert("登录成功"+res.result.name);
// this.$router.push({path: '/homePageLike'})
// }
})
.catch(function(error) {
console.log(error);
});
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
重点代码为红框处
来源:CSDN
作者:北漂女程序媛的修炼笔记
链接:https://blog.csdn.net/qq_41589917/article/details/104417943