登陆界面 跟后台对接口
<el-form-item prop="checkPass">
<el-input
type="password"
class="widths users"
v-model="ruleForm2.checkPass" （ /account/code）
auto-complete="off"
placeholder="输入密码"
></el-input>
</el-form-item>
<el-button
class="gradient"
style="width:100%;"
@click.native.prevent="handleSubmit2" //点击事件
@keyup.enter.native="loginEnter('loginData')" //键盘回车事件(回车事件需要配置一下才能用)
:loading="logining"
>登录</el-button>
data() {
return {
logining: false,
ruleForm2: {
account: "", //绑定用户input里面的输入内容
checkPass: "", //绑定密码input里面的输入内容
code: "" //绑定验证码input里面的输入内容
},
1.
// 点击按钮登录
handleSubmit2(ev) {
this.login();
}
2.
// 回车事件登录
loginEnter(){
this.login();
},
3.
login(){
var _this = this;
this.$refs.ruleForm2.validate(valid => {
if (valid) {
this.logining = true;
let data = {
account: this.ruleForm2.account,
password: md5(this.ruleForm2.checkPass),
verifycode: this.ruleForm2.code
};
apiLogin(data).then(res => {
this.logining = false;
document.onkeydown = undefined;
if (res.success == true) {
let user = res.data;
this.$store.commit("user", user); //存储到session
this.$store.commit("token", user.token); //保存后端返回来的token
this.$message({
message: "登录成功",
type: "success"
});
this.$router.push({ path: "/main" }); //跳转到主页
}else {
this.CodeImg(); //这个是点击，或者回车调用的函数 如果登录错了 会自动刷新验证码
this.$message({
message: res.msg,
type: "error"
});
}
});
} else {
console.log("error submit!!");
return false;
}
});
},
备注apiLogin是封装的方法
export const apiLogin = (params) => {
return Api.POST('/api/Account/Logins', params) //后端给的接口
};
