网站的登录功能,通常要进行两次请求响应,如下图所示。
蓝色对应第一次请求、响应,表示的是请求服务器得到登录页面。
红色对应第二次请求、响应,表示的是在登录页面上输入了账号、密码,点击登录按钮,将用户名、密码发送到后端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,实现对系统资源的访问,我们将在下一篇文章中,实现对权限的控制。