最终效果:
下面只给出实现功能的JSP代码
Login.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- Page title -->
<title>imooc - Login</title>
<!-- End of Page title -->
<!-- Libraries -->
<link type="text/css" href="css/login.css" rel="stylesheet" />
<link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.html" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/easyTooltip.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<!-- End of Libraries -->
</head>
<body>
<div id="container">
<div class="logo">
<a href="#"><img src="assets/logo.png" alt="" /></a>
</div>
<div id="box">
<form action="dologin.jsp" method="post">
<p class="main">
<label>用户名: </label>
<input name="username" value="" />
<label>密码: </label>
<input type="password" name="password" value="">
</p>
<p class="space">
<input type="submit" value="登录" class="login" style="cursor: pointer;"/>
</p>
</form>
</div>
</div>
</body>
</html>
dologin.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String username = "";
String password = "";
request.setCharacterEncoding("utf-8");
username = request.getParameter("username");
password = request.getParameter("password");
if("admin".equals(username)&&"admin".equals(password)){
request.getRequestDispatcher("login_success.jsp").forward(request, response);
session.setAttribute("username", username);
} else {
response.sendRedirect("login_failure.jsp");
}
%>
login_success.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- Page title -->
<title>imooc - Login</title>
<!-- End of Page title -->
<!-- Libraries -->
<link type="text/css" href="css/login.css" rel="stylesheet" />
<link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.html" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/easyTooltip.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<!-- End of Libraries -->
</head>
<body>
<div id="container">
<div class="logo">
<a href="#"><img src="assets/logo.png" alt="" /></a>
</div>
<div id="box">
<%
String loginUser = "";
if(session.getAttribute("username") != null){
loginUser = session.getAttribute("username").toString();
}
%>
<h1>欢迎您
<font color="red"><%=loginUser%></font>
登录成功
</h1>
</div>
</div>
</body>
</html>
login_failure.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- Page title -->
<title>imooc - Login</title>
<!-- End of Page title -->
<!-- Libraries -->
<link type="text/css" href="css/login.css" rel="stylesheet" />
<link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.html" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/easyTooltip.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<!-- End of Libraries -->
</head>
<body>
<div id="container">
<div class="logo">
<a href="#"><img src="assets/logo.png" alt="" /></a>
</div>
<div id="box">
登录失败,请检查用户名密码;<br>
<a href="Login.jsp">返回登陆页面</a>
</div>
</div>
</body>
</html>