一、实验目的
1、理解Servlet的工作原理；
2、掌握javabean在web程序中的应用；
3、掌握基于Servlet的MVC模式；
二、实验要求
掌握Servlet的编程技术。
掌握Web程序中使用javabean实现业务逻辑
熟练使用IDE开发Servlet应用
掌握Servlet3.0的注解功能
三、实验内容
1、使用JSP、Servlet、JavaBean实现基于MVC模式的用户登录验证程序。
2、完成上述实验的基础上可以加入图片验证码、自动登录、注销等额外的功能。
- 页面框架：
- User.java（用于获取用户名和密码）：
package dto;
/*User类获取用户名和密码*/
public class User {
private String name;
private String pwd;
public String getName() {
return name;
}
public void setName(String name) {
this.name=name;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd=pwd;
}
}
- UserCheck.java（用于登录验证）:
package Service;
import dto.User;
public class UserCheck {
//登陆验证
public boolean validate(User user) {
if(user!=null&&user.getName().equals("沈香香")) {
if(user.getPwd().equals("123456")) {
return true;
}
return false;
}
return false;
}
}
- LoginCheckServlet.java（用于控制用户登录验证）
package Servlet;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import Service.UserCheck;
import dto.User;
@WebServlet(name="LoginCheckServlet",urlPatterns= {"/LoginCheckServlet"})
public class LoginCheckServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String name=request.getParameter("name");
String pwd=request.getParameter("pwd");
User user=new User();
user.setName(name);
user.setPwd(pwd);
UserCheck uc=new UserCheck();
if(uc.validate(user)) {
request.setAttribute("user", user);
RequestDispatcher dis=request.getRequestDispatcher("loginSuccess.jsp");
dis.forward(request, response);
} else {
System.out.println("账号密码错误。");
response.sendRedirect("loginCheck.jsp");
}
}
}
- loginCheck.jsp（登录界面）：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>loginCheck.jsp</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<style type="text/css">
#table2{
width:300px;
height:200px
}
</style>
<script type="text/javascript" language = "javascript">
var allforms = document.forms;
function check(){
//单击一次提交 调用函数之前先清掉上一次的检查信息。
userNameSpan.innerText = "";
pswSpan.innerText="";
//验证用户名
var len =allforms[0].name.value.length;
if(len<3 || len>15){
userNameSpan.innerText = "请输入正确的用户名！";
return false;
}
//验证密码
len = allforms[0].pwd.value.length;
if(len<8){
pswSpan.innerText = "请输入密码！";
return false;
}
}
//验证码
var code ;
function createCode(){
code = new Array();
var codeLength = 4;
var checkCode = document.getElementById("checkCode");
checkCode.value = "";
var selectChar = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');
for(var i=0;i<codeLength;i++) {
var charIndex = Math.floor(Math.random()*32);
code +=selectChar[charIndex];
}
checkCode.value = code;
}
function validate () {
var inputCode = document.getElementById("yzm").value.toUpperCase();
if(inputCode != code ){ alert("验证码错误！"); return false; }
else { alert("验证码正确！"); return true; }
}
</script>
</head>
<body onLoad="createCode();" style="background-repeat:no-repeat;background-color:#99CCFF;background-size:100% 100%;background-attachment:fixed;">
<h1><span style="background-color: #99FFCC;"><font color="white"><b>Welcome to my website！</b></font></span></h1>
<form action="LoginCheckServlet" method="post">
<table width="700" height="100%" align="center">
<tr>
<td>
<div align="center">
<table id="table2" border="1" cellpadding="5" cellspacing="0">
<h2><span style="background-color: #99FFCC"><font color="DarkSlateBlue" >会员登陆</font></span></h2>
<tr>
<td><b><label>用户账号：</label></b></td>
<td><input class = "input1" type="text" name="name" placeholder="请输入用户名" size="20"/>
<span id = "userNameSpan" class = "span1"></span></td>
</tr>
<tr>
<td><b><label>密码：</label></b></td>
<td><input class = "input1" type="password" name="pwd" placeholder="请输入密码" size="21"/>
<span id = "pswSpan" class = "span1"></span></td>
</tr>
<tr>
<td><b><label>验证码：</label></b></td>
<td><input type="text" id="yzm" size="7"/>
<input type="button" id="checkCode" onClick="createCode()" title="刷新验证码" style="width:70px;color:#F00;border:0;letter-spacing:1px;font-family:Arial;" /></td>
</tr>
<tr>
<td><input type="submit" value="提交" οnclick= "check();validate();"/></td>
<td><input type="reset" value="重置"/></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
- 运行截图（登录界面）：
- loginSuccess.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<style>
body{
background-color:lightyellow;
}
.w{
font-size:25px;
width: 680px;
height: 450px;
margin: 30px auto;
}
.t{
color:#C0C0C0;
padding: 15px;
}
</style>
<body>
<jsp:useBean id="user" type="dto.User" scope="request"/>
<div class="w">
<div class="t"><strong>恭喜<jsp:getProperty property="name" name="user"/>登陆成功！</strong></div>
</div>
</div>
</body>
</html>
- 运行截图（登陆成功界面）：
450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
