完整的驗證及訊息提示
阿新 • • 發佈：2018-11-01
首先我們要先建立一個生成圖片的類，並且儲存使用者所需要輸入的驗證碼字串，其次就是把生成的圖片放到網頁中。
看目錄結構
先了解如何生成圖片VerfiCode.java
package Dao;
import javax.imageio.ImageIO;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
/**
* Created by online on 15-9-17.
*/ - 其次瞭解生成的圖片是如何放到頁面中的Verfi.java
package action;
import Dao.VerfiCode;
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 java.awt.image.BufferedImage;
import java.io.IOException;
/**
* Created by online on 15-9-17.
*/
@WebServlet(urlPatterns = "/verfi",name = "ver")
public class Verfi extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
/**
* 使用驗證碼 防止暴力登入。無限訪問 導致伺服器癱瘓
*/
VerfiCode ver = new VerfiCode();
BufferedImage bi = ver.getImage();//得到驗證碼這張圖片
req.getSession().setAttribute("verfi",ver.getText());//session儲存字串供驗證，只有使用者輸入的驗證碼和這個匹配才能成功登入。
VerfiCode.output(bi,resp.getOutputStream());//寫入到頁面中
}
}
- 由於登入和註冊的驗證碼要分別進行驗證不同步，所以有Verfi1.java
package action;
import Dao.VerfiCode;
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 java.awt.image.BufferedImage;
import java.io.IOException;
/**
* Created by online on 15-9-17.
*/
@WebServlet(urlPatterns = "/verfi1",name = "ver1")
public class Verfi1 extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
/**
* 使用驗證碼 防止暴力登入。無限訪問 導致伺服器癱瘓
*/
VerfiCode ver = new VerfiCode();
BufferedImage bi = ver.getImage();//得到驗證碼這張圖片
req.getSession().setAttribute("verfi1",ver.getText());//session儲存字串供驗證，只有使用者輸入的驗證碼和這個匹配才能成功登入。
VerfiCode.output(bi,resp.getOutputStream());//寫入到頁面中
}
}
- 寫入到頁面中 index.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>主介面</title>
<%--新加入的程式碼--%>
<script>
function _change(){
/*
1.得到img元素
2.修改其src為/verfi
*/
var imgEle=document.getElementById("img");
imgEle.src ="/verfi?a="+new Date().getTime();//保證圖片不重名，所以加上時間命名
}
function _change1(){
/*
1.得到img元素
2.修改其src為/verfi
*/
var imgEle=document.getElementById("img1");
imgEle.src ="/verfi?a="+new Date().getTime();//保證圖片不重名，所以加上時間命名
}
</script>
<%--新加入的程式碼--%>
</head>
<body>
<form name="regist" action="/regist" method="post">
使用者名稱：<input type="text" name="username"/>
密碼：<input type="password" name="password"/>
驗證碼：<input type="text" name="ver"/>
<input type="submit" value="註冊"/>
</form>
<img id="img" src="/verfi" alt="驗證碼"/>
<a href="javascript:_change()">換一張</a>
<form name="login" action="/login" method="post">
使用者名稱：<input type="text" name="username" />
密碼：<input type="password" name="password" />
驗證碼：<input type="text" name="ver1"/>
<input type="submit" value="登入"/>
</form>
<img id="img1" src="/verfi1" alt="驗證碼"/>
<a href="javascript:_change1()">換一張</a>
<%--js指令碼，每一次點選這個連結，即進行該圖片的重新整理--%>
</body>
</html>
- 驗證碼圖片和輸入驗證碼的文字框都有了，而我們要得是圖片上的內容和輸入的內容一致時才允許登入或註冊。所以我們要在Servlet中獲取使用者輸入的資訊並和生成圖片時儲存的文字進行對比。
- 首先看登入的servlet，由於程式碼只是部分修改，所以我把修改的部分用註釋‘這’進行標註 Homework.java
package action;
import Dao.AddandSelect;
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.sql.SQLException;
/**
* Created by online on 15-9-11.
*/
@WebServlet(urlPatterns = "/login" ,name = "stuLogin")
public class Homework extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//System.out.println(req.getParameter("username"));//req.getParameter();這個方法就是獲取jsp頁面form表單傳送過來的資料。
//System.out.println(req.getParameter("password"));//這裡執行並在頁面輸入後提交 則會在控制檯看到輸入內容。
req.setCharacterEncoding("utf-8");//這
HttpSession session = req.getSession();//建立session物件
String username= (String) req.getParameter("username");
String password= (String) req.getParameter("password");
String verfi1= (String) req.getParameter("ver1");//這
session.setAttribute("username",username);//這
try {
if (AddandSelect.valiuandp(username,password)){//驗證是否匹配到資訊匹配到就進入到success.jsp,不匹配就返回登入介面。
if (verfi1.equalsIgnoreCase((String) req.getSession().getAttribute("verfi1"))){//這，驗證驗證碼是否正確
req.getRequestDispatcher("/success.jsp").forward(req,resp);
}else {
req.setAttribute("cuo","驗證碼錯誤");//設定錯誤提示資訊，在index.jsp加入java程式碼，若req.getParameter("cuo")不為空，即顯示在頁面中。
req.getRequestDispatcher("/index.jsp").forward(req,resp);//跳轉到登入頁面
}//到這
}else {
req.setAttribute("cuo","使用者名稱或密碼錯誤");
req.getRequestDispatcher("/index.jsp").forward(req,resp);
}
} catch (SQLException e) {
e.printStackTrace();
}
}
}
- 同理Regist.java，由於註冊沒有頁面的跳轉，無論對與錯都是返回到index.jsp，所以只要加入兩個程式碼塊就行。
String verfi= (String) req.getParameter("ver");
if (!verfi.equalsIgnoreCase((String)req.getSession()
.getAttribute("verfi")))
req.setAttribute("cuo","驗證碼錯誤");
至於加到何處，看需求，自行加入。
到這裡算是加入了大部分驗證，但是還需要有非空輸入驗證和註冊不允許重使用者名稱驗證。
其實說到底，javaee的起步是jsp頁面->servlet->業務邏輯類的處理->servlet->jsp。 在這個簡單的專案中就是index.jsp->Homework.java->AddandSelect.java->Homework.java->index.jsp。
其餘的功能等等都是一些換湯不換藥的問題
由於javaee想要做更快捷和更輕量（功能多程式碼少速度快）的專案還是需要學會使用框架
這個專案我只做了登入和註冊，後面等功能所運用的知識也大致一樣
專案原始碼https://github.com/pckonline/homework_jsp思路可以參考該原始碼