1 :使用浏览器进到element-ui官网
登页面开发
登录代码如下
<template>
<div>
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="6">
<div class="grid-content bg-purple-light">
<!-- rules传入约定验证规则 -->
<!-- prop绑定要验证的字段名 -->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="账号" prop="account">
<el-input v-model="ruleForm.account" clearable></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<!-- show-password密码框的小眼睛 -->
<!-- clearable清空选择器,适用于单选框 -->
<el-input v-model="ruleForm.password" show-password clearable></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>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
account: '',
password: '',
},
rules: {
account: [
{ required: true, message: '请输入账号', trigger: 'blur' },
{ min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 2, max: 25, message: '长度在 到 25 个字符', trigger: 'blur'}
]
},
loading: true
};
},
methods: {
submitForm(ruleForm) {
this.$refs[ruleForm].validate((valid) => {
if (valid) {
let parm= new URLSearchParams();
parm.append("username",this.ruleForm.account);
parm.append("password",this.ruleForm.password)
this.$axios({
url:'api/login',
method:'post',
data:parm
}).then(response=>{
if (response.data.code==200) {
console.log(response.data)
this.$router.push('student')
localStorage.setItem("jwt",response.data.date);
sessionStorage.setItem("account",this.ruleForm.account)
}else{
}
})
this.$message({
message: '登录成功!!',
type: 'success',
duration:1000})
} else {
this.$message.error('登录失败');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style scoped>
</style>