1.登录主页

界面

• 用户背景图，仅关注表单内容即可；

• 安装插件 md5 插件： npm i js-md5；

• src/router/index.js检查登录页路由是否添加；

• 代码 42-48、53-65 行，根据项目的返回字段做适配；

• 具体登录接口、跳转、见第二篇《02登录,登出接口,token,cookie等逻辑框架说明》

 

<template>
    <div class="login-box">
        <el-row class="login-box-top">
            <div :style="'width:'+(title.length*32)+'px'" class="login-box-topH">
                <div class="login-box-top2">{{ title }}</div>
            </div>
            <div>
                <img src="@images/login/logo-bt.png">
            </div>
        </el-row>
        <div v-loading="loading" class="login-box-m" element-loading-background="rgba(0,0,0,0.5)">
			<div class="item1">
				<el-input v-model="inputName" placeholder="请输入用户名" @keyup.enter.native="commit"></el-input>
			</div>
			<div class="item2">
				<el-input v-model="inputPw" placeholder="请输入密码" type="password" @keyup.enter.native="commit"></el-input>
			</div>
			<el-button type="primary" @click="commit">登录</el-button>
        </div>
    </div>
</template>
 
<script>
import md5 from 'js-md5'
 
export default {
    data() {
        return {
            //当前模块下标
            loading: false,
            inputPw: '',
            inputName: '',
            title: '用户登录'
        }
    },
    methods: {
        commit () {
            if (this.inputName.trim() == '' || this.inputPw.trim() == '') {
				this.$message({ type: 'error', message: '请输入用户名密码或验证码!' })
				return
			}
			let form = {
				"user": this.inputName,
				"pwd": md5(this.inputPw),
				"againPwd": md5(this.inputPw),
				"needPhoneAuth": false,
				"needEmailAuth": false
			}
			this.$store.dispatch('user/login', { form, axios: this.$axios }).then(res => {
				debugger
				// 可能传入 id 或 token ，但都在 vuex 获取 和 处理
				this.$store.dispatch('user/getInfo').then(info => {
					let role = info.account_type;
					debugger
					console.log(role);
					if(role===ROLE_TYPE.OpsUser) {
						let obj = PRJ_CFG.adminCfg.dataExamine;
						this.$store.dispatch('settings/setAdminePageParams', obj)
						this.$store.state.tagsView.visitedViews = [];
						this.$store.state.tagsView.cachedViews = [];
						this.$router.push(`/monitor`);
					}
					else {
						this.$router.push('/');
					}
				})
			}).catch((error) => {
				console.error('登录失败', error);
				this.$message({ type: 'error', message: '登录失败' })
			}) 
        }
    }
}
</script>
<style lang="stylus" scoped>
.login-box {
	width: 100%;
	top: 0;
	bottom: 0;
	position: absolute;
	background: url('@images/login/bg-lr.jpg') no-repeat center center;
	background-size: 100% 100%;
	.login-box-top {
		position: absolute;
		width: 100%;
		height: 64px;
		text-align: center;
		top: 15%;
		margin-top: -64px;
		background-size: 100% 100%;
		.login-box-topH {
			margin: 0 auto;
			display: flex;
			flex-direction: row;
			.login-box-top1 {
				width: 64px;
				height: 64px;
				background: url('@images/login/logo1.png') no-repeat center center;
				background-size: 64px 64px;
				margin-right: 16px;
			}
      		.login-box-top2 {
				height: 64px;
				line-height: 64px;
				font-size: 32px;
				color: #fff;
				font-family: "'微软雅黑', Courier, monospace";
			}
		}
	}
  	.login-box-m {
		z-index: 3;
		width: 420px;
		height: 300px;
		background: url('@images/login/login.png') no-repeat center center;
		background-size: 100% 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -225px;
		margin-top: -170px;
		text-align: center;
		.item1 {
			margin-top: 80px;
		}
		.item2 {
			margin-top: 30px;
		}
		.el-input {
			width: 215px;
		}
		
		.el-button {
			margin-top: 30px;
			width: 215px;
		}
	}
}
</style>

知识点

其它功能说明：

1.验证码（后台生成）；

2.五次输入就锁定（后台控制，接口返回）；

3.界面超过30分钟没操作就退回到登录界面（前端控制，中山项目，参考《04用户30分钟未操作，页面跳转到登录》）；

4.el-form rules 密码验证规则：长度至少8位,含有数字、字母和特殊字符；

 newPwd: [
     {
     required: true,
     pattern: /^(?![A-z0-9]+$)(?=.[^%&',;=?$\x22])(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,}$/,
     message: "长度至少8位,含有数字、字母和特殊字符",
     trigger: "blur"
     },
     {validator: validatePwd, trigger: "blur"}
 ],