基于vue的后台管理 之 登录界面搭建 前篇

登陆界面的大体框架和细节整改
首先，先看主要的框架搭建，利用form表单，对输入的用户名和密码进行校验

布局

<el-form label-width="0px" class="" :model="loginForm" ref="formRef" :rules="formRules">
	<!-- 用户名 -->
	<el-form-item prop="userName">
		<el-input placeholder="请输入用户名" v-model="loginForm.userName"></el-input>
	</el-form-item>
	<!-- 密码 -->
	<el-form-item prop="password">
		<el-input placeholder="请输入密码" v-model="loginForm.password"></el-input>
	</el-form-item>
	<el-form-item>
		<el-button type="primary" @click="login">登录</el-button>
		<el-button type="info" @click="reset">重置</el-button>
	</el-form-item>
</el-form>

绑定的数据

//绑定的用户名和密码的值
loginForm:{
	userName:'admin',
	password:'fwl123654'
},
//用户名和密码的校验规则
formRules:{
	userName:[
		{required:true, message:'字段必填', trigger:'blur'}
	],
	password:[
		{required:true, message:'密码必填', trigger:'blur'}
	]
}

在输入框中用v-model=“”进行动态绑定数据
在el-form中用:model=""进行动态绑定，在el-form-item中用prop=“”属性进行数据校验

注意，prop绑定的参数名必须和input中动态绑定的参数值一样。不然校验不成功

遇到的细节问题
背景颜色不能被撑开，导致背景色撑不开

在最外层div上加上这个类就可以了

.login_container{
	background-color: #2B4B6B;
	height: 100%;
	padding-top: 250px;
}

完成后

登录功能

// 登录按钮
login() {
	this.$refs['formRef'].validate(async valid => {
		if(!valid) return
		const {data: res}= await this.$http.post('/api/admin/login', this.loginForm)
		// console.log(res);
		if(res.code !== 0) {
			return this.$message.error("登录失败");
		}
		this.$message.success('登录成功')
		// 保存token
		window.sessionStorage.setItem('token',res.data.token)
		// 跳转至首页面
		this.$router.push('/home')
	})
},
// 表单重置
reset() {
	this.$refs['formRef'].resetFields()
}