maven云笔记之登录注册前台模块

最新推荐文章于 2022-05-31 16:13:17 发布

家懿

最新推荐文章于 2022-05-31 16:13:17 发布

阅读量402

点赞数

分类专栏： Java maven 文章标签： html5 css3 javascript

本文链接：https://blog.csdn.net/weixin_43376497/article/details/106206206

版权

maven 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Java

8 篇文章 0 订阅

订阅专栏

现在开始搞前端

准备一个前台页面

<html>
<!-- Head -->
<head>
	<title>云笔记登陆兼注册</title>
	<!-- Meta-Tags -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script type="application/x-javascript"> 
		addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); 
		function hideURLbar(){ window.scrollTo(0,1); } </script>
	<!-- //Meta-Tags -->

	<!-- Style -->
	 <link rel="stylesheet" href="./css/L_and_R.css" type="text/css" media="all">
     <script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
     <script type="text/javascript" src="./js/login.js"></script>
     <script type="text/javascript" src="./js/register.js"></script>
</head>
<!-- //Head -->

<!-- Body -->
<body>

	<h1>国家图书馆登陆兼注册表单</h1>

	<div class="container w3layouts agileits">

		<div class="login w3layouts agileits">
			<h2>登 录</h2>
			<form action="#" method="post">
				<input type="text" Name="Userame" id = "username" placeholder="请输入用户名" >
				<input type="password" Name="Password" id = "password" placeholder="请输入密码" >
			</form>
			<ul class="tick w3layouts agileits">
				<li>
					<input type="checkbox" id="brand1" value="">
					<label for="brand1"><span></span>记住我</label>
				</li>
			</ul>
			<div class="send-button w3layouts agileits">
				<form>
					<input type="button" value="登 录" id = "submit">
				</form>
			</div>
			<a href="#">记住密码?</a>
			<div class="social-icons w3layouts agileits">
				<p>- 其他方式登录 -</p>
				<ul>
					<li class="qq"><a href="#">
					<span class="icons w3layouts agileits"></span>
					<span class="text w3layouts agileits">QQ</span></a></li>
					<li class="weixin w3ls"><a href="#">
					<span class="icons w3layouts"></span>
					<span class="text w3layouts agileits">微信</span></a></li>
					<li class="weibo aits"><a href="#">
					<span class="icons agileits"></span>
					<span class="text w3layouts agileits">微博</span></a></li>
					<div class="clear"> </div>
				</ul>
			</div>
			<div class="clear"></div>
		</div>
		<div class="register w3layouts agileits">
			<h2>注 册</h2>
			<form action="#" method="post">
				<input type="text"  placeholder="请输入用户名" id="re_username">
				<input type="text" placeholder="请输入姓名" id= "re_name">
				<input type="text" placeholder="请输入年龄" id= "re_age">
				<input type="password"  placeholder="请输入密码" id="re_password">
				<input type="password"  placeholder="请输入确认密码" id="re_repassword">
			</form>
			<div class="send-button w3layouts agileits">
				<form>
					<input type="button" value="免费注册" id = "register">
				</form>
			</div>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
	</div>
</body>
<!-- //Body -->

</html>

其中所需的L_and_R.css文件如下

