<template>
|
<div class="login_container">
|
<div class="login_box">
|
<!-- 头像区 -->
|
<div class="avatar">
|
<img src="@/assets/images/login_logo.jpg">
|
</div>
|
<!-- 登录表单区 -->
|
<div style="margin: 20px;"></div>
|
<el-form label-width="0px" class="login_from" :model="loginForm" ref="loginFormRef">
|
<!-- 用户名 -->
|
<el-form-item prop="username">
|
<el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
|
</el-form-item>
|
<!-- 密码 -->
|
<el-form-item prop="password">
|
<el-input
|
v-model="loginForm.password"
|
prefix-icon="el-icon-lock"
|
type="password"
|
></el-input>
|
</el-form-item>
|
<el-form-item class="btns">
|
<el-button type="primary" @click="onSubmit">登录</el-button>
|
<el-button type="info">注册</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { login,initDBPool,checkLoginSession } from "@/assets/js/api";
|
|
export default {
|
data() {
|
return {
|
labelPosition: "right" /* 登录表单 */,
|
formLabelAlign: {
|
name: "",
|
region: "",
|
type: ""
|
},
|
/* 登录表单el-form 的 数据绑定 */
|
loginForm: {
|
username: "",
|
password: ""
|
}
|
};
|
},
|
methods: {
|
/* 初始化连接池 检测后台session*/
|
async woData(){
|
const [pool,sessions] =await Promise.all([initDBPool,checkLoginSession ])
|
/* console.log('pool',pool);
|
console.log('sessions',sessions); */
|
},
|
onSubmit() {
|
this.$refs.loginFormRef.validate(async valid => {
|
if (!valid) return;
|
const { data: res } = await login(
|
this.loginForm.username,
|
this.loginForm.password
|
);
|
if (res.result && JSON.parse(res.result).code == 0)
|
return this.$message.error(JSON.parse(res.result).msg);
|
this.$message.success("登录成功");
|
sessionStorage.setItem('username', this.loginForm.username);
|
this.$router.push("/home");
|
});
|
}
|
},
|
mounted() {
|
// 初始化登录状态
|
sessionStorage.setItem('username', "");
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
/* 登录大盒子背景 */
|
.login_container {
|
width: 100%;
|
}
|
|
/* 登录框 */
|
.login_box {
|
width: 450px;
|
height: 320px;
|
background-color: #fff;
|
border-radius: 3px;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
|
/* v图片的盒子 */
|
.avatar {
|
height: 130px;
|
width: 130px;
|
border: 1px solid #eee;
|
border-radius: 50%; /* 边框圆角 */
|
padding: 10px;
|
box-shadow: 0 0 10px #ddd;
|
position: absolute;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
background-color: #fff;
|
/* v图片 */
|
img {
|
width: 130px;
|
height: 130px;
|
border-radius: 50%;
|
background-color: #eeeeee;
|
}
|
}
|
}
|
|
/* 登录表单框 */
|
.login_from {
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
padding: 0 20px;
|
box-sizing: border-box;
|
}
|
|
/* 登录按钮 */
|
.btns {
|
text-align: center;
|
}
|
</style>
|
