hotWaterManagerWeb/src/components/login/Login.vue

<template>
	<div class="container">
		<el-row>
			<el-col :span="13">
				&nbsp;
			</el-col>
			<el-col :span="11">
				<div id="login_form">
					<div id="logo"></div>
					<div id="title">南昌交通学院热水端管理后台</div>
					<el-form label-width="0px" :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
						class="demo-ruleForm">
						<el-form-item prop="uname">
							<el-input ref="zhanghao" placeholder="请输入账号" maxlength="16" v-model="ruleForm.uname"
								prefix-icon="el-icon-login-user"></el-input>
						</el-form-item>
						<el-form-item prop="upass">
							<el-input ref="mima" placeholder="请输入密码" maxlength="16" type="password"
								v-model="ruleForm.upass" prefix-icon="el-icon-login-pass"
								@keyup.enter.native="submitForm('ruleForm')">
							</el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submitForm('ruleForm')">登 陆</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			var checkName = (rule, value, callback) => {
				// console.log(rule, value, callback);
				if (!value) {
					return callback(new Error('请输入账号'));
				}
				setTimeout(() => {
					if (value.length < 5) {
						callback(new Error('账号长度不小于5位'));
					} else {
						callback();
					}
				}, 30);
			};
			var validatePass = (rule, value, callback) => {
				// console.log(rule, value, callback);
				if (value === '') {
					callback(new Error('请输入密码'));
				}
				setTimeout(() => {
					if (value.length < 5) {
						callback(new Error('密码长度不小于5位'));
					} else {
						callback();
					}
				}, 30);
			};
			return {
				ruleForm: {
					uname: '',
					upass: ''
				},
				rules: {
					uname: [{
						validator: checkName,
						trigger: 'blur'
					}],
					upass: [{
						validator: validatePass,
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			submitForm(formName) {
				let _this = this;
				let params = {
					number: '',
					password: ''
				}
				var username = String(_this.ruleForm.uname).trim()
				var userpass = String(_this.ruleForm.upass).trim()

				if (username && userpass) {
					params.number = username
					params.password = userpass
				} else {
					_this.$message.warning('请输入账号和密码！')
					if (!username)
						_this.$refs['zhanghao'].focus()
					else
						_this.$refs['mima'].focus()
					return
				}

				_this.$refs[formName].validate((valid) => {
					_this.$axios.get('/shuidian/HotWaters/userlog.action', {
							params: params
						})
						.then(res => {
							// console.log(res.data);
							if (typeof(res.data.msg) != 'undefined' && res.data.msg != '' && JSON.stringify(res
									.data) != '{}') {
								// console.log(typeof(res.data.msg));
								if (res.data.msg == '用户名或密码不正确') {
									_this.$message.error(res.data.msg);
									return
								}
								_this.$message.success(res.data.msg);
								sessionStorage.setItem('uname', username);
								// 请求头部携带token
								_this.$axios.defaults.headers['token'] = res.data.access_token;
								// console.log(_this.$axios.defaults);
								if (typeof(res.data.name) == 'undefined') {
									sessionStorage.setItem('unic', '未设置昵称');
								} else {
									sessionStorage.setItem('unic', res.data.name);
								}
								_this.$router.replace('/index'); //跳转到首页
							} else {
								_this.$message({
									showClose: true,
									message: "登陆异常：" + res.data.msg,
									type: 'error'
								});
							}
						})
						.catch(err => {
							// console.log(err);
							_this.$message.error('捕捉异常：' + err)
						})
				});
			}
		}
	}
</script>

<style scoped>
	@import url("./login.css");
</style>