vue实战入门进阶篇二：vue+elementui实现网站后台-登录界面实现

系列文章目录

  第一章 系统功能规划

  第二章 登录界面实现

  第三章 系统框架搭建

  第四章 主页框架实现

  第五章 首页界面实现

  第六章 新闻资讯界面实现

  第七章 访问统计界面实现

  第八章 内容配置界面实现

  第九章 系统设置界面实现

  第十章 代码重构及项目发布

---

---

一、界面说明

  本篇实现登录界面效果功能，建立登录框、登录账号密码等，并实现登录逻辑，使用浏览器的本地stroage实现登录信息存储。
  项目映入jquery，可以使用一些jquery的工具方法，比如获取窗口尺寸等方法，用于登录窗口的居中定位。

二、效果演示

三、演示视频

vue实战入门进阶篇：vue+elementui实现网站管理后台界面

四、界面实现

4.1 项目文件

  /pages/Login.vue

4.2 实现说明

1. 实现思路

  登录界面使用图片作为背景，登录框居中展示，使用绝对定位实现，输入登录信息后将存储信息存储到浏览器storage中，每次登录后自动判断登录状态，未登录自动进入登录界面，已登录自动进入主页。

2. 实现代码

• 主页界面：

<script>
	import utils from "./public/utils.js";
	import $ from 'jquery';


	import Menu from "./components/Menu.vue";
	import TopBar from "./components/TopBar.vue";

	export default {
		components: {
			Menu,
			TopBar
		},
		data() {
			return {
				//默认非登录状态,检测登录状态，并跳转到对于界面,
				islogin: utils.islogined()
			}
		},
		watch: {

		},
		methods: {
			logined: function() {
				this.islogin = utils.islogined();
				this.$router.push("Index");

				this.$forceUpdate();
			}
		}
	}
</script>
<template>
	<div class="page-layout">
		<el-container>
			<el-aside width="250px" v-if="islogin">
				<Menu></Menu>
			</el-aside>
			<el-container>
				<el-header v-if="islogin">
					<TopBar></TopBar>
				</el-header>
				<el-main>
					<el-scrollbar>
						<router-view @logined='logined'></router-view>
					</el-scrollbar>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<style>
	.page-layout .el-main {
		padding: 0;
	}
	.page-layout .el-header{
		padding: 0;
	}
</style>

• 工具方法：

import $ from 'jquery';
import ElementPlus from 'element-plus'
import {
	ElLoading
} from 'element-plus'

export default {
	name: 'utils工具方法',
	lodding: null, //加载动画
	/**
	 * 检测是否已经登录
	 */
	islogined: function() {
		//此处通过浏览器store实现，真实项目应该调用后台实现
		return localStorage.getItem("logined");
	},
	/**
	 * 用户登录
	 */
	login: function(logininfo, callback) {
		if (!logininfo || !logininfo.account) {
			callback && callback('error');
			return;
		}
		localStorage.setItem("logininfo", logininfo);
		localStorage.setItem("logined", true);

		callback && callback('success');
	},
	/**
	 * 用户登出
	 */
	logout: function(logininfo, callback) {
		localStorage.removeItem("logininfo");
		localStorage.removeItem("logined");

		callback && callback('success');
	},
	/**
	 * 显示加载动画
	 */
	showloadding: function() {
		this.lodding = ElLoading.service({
			background: "rgba(0, 0, 0, 0.8)",
			fullscreen: true
		});
	},
	/**
	 * 隐藏加载动画
	 */
	hiddenloadding: function() {
		if (this.lodding) {
			this.lodding.close();
		}
	},
	/**
	 * 显示异常信息
	 * @param {Object} msg 异常提示
	 */
	showerror: function(msg) {
		ElMessage.error(msg)
	},
	/**
	 * 显示成功信息
	 * @param {Object} msg 成功提示
	 */
	showsuccess: function(msg) {
		ElMessage({
			message: msg ? msg : '操作成功！',
			type: 'success',
		})
	}
};

