music-web
/
login.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>科讯Muisc-登录</title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<style>
			body {
				overflow: hidden;
			}

			.bg {
				background-image: url(img/timg.jpg);
				background-repeat: no-repeat;
				background-size: 100% 130%;
				position: absolute;
				top: 0px;
				left: 0px;
				right: 0px;
				bottom: 0px;
				filter: blur(20px);
			}

			.login {
				height: 400px;
				width: 600px;
				border-radius: 8px;
				background-color: rgba(255, 255, 255, 0.3);
				position: fixed;
				margin: auto;
				left: 30%;
				top: 10%;
				/*box-shadow: 0 0 10px 1px #E3E3E3 inset;*/
			}

			.title {
				height: 100px;
				line-height: 100px;
				text-align: center;
				color: white;
			}

			.input {
				height: 50px;
				width: 500px;
				border: 1px solid white;
				border-radius: 50px;
				margin: auto;
				margin-bottom: 40px;
			}

			.submit {
				height: 40px;
				width: 300px;
				background-color: royalblue;
				line-height: 40px;
				border-radius: 50px;
				text-align: center;
				color: white;
				margin: auto;
				cursor: pointer;
			}

			.submit:hover {
				opacity: 0.9;
			}

			.ico {
				height: 100%;
				width: 50px;
				line-height: 50px;
				text-align: center;
				color: white;
				font-size: 20px;
				float: left;
			}

			.input-in {
				height: 100%;
				width: 420px;
				float: left;
			}

			.input-in input {
				border: none;
				background: transparent;
				width: 100%;
				height: 100%;
				color: white;
			}
		</style>
	</head>

	<body>
		<div class="bg">
		</div>
		<div class="login">
			<form>
				<h3 class="title">用户登录</h3>
				<div class="input">
					<div class="ico glyphicon glyphicon-user"></div>
					<div class="input-in">
						<input type="text" maxlength="16" placeholder="输入用户名" id="mgName" />
					</div>
					<span style="color:white; margin-left: 30px;" id="mgNameError"></span>
				</div>
				<div class="input">
					<div class="ico glyphicon glyphicon-lock"></div>
					<div class="input-in">
						<input type="password" maxlength="16" placeholder="输入密码" id="mgPassword" />
					</div>
					<span style="color:white; margin-left: 30px;" id="mgPasswordError"></span>
					<p style="text-align: right;"><a style="color: white;" href="reg.html">没有账号,去注册</a></p>
				</div>

				<div class="submit" id="submit">登录</div>
			</form>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="js/config.js" ></script>
	<script>
		$("#submit").click(function() {

			var userName = $("#mgName").val().trim();

			var password = $("#mgPassword").val().trim();

			if(userName.length <= 0) {
				$("#mgNameError").text("用户名不能为空");
				return;
			} else {
				$("#mgNameError").text("");
			}
			if(password.length <= 0) {
				$("#mgPasswordError").text("密码不能为空");
				return;
			} else {
				$("#mgPasswordError").text("");
			}

			$.post(serverLocation+"/kexunMusic/userLogin", {
				"uName": userName,
				"uPassword": password
			}, function(data) {

				if(data.message == "ok") {
					var userInfo = JSON.stringify(data.userInfo)
					window.localStorage.setItem("userInfo", userInfo);
					window.location.href = "index.html";
				} else {
						$("#mgPasswordError").text("账号或密码错误");
				}

			});

		});
	</script>

</html>