驗證碼案例之Session補充
案例需求
- 訪問帶有驗證碼的登錄頁面login.jsp
- 用戶輸入用戶名，密碼以及驗證碼。
- 若用戶名和密碼輸入錯誤，則跳轉到登陸頁面，提示：用戶名或密碼錯誤
- 若驗證碼錯誤，則跳轉到登錄頁面，提示：驗證碼錯誤
- 若全部輸入正確，則跳轉到主頁home.jsp，顯示：用戶名，歡迎您
案例分析
代碼實現
- 編寫登陸頁面login.jsp
<%--
Created by IntelliJ IDEA.
User: sheng
Date: 2019/9/23
Time: 14:56
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Login</title>
<script>
window.onload = function () {
document.getElementById("checkCode").onclick = function () {
this.src="/checkCode/checkCodeServlet?time=" + new Date().getTime();
}
}
</script>
</head>
<body>
<form action="/checkCode/loginServlet" method="post">
<table>
<tr>
<td>用戶名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>驗證碼</td>
<td><input type="text" name="checkCode"></td>
</tr>
<tr>
<td colspan="2"><img id="checkCode" src="/checkCode/checkCodeServlet"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="登錄"></td>
</tr>
</table>
</form>
</body>
</html>
登陸頁面效果圖
2. 登錄mysql數據庫，創建數據庫checkCode，創建user表，並插入兩條數據；導入druid連接池文件以及相應的jar包
創建數據庫的代碼爲：
CREATE DATABASE checkCode;
CREATE TABLE USER(
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(16) UNIQUE NOT NULL,
PASSWORD VARCHAR(16) NOT NULL
);
SHOW USER;
INSERT INTO USER (username,PASSWORD) VALUES ("zhangsan","123");
INSERT INTO USER (username,PASSWORD) VALUES ("lisi","121");
- 編寫User類，實體化表格
package domain;
/**
* 實體化User表
*/
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;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
}
- 編寫UserDao類，用來操作數據庫
package dao;
import domain.User;
import org.springframework.dao.DataAccessException;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import utils.JDBCUtils;
/**
* 操作數據庫user的類
*/
public class UserDao {
// 聲明JDBCTemplate對象
private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSourse());
/**
* 判斷所登錄的用戶是否存在的類
* @param loginUser 包含登錄用戶的用戶名及密碼信息
* @return user 若該用戶存在，則返回該用戶的所有信息，若不存在，則返回null
*/
public User login(User loginUser){
String sql = "select * from user where username = ? && password = ?";
try {
User user = template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class),
loginUser.getUsername(), loginUser.getPassword());
return user;
} catch (DataAccessException e) {
// e.printStackTrace();
System.out.println("登陸用戶不存在");
return null;
}
}
}
- 導入JDBCUtils工具類的jar包，編寫JDBCUtils類，使用druid連接池
package utils;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.SQLException;
import java.util.Properties;
/**
* JDBC工具類，使用druid連接池
* 工具類，所有方法或者變量一般均採用靜態的
*/
public class JDBCUtils {
private static DataSource ds;
//完成數據庫的連接
static{
try {
// 1.加載druid配置文件
Properties pro = new Properties();
InputStream is = JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties");
pro.load(is);
// 2.初始化連接池對象
ds = DruidDataSourceFactory.createDataSource(pro);
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
// 獲取連接池對象
public static DataSource getDataSourse(){
return ds;
}
// 獲取連接對象
public static Connection getConnection() throws SQLException {
return ds.getConnection();
}
}
- 編寫Servlet
- 編寫CheckCodeServlet，生成圖片驗證碼顯示到頁面上，並將驗證碼保存在服務器中，可採用Session的方式保存
package servlet;
import javax.imageio.ImageIO;
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 javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
/**
* 創建一個包含隨機內容的驗證碼
* 並通過response輸出該圖片
*/
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//設置驗證碼的長和寬
int width = 120;
int height = 60;
//1.創建一個對象，在內存中生成一個圖片對象
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//2.美化圖片
//2.1填充背景色
Graphics g = image.getGraphics();//畫筆對象
g.setColor(Color.PINK);//設置畫筆顏色
g.fillRect(0,0,width,height);
//2.2設置邊框色
g.setColor(Color.BLUE);
g.drawRect(0,0,width - 1, height - 1);
//2.3添加隨機字符
String str = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
Random rad = new Random();
// 記錄生成的驗證碼
StringBuffer sb = new StringBuffer();
for (int i = 1; i <= 4; i++) {
int index = rad.nextInt(str.length());
char ch = str.charAt(index);
sb.append(ch);
g.drawString(ch+"", width/5*i, height/2);
}
// 將生成的驗證碼保存在Session中
String checkCode_session = sb.toString();
HttpSession session = request.getSession();
session.setAttribute("checkCode_session", checkCode_session);
//2.4添加橫線干擾
g.setColor(Color.GREEN);
for (int i = 0; i < 10; i++) {
int x1 = rad.nextInt(width);
int y1 = rad.nextInt(height);
int x2 = rad.nextInt(width);
int y2 = rad.nextInt(height);
g.drawLine(x1,y1,x2,y2);
}
//3.輸出圖片
ImageIO.write(image, "jpg", response.getOutputStream());
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
- 編寫LoginServlet，管理登陸頁面相關邏輯
package servlet;
import dao.UserDao;
import domain.User;
import org.apache.commons.beanutils.BeanUtils;
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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;
/**
* 管理登錄服務
*/
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1.設置request編碼格式
request.setCharacterEncoding("utf-8");
// 2.獲取登陸頁面的所有請求參數
Map<String, String[]> map = request.getParameterMap();
// 獲取系統生成的驗證碼
HttpSession session = request.getSession();
String checkCode_session = (String)session.getAttribute("checkCode_session");
System.out.println(checkCode_session);
// 3.獲取用戶輸入的驗證碼
String[] checkCodes = map.get("checkCode");
String checkCode = checkCodes[0];
System.out.println(checkCode);
// 移除request域中的驗證碼數據，使驗證碼只能一次性使用
session.removeAttribute("checkCode_session");
// 5.判斷輸入的驗證碼是否正確
if (checkCode_session != null && checkCode_session.equalsIgnoreCase(checkCode)){ //驗證碼輸入正確
System.out.println("驗證碼輸入正確");
// 4.封裝User對象
User loginUser = new User();
try {
BeanUtils.populate(loginUser, map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
// 調用UseDao中的login方法，判斷用戶是否正確
UserDao dao = new UserDao();
User user = dao.login(loginUser);
// 判斷是否登陸成功
if (user == null){ //登陸失敗
System.out.println("登陸失敗");
request.setAttribute("login_error", "用戶名或密碼錯誤");
// 轉發到登陸頁面
request.getRequestDispatcher("/login.jsp").forward(request,response);
}else{ //登陸成功
System.out.println("登陸成功");
// 存儲用戶信息
// request.setAttribute("user", user.getUsername());
// // 轉發到登陸頁面
// request.getRequestDispatcher("/home.jsp").forward(request,response);
session.setAttribute("user", user.getUsername());
// 重定向到登陸頁面
response.sendRedirect(request.getContextPath() + "/home.jsp");
}
}else{ //驗證碼輸入不正確
System.out.println("驗證碼輸入錯誤");
request.setAttribute("cc_error", "驗證碼輸入錯誤");
// 轉發到登陸頁面
request.getRequestDispatcher("/login.jsp").forward(request,response);
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
關於轉發，重定向與Session使用的區別
- 轉發 forward ：
是一次請求；客戶端向服務器發送一次請求request，服務器可將此次請求轉發給服務器內的其他資源（Servlet），
同時可以在本次請求上添加數據。所以在本次案例中，頁面的跳轉首先可考慮採用轉發的方式向登陸頁面login.jsp或者主頁home.jsp發送數據。
轉發的原理圖：![轉發的原理]()
- 重定向 redirect :
是兩次請求；客戶端向服務器發送一次請求request，服務器告知瀏覽器去訪問其他的服務資源路徑。
需注意，這裏是兩個不同的請求，所以不能使用request共享數據。 - Session：
將數據保存在服務器端的對象中；數據位於服務器端，所有服務端的資源Servlet均可以訪問Session。
Session的原理圖：![Session的原理]()
案例中forward，redirect，Session的使用分析
- 生成的驗證碼：本次案例產生驗證碼是通過CheckCodeServlet產生的，而在LoginServlet中需要使用到驗證碼信息，
根據以上區別分析可知，需要CheckCodeServlet將驗證碼信息存儲在服務端的Session中，然後LoginServlet便可正常訪問了 - 頁面的跳轉
首先從LoginServlet跳轉到其他頁面，首先可認爲是服務器一個資源訪問另一個資源；即可以將提示信息存儲到request域中，
通過另一個資源訪問該數據所以頁面的跳轉可以採用轉發的方式- 跳轉到login.jsp頁面，提示錯誤信息
在login.jsp頁面上可以設置兩個輸出，將錯誤信息分別打印出來。而且直觀上看起來，是login.jsp頁面的直接輸出，
訪問路徑也沒有更改，所以可以採用轉發的方式來實現 - 跳轉到home.jsp主頁，提示登錄成功信息
在到主頁的跳轉也可以採取這種轉發的方式，但是直觀上來看，我們是從login.jsp頁面跳轉到了home.jsp主頁。
實際上客戶端看上去資源的路徑發生了變化，所以我們應該也讓資源路徑發生改變，也即不使用這種方式，而是使用重定向的方式。
而使用重定向不能共享數據了，所以我們可以將數據存在Session中來實現。
本次案例的訪問實現如圖所示
登陸案例的訪問示例：![登陸案例的訪問示例]()
- 跳轉到login.jsp頁面，提示錯誤信息