• 登录界面：

<script>
	import utils from "../public/utils.js";
	import $ from 'jquery';
	
	export default {
		data() {
			return {
				loginPanelWidht: 400,
				loginPanelHeight: 350,
				panelTop: '20%',
				panelLeft: '30%',
				loginForm: {
					account: 'admin',
					password: '123456',
					remeberme: false
				},
				rules :{
					account: [{
						required: true,
						message: '账号不能为空',
						trigger: 'blur'
					}, ],
					password: [{
						required: true,
						message: '密码不能为空',
						trigger: 'blur'
					}, ]
				}
			}
		},
		created: () => {
			if (utils.islogined()) { //已登录，自动转到主页
				this.$router.push("Index");
				return;
			}
		},
		mounted: function() {
			this.panelTop = (($(window).height() - this.loginPanelWidht) / 2) + "px";
			this.panelLeft = (($(window).width() - this.loginPanelHeight) / 2) + "px";
		},
		methods: {
			submitForm: function ( )  {
				var that = this;
				
				utils.showloadding();
				
				if(!this.$refs.loginFormRef.validate()){
					utils.hiddenloadding();
					//提示异常
					utils.showerror('数据不合法，无法登录。');
					return;
				}
				utils.login(this.loginForm,function(res){
				utils.hiddenloadding();
					if(res == 'success'){
						that.$emit('logined',{});//通知界面登录了
					}
				});
			}
		}
	}
</script>
<template>
	<div>
		<img src="../assets/bg.jpg" class="bg_img" />
		<div class="login_panel">
			<div class="logo">
				<img src="../assets/logo.png" />
			</div>
			<div>
				<el-form ref="loginFormRef" :model="loginForm" status-icon :rules="rules" label-width="120px"
					class="loginForm">
					<el-form-item label="账号:" prop="account">
						<el-input v-model="loginForm.account" size="large" placeholder="请输入账号" />
					</el-form-item>
					<el-form-item label="密码:" prop="password">
						<el-input v-model="loginForm.password" size="large" placeholder="请输入密码" type="password"
							autocomplete="off" />
					</el-form-item>
					<el-form-item label="记住我">
						<el-switch v-model="loginForm.remeberme" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" size="large" @click="submitForm()" style="width: 100%;">登录
						</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="footer">Copyright © 2011-2020 贝贝网络科技有限公司</div>
	</div>
</template>

<style scoped="scoped">
	html,
	body {
		overflow: hidden;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40px;
		line-height: 40px;
		z-index: 1;
		color: #fff;
		text-align: center;
	}

	.bg_img {
		position: fixed;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
	}

	.login_panel {
		position: fixed;
		top: v-bind(panelTop);
		left: v-bind(panelLeft);
		z-index: 1;
		width: v-bind(loginPanelWidht+"px");
		height: v-bind(loginPanelHeight+"px");
		background: #fff;
		border: 1px solid #f8f8f8;
		border-radius: 10px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
	}

	.logo {
		height: 80px;
		padding-top: 30px;
		text-align: center;
	}

	.loginForm {
		padding-right: 80px;
	}
</style>

五、本篇总结

  本篇实现登录界面相关功能，遇到两个问题：
1. 子组件给父组件传值
  通过事件的方式传递参数，实现方式如下：
子组件发送：

this.$emit('logined',{});//通知界面登录了

父组件接受：

<!-- 模板中监听事件 -->
<router-view @logined='logined'></router-view>
<!-- 监听方法 -->
logined: function() {
	this.islogin = utils.islogined();
	this.$router.push("Index");

	this.$forceUpdate();
}

2. 组件中嵌入其他组件
  嵌入其他组件时需要注册，否则不展示组件的内容，代码如下：

<!--引入组件-->
import Menu from "./components/Menu.vue";
import TopBar from "./components/TopBar.vue";
<!--注册组件-->
components: {
	Menu,
	TopBar
},

下一篇：系统框架搭建。