Login.vue
3.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<template>
<div class="login" id="login">
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<span class="login100-form-title p-b-26">WVP视频平台</span>
<span class="login100-form-title p-b-48">
<i class="fa fa-video-camera"></i>
</span>
<div class="wrap-input100 validate-input" data-validate = "Valid email is: a@b.c">
<input :class="'input100 ' + (username==''?'':'has-val')" type="text" v-model="username" name="username">
<span class="focus-input100" data-placeholder="用户名"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Enter password">
<span class="btn-show-pass">
<i :class="'fa ' + (!showPassword?'fa-eye':'fa-eye-slash')" @click="showPassword = !showPassword"></i>
</span>
<input :class="'input100 ' + (password==''?'':'has-val')" :type="(!showPassword?'password':'text')" v-model="password" name="password">
<span class="focus-input100" data-placeholder="密码"></span>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn" :class="{'login-loading': isLoging}" v-loading="isLoging" element-loading-background="rgb(0 0 0 / 0%);" element-loading-custom-class="login-loading-class">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn" @click="login">登录</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import crypto from 'crypto'
import userService from "./service/UserService";
export default {
name: 'Login',
data(){
return {
isLoging: false,
showPassword: false,
loginLoading: false,
username: '',
password: ''
}
},
created(){
var that = this;
document.onkeydown = function(e) {
var key = window.event.keyCode;
if (key == 13) {
that.login();
}
}
},
methods:{
//登录逻辑
login(){
if(this.username!='' && this.password!=''){
this.toLogin();
}
},
//登录请求
toLogin(){
//需要想后端发送的登录参数
let loginParam = {
username: this.username,
password: crypto.createHash('md5').update(this.password, "utf8").digest('hex')
}
var that = this;
//设置在登录状态
this.isLoging = true;
let timeoutTask = setTimeout(()=>{
that.$message.error("登录超时");
that.isLoging = false;
}, 1000)
this.$axios({
method: 'get',
url:"/api/user/login",
params: loginParam
}).then(function (res) {
window.clearTimeout(timeoutTask)
console.log(res);
console.log("登录成功");
if (res.data.code === 0 ) {
userService.setUser(res.data.data)
//登录成功后
that.cancelEnterkeyDefaultAction();
that.$router.push('/');
}else{
that.isLoging = false;
that.$message({
showClose: true,
message: '登录失败，用户名或密码错误',
type: 'error'
});
}
}).catch(function (error) {
console.log(error)
window.clearTimeout(timeoutTask)
that.$message.error(error.response.data.msg);
that.isLoging = false;
});
},
cancelEnterkeyDefaultAction: function() {
document.onkeydown = function(e) {
var key = window.event.keyCode;
if (key == 13) {
return false;
}
}
}
}
}
</script>