login.vue
<!--登录页面-->
<template>
<div class="login" >
<div class="loginDiv">
<h1 class="loginH">健康传奇管理系统登录页面</h1>
<p>版本号:JKQCV-1.0</p>
<el-card class="box-card" style="background-color: #f3f3f3;">
<!--1.使用原生验证-->
<!--<el-form ref="formLogin" :model="formLogin" >
<el-form-item >
<el-input placeholder="请输入账号" v-model="formLogin.userName" @blur="inputBlur('userName',formLogin.userName)"><template slot="prepend"><!--<i slot="suffix" class="el-input__icon el-icon-date"></i>账号</template></el-input>
<!--<p>{{formLogin.userError}}</p>
</el-form-item>
<el-form-item >
<el-input placeholder="请输入密码"v-model="formLogin.password" @blur="inputBlur('password',formLogin.password)" type="password"><template slot="prepend" >密码</template></el-input>
<p>{{formLogin.passwordError}}</p>
</el-form-item>
<el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
<el-form-item>
<el-button type="primary" @click.native.prevent="submitLogin('formLogin')" style="width:100%" :disabled="formLogin.beDisabled">登 录</el-button>
</el-form-item>
</el-form>-->
<!--2.使用验证器验证-->
<el-form ref="formLogin" :model="formLogin" :rules="rulesLogin" >
<el-form-item prop="userName">
<el-input type="text" v-model.trim()="formLogin.userName" auto-complete="off" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model.trim()="formLogin.password" auto-complete="off" placeholder="请输入密码"></el-input>
</el-form-item>
<!-- <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>-->
<el-form-item style="width:100%;">
<el-button type="primary" style="width:100%;" @click.native.prevent="submitLogin('formLogin')" >登录</el-button>
<!--<el-button @click.native.prevent="handleReset2" :loading="logining">重置</el-button>-->
</el-form-item>
</el-form>
</el-card>
</div>
</div>
</template>
<script>
/* 原生验证
export default{
name:'loginSys',
data(){
return{
formLogin:{
userName:'',
userError:'',
password:'',
passwordError:'',
beDisabled:false,//使用时改true
},
}
},
methods:{
resetFormLogin(){
this.formLogin.userName='',
this.formLogin.userError='',
this.formLogin.password='',
this.formLogin.passwordError=''
},
inputBlur(errorType,inputContent){
// if(errorType=='userName'){
// if(inputContent==''){
// this.formLogin.userError='用户名不能为空';
// }else{
// this.formLogin.userError='';
// }
// }else if(errorType=='password'){
// if(inputContent==''){
// this.formLogin.passwordError='密码不能为空';
// }else{
// this.formLogin.passwordError='';
// }
//
// }
// if(this.formLogin.userName!=''&&this.formLogin.password!=''){
// this.formLogin.beDisabled=false;
// }else{
// this.formLogin.beDisabled=true;
// }
},
submitLogin(){//跳转到主页
let that=this;
let config={
headers:{
'Content-Type': 'application/json'
}
};
that.axios.post('/users/loginUsers',
{
params:{
userName:that.formLogin.userName,
password:that.formLogin.password,
}
}
).then((res)=>{}).catch()
that.$router.push("/HelloWorld");
},
}
}*/
export default{
name:'loginSys',
data(){
const validateUserName = (rule, value, callback) => {
if (value.length < 2) {
//export function isWscnEmail(str) {
//const reg = /^[a-z0-9](?:[-_.+]?[a-z0-9]+)*@wz\.com$/i;
//return reg.test(str.trim());
//}
callback(new Error('用户名长度不能＜5位'));
} else {
callback();
}
};
const validatePassWord = (rule, value, callback) => {
if (value.length < 2) {
callback(new Error('密码不能小于2位'));
} else {
callback();
}
};
return{
// logining: false,
checked:true,
formLogin:{
userName:'',
password:'',
},
rulesLogin:{
userName:[
{required:true,message:'请输入账号',trigger:'blur',validator: validateUserName}
// { validator: validateMobile, trigger: 'blur' },//基于正则表达来验证
// { required: true, message: '请输入手机号', trigger: 'blur' },
// { pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
],
password:[
{required: true, trigger: 'blur',validator: validatePassWord }
]
}
}
},
methods:{
submitLogin(formLogin){//POST /users/loginUsers userName password
var that=this;
that.$router.push({ path:"/HelloWorld" });//正式去掉
that.$refs.formLogin.validate((valid)=>{
if(valid){
// that.logining=false;//调试用，正式去掉
// that.$router.push({ path:"/HelloWorld" });//调试用，正式去掉
// that.logining=true;
// let loginParams = { userName: that.formLogin.userName, password: that.formLogin.password };
that.axios.post('/users/loginUsers',{
userName: that.formLogin.userName,
password: that.formLogin.password
}
// loginParams
).then((res)=>{
// that.logining=false;
//let user={managerId:res.data.id,name:that.formLogin.userName,roleName:res.data.roleName};//privileges:[],id: ,name: roleName:
// console.log(user);
that.$message({
message: "登录成功",
type: 'success',
})
// let userName1=that.formLogin.userName;
// that.$root.userName2=userName1;
// console.log(userName1);
let mangerId=res.data.id;
that.$root.managerId=mangerId;//传到main.js
window.sessionStorage.setItem('userName',that.formLogin.userName);//记住用户信息，userName mangerId
// window.sessionStorage.setItem('mangerId',mangerId);
that.$router.push({ path:"/HelloWorld" });//跳转到主页
}).catch((error)=>{
that.$message({
message: "登录失败:"+error.response.data.cause.message,
type: 'error',
})
})
}else{
console.log('error submit!!');
return false;
}
});
},
},
//sessionStorage.setItem('mangerId', value); 取的时候sessionStorage.getItem('key');
}
</script>
<style scoped="scoped">
.login{width:100%;height:1100px;background-color: lightblue;padding-top:200px;}
.loginDiv{width:480px;margin:0 auto; }
.loginDiv .loginH{text-align: center;margin-bottom:20px;}
/*html,body{
margin: 0;
padding: 0;
position: relative;
}*/
.loginDiv p{
/* color: red;*/
margin-bottom: 20px;
text-align: center;
}
.remember {
margin: 0px 0px 25px 0px;
}
</style>