【日记本系统】3–用户登录 前台

2016-12-14 23:32    530人浏览    标签:,     

登录界面:blob.png

这里前段的设计是采用的bootstrap框架,非常大气美观,简单。

blob.png

工程的所有样式包括js图片和css等统一放在style文件夹下,然后style.jsp用来引入各个css样式和js,防止每次写个页面都要引用那些js,css非常麻烦,这样只需要引入这一个jsp页面就把所以的引入都解决了。

style.jsp

<link href="${pageContext.request.contextPath}/style/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/style/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/style/bootstrap/js/jQuery.js"></script>
<script src="${pageContext.request.contextPath}/stylebootstrap/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/style/js/ckeditor/ckeditor.js"></script>
<link href="${pageContext.request.contextPath}/style/style.css" rel="stylesheet">

然后在需要用到这些引用样式的时候只需要在页面的<head></head>中引用这个页面就行了

引用代码:

<jsp:include page="style/style.jsp"></jsp:include>

页面登录表单代码:

<div class="container">
      <form name="myForm" class="form-signin" action="login" method="post">
        <h2 class="form-signin-heading">日记本系统</h2>
        <input id="userName" name="userName" value="${user.userName }"  type="text" class="input-block-level" placeholder="用户名...">
        <input id="password" name="password" value="${user.password }"   type="password" class="input-block-level" placeholder="密   码..." >       
        <button id="login" class="btn btn-large btn-primary" type="submit">登录</button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <button class="btn btn-large btn-primary" type="button" >重置</button>
 
<p align="center" style="padding-top: 15px;">版权所有 :<a href="http://www.javabb.cn">Javabb.cn</a></p>
      </form>
</div>

再在页面中写一段js,用来判断当前用户输入用户名或密码是否为空,这是一段jquery代码,如果不懂的可以去百度看看。意思大概就是获取输入框的值,再判断是否为空值,如果是就不跳出信息提示。

$(function(){
		$('#login').click(function(){
			var username=$('#userName').val();
			var password=$('#password').val();
			if(username==""){
				alert("用户名不能为空");
				return false;
			}
			if(password==""){
				alert("密码不能为空");
				return false;
			}
		});		
	});

做完以后再打开浏览器

http://localhost:8080/Diary/login.jsp

就可以看到效果了。

相关文章

留言评论

评论已关闭。