|
|
|
@ -1,24 +1,45 @@ |
|
|
|
<template> |
|
|
|
<div class='background'> |
|
|
|
<div class="background"> |
|
|
|
<div class="login_box"> |
|
|
|
<div class="box_Central"> |
|
|
|
<div><img></div> |
|
|
|
<div><img /></div> |
|
|
|
|
|
|
|
<el-form :rules="rules" :model="loginForm" ref="loginFormRef" label-width="80px"> |
|
|
|
<el-form |
|
|
|
:rules="rules" |
|
|
|
:model="loginForm" |
|
|
|
ref="loginFormRef" |
|
|
|
label-width="80px" |
|
|
|
> |
|
|
|
<el-form-item label="用户名" prop="username"> |
|
|
|
<el-input v-model="loginForm.username" style="width: 200px" ></el-input> |
|
|
|
<el-input |
|
|
|
v-model="loginForm.username" |
|
|
|
style="width: 200px" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="密码" prop="password"> |
|
|
|
<el-input v-model="loginForm.password" style="width: 200px" show-password ></el-input> |
|
|
|
<el-input |
|
|
|
v-model="loginForm.password" |
|
|
|
style="width: 200px" |
|
|
|
show-password |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<div class="cl"> |
|
|
|
<div class="box_cn"> <el-row > |
|
|
|
<div class="box_cn"> |
|
|
|
<el-row> |
|
|
|
<el-button type="primary" @click="login">登录</el-button> |
|
|
|
</el-row></div> |
|
|
|
<div class="box_cv"> <el-row > |
|
|
|
<el-button type="info" style="background-color: orange;border-color: orange;" @click="resetBtn">重置</el-button> |
|
|
|
</el-row></div></div> |
|
|
|
|
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
<div class="box_cv"> |
|
|
|
<el-row> |
|
|
|
<el-button |
|
|
|
type="info" |
|
|
|
style="background-color: orange; border-color: orange" |
|
|
|
@click="resetBtn" |
|
|
|
>重置</el-button |
|
|
|
> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
<!-- 外层 --> |
|
|
|
@ -31,44 +52,57 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
|
|
|
|
loginForm: { |
|
|
|
username: '', |
|
|
|
password: '' |
|
|
|
username: "", |
|
|
|
password: "", |
|
|
|
}, |
|
|
|
rules: { // key:value |
|
|
|
rules: { |
|
|
|
// key:value |
|
|
|
username: [ |
|
|
|
{ required: true, message: '请输入用户名', trigger: 'blur' }, |
|
|
|
{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' } |
|
|
|
{ required: true, message: "请输入用户名", trigger: "blur" }, |
|
|
|
{ |
|
|
|
min: 3, |
|
|
|
max: 30, |
|
|
|
message: "长度在 3 到 30 个字符", |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
], |
|
|
|
password: [ |
|
|
|
{ required: true, message: '请输入密码', trigger: 'blur' }, |
|
|
|
{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' } |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
{ required: true, message: "请输入密码", trigger: "blur" }, |
|
|
|
{ |
|
|
|
min: 3, |
|
|
|
max: 30, |
|
|
|
message: "长度在 3 到 30 个字符", |
|
|
|
trigger: "blur", |
|
|
|
}, |
|
|
|
], |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
resetBtn() { |
|
|
|
// 获取当前表单对象 之后重置数据 |
|
|
|
this.$refs.loginFormRef.resetFields() |
|
|
|
this.$refs.loginFormRef.resetFields(); |
|
|
|
}, |
|
|
|
login() { |
|
|
|
this.$refs.loginFormRef.validate(async valid => { |
|
|
|
if (!valid) return |
|
|
|
this.$refs.loginFormRef.validate(async (valid) => { |
|
|
|
if (!valid) return; |
|
|
|
|
|
|
|
const { data: result } = |
|
|
|
await this.$http.post('/user/login', this.loginForm) |
|
|
|
if (result.status !== 200) return this.$message.error('用户名或密码错误!') |
|
|
|
this.$message.success('用户登录成功!') |
|
|
|
const token = result.data |
|
|
|
console.log(token) |
|
|
|
window.sessionStorage.setItem('token', token) |
|
|
|
this.$router.push('/home') |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
const { data: result } = await this.$http.post( |
|
|
|
"/user/login", |
|
|
|
this.loginForm |
|
|
|
); |
|
|
|
if (result.status !== 200) |
|
|
|
return this.$message.error("用户名或密码错误!"); |
|
|
|
this.$message.success("用户登录成功!"); |
|
|
|
const token = result.data; |
|
|
|
console.log(token); |
|
|
|
window.sessionStorage.setItem("token", token); |
|
|
|
this.$router.push("/home"); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
@ -77,7 +111,6 @@ export default { |
|
|
|
background: linear-gradient(90deg, #00aaff, #ffffff, #4eecec); |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.box_Central { |
|
|
|
@ -99,7 +132,7 @@ float:left; |
|
|
|
.login_box { |
|
|
|
width: 450px; |
|
|
|
height: 330px; |
|
|
|
background-color: #FFFFFF; |
|
|
|
background-color: #ffffff; |
|
|
|
border-radius: 10px; |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
@ -122,7 +155,7 @@ float:left; |
|
|
|
|
|
|
|
.login_box .face2 { |
|
|
|
background: #111; |
|
|
|
transition: .5s; |
|
|
|
transition: 0.5s; |
|
|
|
} |
|
|
|
/* 经过外层高度变小 */ |
|
|
|
.login_box:hover .face2 { |
|
|
|
@ -138,13 +171,13 @@ float:left; |
|
|
|
} |
|
|
|
|
|
|
|
.login_box .face2::before { |
|
|
|
content: ''; |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 50%; |
|
|
|
height: 100%; |
|
|
|
background: rgba(255, 255,255, .1); |
|
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
|
} |
|
|
|
.login_box .face2 h2 { |
|
|
|
margin: 0; |
|
|
|
@ -153,5 +186,4 @@ float:left; |
|
|
|
color: #fff; |
|
|
|
transition: 0.5s; |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
fengdong777
2 years ago