/*-- Reset Code --*/	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
	article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
	ol,ul{list-style:none;padding:0;margin:0;}
	blockquote,q{quotes:none;}
	blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
	table{border-collapse:collapse;border-spacing:0;}
	a{text-decoration:none;}
	.txt-rt{text-align:right;}
	.txt-lt{text-align:left;}
	.txt-center{text-align:center;}
	.float-rt{float:right;}
	.float-lt{float:left;}
	.clear{clear:both;}
	.pos-relative{position:relative;}
	.pos-absolute{position:absolute;}
	.vertical-base{vertical-align:baseline;}
	.vertical-top{vertical-align:top;}
	.underline{	padding-bottom:3px;	border-bottom: 1px solid #eee;}
	nav.vertical ul li{display:block;}
	nav.horizontal ul li{display: inline-block;}
	img{max-width:100%;}

/*-- Reset Code --*/



/*-- Index-Page-Styling --*/

body {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    background: url("../imgs/background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

body a {
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    -o-transition:0.5s all;
    -ms-transition:0.5s all;
    text-decoration: none;
}

h1 {
    font-size: 45px;
    font-weight: 500;
    letter-spacing: 4px;
    margin: 60px 0;
    color: #FFFFFF;
}

.container {
    width: 50%;
    margin: 0 auto;
    padding: 40px;
    background-color: rgba(10, 10, 10, 0.77);
    border: 2px ridge rgba(238, 238, 238, 0.13);
    border-radius: 5px;
    -moz-box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
    -webkit-box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
    box-shadow: 0 -5px 10px 1px rgba(16, 16, 16, 0.57);
    border-bottom: none;
    border-bottom-left-radius: initial;
    border-bottom-right-radius: initial;
}

.login {
    width: 45%;
    float: left;
    text-align: left;
    padding-right: 40px;
}

::-webkit-input-placeholder {
    color: #CCC;
}

:-moz-placeholder {
    color: #CCC;
}

::-moz-placeholder {
    color: #CCC;
}

:-ms-input-placeholder {
    color: #CCC;
}

h2 {
    font-size: 35px;
    text-align: left;
    color: #FFF;
    font-weight: 100;
    margin-bottom: 20px;
}

ul.tick {
    float: left;
    list-style: none;
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
}

ul.tick li input[type="checkbox"] {
    display: none;
}

ul.tick li input[type="checkbox"]+label {
    position: relative;
    padding-left: 30px;
    border: #F0F8FF;
    display: inline-block;
    font-size: 13px;
    color: #EEE;
}

ul.tick li input[type="checkbox"]+label span:first-child {
    width: 17px;
    height: 17px;
    display: inline-block;
    border: 1px solid #EEE;
    position: absolute;
    top: -3px;
    left: 0;
    bottom: 4px;
}

ul.tick li input[type="checkbox"]:checked+label span:first-child:before {
    content: "";
    background: url(../imgs/tick.png)no-repeat;
    position: absolute;
    left: 3px;
    top: 3px;
    font-size: 10px;
    width: 10px;
    height: 10px;
}

.social-icons {
    margin-top: 20px;
    text-align: center;
}

.social-icons p {
    color: #CCC;
    margin-bottom: 15px;
}

.social-icons ul li {
    float: left;
    width: 32.9%;
}
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
li.twt {
    margin: 0 2px;
}

.social-icons ul li a {
    display:block;
}

.social-icons ul li a span {
    vertical-align: middle;
    color: #fff;
    font-size: 15px;
}

.social-icons ul li span.icons {
    background: url("../imgs/i1.png") no-repeat center;
    width: 30px;
    height: 30px;
    display: inline-block;
}

.social-icons ul li.weixin span.icons {
    background: url("../imgs/weixin.png") no-repeat;
    background-size: 100%;
}
.social-icons ul li.qq span.icons {
    background: url("../imgs/QQ.png") no-repeat;
    background-size: 100%;
}
.social-icons ul li.weibo span.icons {
    /*--w3layouts--*/
    /*--agileits--*/
    background: url("../imgs/weibo.png") no-repeat;
    background-size: 100%;
}

.social-icons ul li a:hover span.icons {
    transform: rotatey(360deg);
    -webkit-transform: rotatey(360deg);
    -o-transform: rotatey(360deg);
    -moz-transform: rotatey(360deg);
    -ms-transform: rotatey(360deg);
    transition: .5s all;
}

input[type="text"], input[type="password"] {
    width: 93.4%;
    margin-bottom: 20px;
    padding: 10px;
    float: left;
    background-color: transparent;
    border: none;
    font-size: 15px;
    border-bottom: 1px solid rgba(238, 238, 238, 0.41);
    outline: none;
    color: #FFF;
}

.send-button {
    margin-bottom: 20px;
}

.send-button input[type="button"] {
    width: 60%;
    padding: 10px 0;
    font-size: 16px;
    font-weight: 100;
    background-color: transparent;
    color: #CCC;
    border: 1px solid rgba(238, 238, 238, 0.41);
    border-width: thin;
    cursor: pointer;
    outline: none;
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    -o-transition:0.5s all;
    -ms-transition:0.5s all;
    text-decoration: none;
}

/*--w3layouts--*/
/*--agileits--*/
.send-button input[type="button"]:hover {
    background-color: #000;
    border: 1px solid #FFF;
    color: #FFF;
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    -o-transition:0.5s all;
    -ms-transition:0.5s all;
    text-decoration: none;
}

.login a {
    color: #CCC;
}

.login a:hover {
    color: #FFF;
}

.register {
    width: 44%;
    float: left;
    border-left: 1px solid #DDD;
    padding-left: 40px;
    text-align: left;
}

.register p {
    color: #CCC;
    margin-bottom: 10px;
}

.register p a {
    color: #CCC;
}

.register p a:hover {
    color: #FFF;
}

.footer {
    text-align: center;
    margin: 100px 20px 20px;
}
.footer p {
    color: #CCC;
    line-height: 25px;
    /*--w3layouts--*/
    /*--agileits--*/
}
.footer a {
    color: #CCC;
    text-decoration: none;
}
.footer a:hover {
    color: #FFF;
}

/*-- Index-Page-Styling --*/

/*--- Responsive Code ---*/



@media screen and (max-width: 1920px) {
    h1 {
        margin: 100px 0;
    }
}

@media screen and (max-width: 1600px) {
    h1 {
        margin: 60px 0;
    }
}

@media screen and (max-width: 1440px) {
    .container {
        width: 53%;
    }
}

@media screen and (max-width: 1366px) {
    h1 {
        margin: 50px 0;
    }
    .container {
        width: 57%;
    }
    /*--w3layouts--*/
    /*--agileits--*/
}

@media screen and (max-width: 1280px) {
    .container {
        width: 60%;
    }
}

@media screen and (max-width: 1024px) {
    .container {
        width: 76%;
    }
}

@media screen and (max-width: 966px) {
    .container {
        width: 80%;
    }
    .footer {
        margin: 50px 20px 20px;
    }
}

@media screen and (max-width: 853px) {
    .login {
        padding-right: 36px;
    }
    .register {
        padding-left: 36px;
    }
    .social-icons ul li {
        width: 32.8%;
    }
    .register p {
        font-size: 14px;
    }
}

@media screen and (max-width: 800px) {
    h1 {
        font-size: 43px;
    }
    .login {
        padding-right: 35px;
    }
    .register {
        padding-left: 34px;
    }
    .social-icons ul li span.icons {
        width: 28px;
    }
}

@media screen and (max-width: 768px) {
    .container {
        width: 85%;
    }
    .register p {
        font-size: 13.8px;
    }
}

@media screen and (max-width: 736px) {
    h1 {
        font-size: 40px;
    }
    .container {
        width: 87%;
        padding: 35px;
    }
    .login {
        padding-right: 34px;
    }
    .register {
        padding-left: 33px;
    }
    .social-icons ul li a span {
        font-size: 14px;
    }
    .register p {
        font-size: 13.2px;
    }
}

@media screen and (max-width: 667px) {
    h1 {
        font-size: 35px;
        letter-spacing: 3px;
    }
    .container {
        width: 55%;
        padding: 50px;
    }
    .login {
        padding: 0;
        width: 100%;
        margin-bottom: 50px;
    }
    .register {
        padding: 40px 0 0 0;
        width: 100%;
        border: none;
        border-top: 1px solid #DDD;
    }
}

@media screen and (max-width: 603px) {
    h1 {
        letter-spacing: 2px;
    }
}

@media screen and (max-width: 568px) {
    h1 {
        letter-spacing: 1px;
        margin: 30px 0;
    }
    .container {
        width: 60%;
        padding: 40px;
    }
}

@media screen and (max-width: 533px) {
    h1 {
        font-size: 32px;
    }
}

@media screen and (max-width: 480px) {
    .container {
        width: 70%;
        padding: 35px;
    }
    .send-button input[type="submit"] {
        width: 50%;
        padding: 8px 0;
    }
}

@media screen and (max-width: 414px) {
    h1 {
        font-size: 30px;
    }
    .container {
        width: 75%;
        padding: 25px;
    }
    .login {
        margin-bottom: 30px;
    }
    h2 {
        font-size: 30px;
        margin-bottom: 15px;
    }
    .register {
        padding: 30px 0 0 0;
    }
    .footer p {
        font-size: 14px;
    }
}

@media screen and (max-width: 384px) {
    h1 {
        letter-spacing: 0px;
    }
}

@media screen and (max-width: 375px) {
    .social-icons ul li span.icons {
        width: 27px;
    }
    .register p {
        font-size: 13px;
        line-height: 23px;
    }
}

@media screen and (max-width: 360px) {
    .container {
        width: 80%;
        padding: 20px;
    }
}

@media screen and (max-width: 320px) {
    .social-icons ul li {
        width: 32.7%;
    }
    .social-icons ul li span.icons {
        width: 25px;
    }
    .social-icons ul li a span {
        font-size: 12.4px;
    }
}
/*--- Responsive Code ---*/

所需的login.js以及register.js

//这是登录所需要的js
$(function(){
	$('#submit').click(function(){
		var sendData={"username":$('#username').val(),"password":$('#password').val()};
		$.ajax({
			type:"post",
			url:"user/login.do",
			data:sendData,
			datatype:"json",
			success:function(msg){
				//var objmsg = eval('(' + msg + ')');
				//console.log(objmsg.result);
				if(msg.state == 1){
					//登陆成功
					console.log(msg.data);
					alert("欢迎"+msg.data.name);
				}else{
					//登陆失败
					alert(msg.message);
				}
			},
			error:function(msg){
				alert("通信失败");
			}
			
		});
	})
});

//这是注册所需要的js
$(function(){
	$("#register").click(function(){
		if($("#re_username").val()==''){
			alert("用户名不能为空");
			$("#re_username").focus();
			return;	
		}else if($("#re_password").val()==''){
			alert("密码不能为空");
			$("#re_password").focus();
			return;
		}else if($("#re_repassword").val()==''){
			alert("确认密码不能为空");
			$("#re_repassword").focus();
			return;
		}else if($("#re_name").val()==''){
			alert("姓名不能为空");
			$("#re_name").focus();
			return;
		}else if($("#re_age").val()==''){
			alert("年龄不能为空");
			$("#re_age").focus();
			return;
		}
		
		if($("#re_password").val() != $("#re_repassword").val()){
			alert("重新输入密码");
			$("#re_repassword").focus();
			return;
		}
		var reg=/^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
		if(reg.test($('#re_age').val())){
			alert('ok');
		}else{
			alert("年龄输入不合法");
			$("#re_age").focus();
			return;
		}
			
		
		var sendData={"username":$('#re_username').val(),"password":$('#re_password').val(),"name":$('#re_name').val(),"age":$('#re_age').val()};
		$.ajax({
			type:"post",
			url:"user/register.do",
			data:sendData,
			datatype:"json",
			success:function(msg){
			
				if(msg.state == 1){
					//注册成功
					console.log(msg.data);
					alert("欢迎");
				}else{
					//注册失败
					alert(msg.message);
				}
			},
			error:function(msg){
				alert("注册失败");
			}
			
		});
	});
});

最后带上运行效果
在这里插入图片描述

家懿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
maven云笔记之登录注册前台模块

现在开始搞前端准备一个前台页面<html><head> <title>云笔记登陆兼注册</title>  <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/
复制链接

扫一扫