Java Web实战详细教程(十九)登录功能

        网站的登录功能,通常要进行两次请求响应,如下图所示。
在这里插入图片描述
        蓝色对应第一次请求、响应,表示的是请求服务器得到登录页面。
        红色对应第二次请求、响应,表示的是在登录页面上输入了账号、密码,点击登录按钮,将用户名、密码发送到后端Java程序,JAVA程序通过JDBC访问数据库进行查询。

        下面进行具体开发:

首先,完成发起请求返回登录页面的功能:

1.在数据库中开发user表,并添加上测试数据,如下图所示:
在这里插入图片描述

2.Java项目中规划好User、UserController、UserDao类,和login.jsp:
在这里插入图片描述

3.实体类非常简单,属性和数据表user一一对应即可。

package entity;

public class User {
    
    
	private int id;
	private String username;
	private String password;

	public int getId() {
    
    
		return id;
	}

	public void setId(int id) {
    
    
		this.id = id;
	}

	public String getUsername() {
    
    
		return username;
	}

	public void setUsername(String username) {
    
    
		this.username = username;
	}

	public String getPassword() {
    
    
		return password;
	}

	public void setPassword(String password) {
    
    
		this.password = password;
	}

}

4.控制器类,需要设计一个type属性,通过取值showLogin、doLogin决定是展示登录页面和是进行登录处理。

@WebServlet("/user")
public class UserController extends HttpServlet {
    
    
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
    
    
		String type = request.getParameter("type");
		if (type.equals("showLogin")) {
    
    
			showLogin(request, response);
		} else if (type.equals("doLogin")) {
    
    
			doLogin(request, response);
		}
	}
	//略
}
private void showLogin(HttpServletRequest request, HttpServletResponse response) {
    
    
	try {
    
    
		request.getRequestDispatcher("WEB-INF/login.jsp").forward(request, response);
	} catch (ServletException e) {
    
    
		// TODO Auto-generated catch block
		e.printStackTrace();
	} catch (IOException e) {
    
    
		// TODO Auto-generated catch block
		e.printStackTrace();
	}

}

5.login.jsp:

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page import="java.util.*,entity.*"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<style>
#main {
      
      
	width: 600px;
	margin: 120px auto;
}

#mes {
      
      
	color: red;
	text-align: center;
	margin-bottom: 20px;
}
</style>
</head>
<body>

	<div id="main">
		<div id="mes">
			<%
				String mes = (String) request.getAttribute("mes");
				if (mes == null) {
					mes = "";

				}
				out.print(mes);
			%>
		</div>
		<form class="form-horizontal" action="user">
			<input type="hidden" name="type" value="doLogin" />
			<div class="form-group">
				<label class="col-sm-2 control-label">账号</label>
				<div class="col-sm-10">
					<input type="text" class="form-control" placeholder="请输入账号"
						name="username">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">密码</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" placeholder="请输入密码"
						name="password">
				</div>
			</div>

			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-primary">登录</button>
				</div>
			</div>
		</form>

	</div>
</body>
</html>


6.测试:
访问user?type=showLogin,可返回如下界面:
在这里插入图片描述

其次,完成登录验证功能:

1.UserController中添加doLogin方法:

private void doLogin(HttpServletRequest request, HttpServletResponse response)
		throws IOException, ServletException {
    
    

	String username = request.getParameter("username");
	String password = request.getParameter("password");
	User user = new User();
	user.setUsername(username);
	user.setPassword(password);
	UserDao userDao = new UserDao();
	User u = userDao.search(user);
	if (u != null) {
    
    
		response.sendRedirect("stu");
	} else {
    
    
		request.setAttribute("mes", "用户名或密码不正确");
		request.getRequestDispatcher("WEB-INF/login.jsp").forward(request, response);
	}
}

2.UserDao中添加search方法:

public User search(User user) {
    
    
		User u = null;

		// 1.导入jar包到lib文件夹下
		try {
    
    
			// 2.加载驱动
			Class.forName("com.mysql.jdbc.Driver");
			// 3.建立连接
			Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/school_qgc_1", "root", "123456");
			// 4.建立SQL执行器
			Statement stat = conn.createStatement();
			// 5.执行sql语句,得到结果集
			ResultSet rs = stat.executeQuery("select * from user where username='" + user.getUsername()
					+ "' and password='" + user.getPassword() + "'");
			// 6.处理结果集
			while (rs.next()) {
    
    
				u = new User();
				u.setId(rs.getInt("id"));
				u.setUsername("username");

			}
			// 7.关闭连接
			conn.close();
		} catch (ClassNotFoundException e) {
    
    
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (SQLException e) {
    
    
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return u;
	}

3.登录失败目前效果是转发回登录页面,并在页面上使用红字做提示:
在这里插入图片描述
4.可以使用jQuery做优化,实现当在账号文本框中键入文字时候,触发提示信息消失,增强用户体验度:

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
	$(document).ready(function() {
      
      
		$("[name='username']").keyup(function(){
      
      	
			$("#mes").text("");
		})
	})
</script>

        目前仅仅是完成了登录功能,尚未对其进行权限验证,即系统仍可以通过直接访问stu,实现对系统资源的访问,我们将在下一篇文章中,实现对权限的控制。

おすすめ

転載: blog.csdn.net/GodBlessYouAndMe/article/details/121742242