easyui-login登陆系统界面使用

最新推荐文章于 2022-10-26 17:22:46 发布

yqj234

最新推荐文章于 2022-10-26 17:22:46 发布

阅读量611

点赞数

本文链接：https://blog.csdn.net/yqj234/article/details/119804480

版权

后台登录角色管理验证登录信息安全角色选择

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>后台登录-进销存管理系统</title>
<meta name="author" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="static/css/style.css" />
<style>
canvas {
	z-index: -1;
	position: absolute;
}

.black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.8;
	opacity: .80;
	filter: alpha(opacity = 80);
}

.white_content {
	display: none;
	position: absolute;
	top: 25%;
	left: 35%;
	width: 25%;
	height: 15%;
	padding: 16px;
	border: 2 solid black;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}
</style>
<style>
<!--
* {
	margin: 0px;
	padding: 0px;
}

body {
	background: url(static/images/login/bg.jpg) repeat-x top center;
	background-color: #084e8d;
}

.login_box {
	margin: 0 auto;
	width: 1024px;
	height: 725px;
	background: url(static/images/login/login_bg.png) no-repeat;
}

.login_text {
	font-size: 13px;
	color: #075398;
	width: 270px;
	padding: 220px 0px 0px 470px;
	line-height: 22px;
}

.login_text P {
	height: 38px;
	vertical-align: middle;
}

.login_submit {
	padding-left: 50px;
}

.text_bg {
	background: url(static/images/login/input_bg.jpg) no-repeat;
	width: 182px;
	height: 27px;
	border: none;
	margin-bottom: -4px;
}

.code_bg {
	width: 90px;
	border-right: 1px solid #88b0dc;
}
-->
</style>
<script src="static/js/jquery.js"></script>
<script src="static/js/verifyCode.js"></script>
<script src="static/js/Particleground.js"></script>
<script>
	$(document)
			.ready(
					function() {
						//粒子背景特效
						$('body').particleground({
							dotColor : '#5cbdaa',
							lineColor : '#5cbdaa'
						});

						$("#loginBtn")
								.click(
										function() {
											$
													.post(
															"./user/login",
															{
																userName : $(
																		"#userName")
																		.val(),
																password : $(
																		"#password")
																		.val(),
																imageCode : $(
																		"#imageCode")
																		.val()
															},
															function(result) {
																console
																		.log(result);
																if (result.success) {
																	if (result.roleSize == 1) {
																		var roleId = result.roleList[0].id;
																		$
																				.post(
																						"./user/saveRole",
																						{
																							roleId : roleId
																						},
																						function(
																								result) {
																							if (result.success) {
																								window.location.href = "./main.html";
																							}
																						});
																	} else {
																		$(
																				"#roleList")
																				.empty();
																		var roles = result.roleList;
																		for (var i = 0; i < roles.length; i++) {
																			if (i == 0) {
																				$(
																						"#roleList")
																						.append(
																								"<input type='radio' checked=true  name='role' value='"+roles[i].id+"'/>"
																										+ roles[i].name
																										+ "&nbsp;&nbsp;")

																			} else {
																				$(
																						"#roleList")
																						.append(
																								"<input type='radio' name='role' value='"+roles[i].id+"'/>"
																										+ roles[i].name
																										+ "&nbsp;&nbsp;")
																			}
																		}
																		document
																				.getElementById('light').style.display = 'block';
																		document
																				.getElementById('fade').style.display = 'block';
																	}
																} else {
																	alert(result.errorInfo);
																}
															});
										});
					});

	function saveRole() {
		var roleId = $("input[name='role']:checked").val();
		$.post("./user/saveRole", {
			roleId : roleId
		}, function(result) {
			if (result.success) {
				window.location.href = "/main.html";
			}
		});
	}
</script>
</head>
<body>
	<div class="login_box">

		<dl class="login_text">

			<dl class="" style="margin-bottom:80px;margin-left:-180px;word-spacing:6px; font-size:30px;color:#ffffff">
				<p>设备管理系统</p>
			</dl>
			<dd class="" style="word-spacing: 6px;">
				<p>
					帐号：<input type="text" id="userName" placeholder="账号"
						class="text_bg  " />
				</p>
			</dd>

			<dd class="">
				<p>
					密码：<input type="password" id="password" placeholder="密码"
						class="text_bg  " />
				</p>
			</dd>
			<dd>
				<p>
					验证码:<input type="text" id="imageCode" name="imageCode"
						style="margin-bottom: -5px;" placeholder="验证码" maxlength="4"
						class="text_bg code_bg"> <img id="imgObj" title="看不清，换一张"
						src="./drawImage" onclick="changeImg()"
						style="margin-bottom: -5px;" />
				</p>
			</dd>
			<dd class="login_submit">
				<input type="image" id="loginBtn" value="立即登陆"
					src="static/images/login/submit_btn.jpg" /> <input type="image"
					id="loginBtn" value="立即登陆" src="static/images/login/reset_btn.jpg" />
			</dd>

		</dl>
		<div id="light" class="white_content">
			<p>你的帐号未设定角色，请联系系统管理员！</p>
			<div id="roleList"></div>

		</div>
		<div id="fade" class="black_overlay"></div>

	</div>


</body>
</html>

yqj234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui-login登陆系统界面使用

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>后台登录-进销存管理系统</title><meta name="author" content="text/html;charset=utf-8" /><link rel="stylesheet" type="text/css" href="static/css/style.css" /&g.
复制链接

扫一扫