后台管理系统【登录页面】

<template>
	<div class="login_container">
		<div class="login_box">
			<!-- 头像区域 -->
			<div class="avatar_box">
				<img src="../assets/liqin.jpg" alt="" />
			</div>

			<!-- 登录表单区域   :model=“loginForm”是登录表单的数据绑定对象 :rules:"。。"是表单的验证规则对象 -->
			<el-form
				ref="loginFormRef"
				:model="loginForm"
				:rules="loginFormRules"
				label-width="0px"
				class="login_form"
			>
				<!-- 用户名 -->
				<el-form-item prop="username">
					<el-input
						v-model="loginForm.username"
						prefix-icon="el-icon-s-custom"
					></el-input>
				</el-form-item>

				<!-- 密码 -->
				<el-form-item prop="password">
					<el-input
						v-model="loginForm.password"
						type="password"
						prefix-icon="el-icon-lock"
					></el-input>
				</el-form-item>

				<!-- 按钮区域 -->
				<el-form-item class="btns">
					<el-button type="primary" @click="login">登录</el-button>
					<el-button type="warning" @click="resetLoginForm">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
export default {
	name: "Login",
	data() {
		return {
			// 这是登录表单的数据绑定对象
			loginForm: {
				username: "admin",
				password: "123456",
			},
			//这是表单的验证规则对象
			loginFormRules: {
				//验证用户名是否合法
				username: [
					{ required: true, message: "请输入登录名称", trigger: "blur" },
					{ min: 3, max: 5, message: "用户名为admin", trigger: "blur" },
				],
				//验证密码是否合法
				password: [
					{ required: true, message: "请输入登录密码", trigger: "blur" },
					{min: 6,max: 15,message: "长度在 6 到 15 个字符",trigger: "blur",},
				],
			},
		};
	},
	methods: {
		//点击重置按钮，重置登录表单
		resetLoginForm() {
			console.log(this);
			this.$refs.loginFormRef.resetFields(); //对整个表单进行重置
		},

		login() {
			//点击登录按钮       这里通过this.$refs.loginFormRef拿到vc
			this.$refs.loginFormRef.validate(async (valid) => {
				//对整个表单进行校验的方法 validate
				if (!valid) return; //如果valid等于false，直接不发起请求
				const { data: res } = await this.$http.post("login", this.loginForm); // 
                                        用了对象解构赋值
				console.log("Login==>res", res); // 解构赋值出一个data属性，重命名为res
				if (res.meta.status !== 200) return this.$message.error("登陆失败"); 
                             //return就登陆失败
				this.$message.success("登录成功"); //没有return就登陆成功  （$message是 
                                                              elementUI提供的弹窗方法）
				//1.将登陆成功后的token，保存到客户端的sessionStorage中
				//1.1项目中除了登录之外的其他API接口，必须在登陆之后才能访问
				//1.2token只应该在当前网站打开期间生效，所以把token保存在sessionstorage中
				window.sessionStorage.setItem("token", res.data.token);
				//2.通过编程式导航跳转到后台主页，路由地址是/home 
				this.$router.push("/home");
			});
		},
		//      * 校验全部字段
		// validate() {
		//   this.$refs['form'].validate((valid) => {
		//     console.log(valid); // true/false
		//   });
		// },      这个是elementUI里面的校验表单的方法！！！！！！！！！！！！！！！！

		// 点击回车键登录
		keyDown(e) {
			if (e.keyCode == 13) {
				this.login();
			}
		},
	},
	mounted() {
		window.addEventListener("keydown", this.keyDown);
	},
	destroyed() {
		window.removeEventListener("keydown", this.keyDown, false); // 如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，
		// 而不在目标或冒泡阶段处理事件。 如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件
	},
};
</script>

<style lang="less" scoped>
.login_container {
	// background-color: #2b4b6b;
	background-color: skyblue;
	background: url(../assets/333.jpg); //设置背景图片
	// background-repeat: no-repeat;
	height: 100%;
	background: cover;
	background-size: 100% 100%;
}
.login_box {
	width: 450px;
	height: 300px;
	// background-color: #fff;
	background-color: pink;
	border-radius: 3px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: url(../assets/aa.gif);

	.avatar_box {
		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;
		img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background-color: #eee;
			transition: all 2s;
		}

		img:hover {
			transform: rotate(360deg);
		}
	}
}
.btns {
	display: flex;
	justify-content: flex-end;
}
.login_form {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box; //这样相当于把padding和border的值都算在content里

	::v-deep.el-form-item__error {
		color: black;
	}
}
</style>