引言
最近博客停更了一段時間，我發現堅持每天寫博客真的是一件很累人的事情，尤其是在技術還沒學到家的情況下每天寫上這麼一兩千字的博客再加上又沒有太多自身對技術的理解，面對這麼一張白板有時顯得有些蒼白。但是作爲一個正在努力中的小黑貓最近看到之前整理的兩篇文章竟然也有了將近1000的訪問量內心難免還是有些歡喜，也激發了我重新拾起博客的熱情和動力。上一次寫博客時纔剛接觸Java，在這段時間中，也基本學完了JavaSE部分(當然，只是很粗淺的學完)，對前端技術HTML,CSS,JavaScript以及MySQL數據庫部分也有了一定的接觸，最近在學習Web後端服務器相關的知識，今天想在博客裏就自己學習到的Servlet技術實現驗證碼的隨機生成及驗證登錄這個問題進行一個記錄，這裏貼出來的源碼都是得到實際驗證可以運行的，有些地方注意改一下路徑就行。
運行結果展示
首先我先放一波這個程序的運行結果:
驗證界面:
每一次的頁面刷新(訪問)都會發送一個Servlet請求到後臺程序，後臺隨機返回一個驗證碼圖片，此外，由於頁面中JavaScript程序產生的效果單機驗證碼圖片也會實現驗證碼圖片更新。
驗證結果:
驗證碼匹配正確：
驗證碼匹配錯誤:
驗證失敗之後由於我在程序中設置了重定向，所以三秒後會自動跳轉回到驗證界面。當然，返回的界面由於僅僅使用了 response的write方法所以有點醜，隨着以後的學習可以利用jsp製作完動態網頁將其返回，在此只是一個小demo作爲程序邏輯的驗證。
工程目錄介紹
其中，我的工程項目名稱爲26-Servlet,由於之前寫過的一些文件也放在這個工程中，所以我用矩形框作了一個標識，這個項目用到的一個包就是com.sjq.code,其中的兩個java文件一個用於後臺服務器返回驗證碼圖片(CheckCodeServlet.java)，一個用來對輸入的內容進行驗證(RegistServlet.java)。需要注意的是，這兩個文件都不是普通的java類文件，而是Servlet文件，在創建的時候需要注意。
在WEB-INF下，有一個專門用於存放一條條成語數據的txt文件(new_words.txt)，當然該文件可以放在任意位置，只要在程序中注意路徑問題即可，該文件還有一個非常重要且容易忽視注意點就是在用記事本保存的時候一定要用UTF-8進行保存，否則程序在讀取的時候可能會出現中文亂碼問題。
code.html文件是驗證界面，我用css對錶單內容簡單進行了佈局修飾，當然，直男審美還望見諒。
以上用紅色標註的就是大概就是用到的所有工程或者文件名稱，可適當對其進行修改
項目源代碼
code.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java隨機生成驗證碼圖片 --敲代碼的小黑貓</title>
<style>
*{
padding: 0;
margin: 0;
}
h3{
text-align: center;
font-size: 20px;
color: blue;
font-family: 楷體;
margin-bottom: 20px;
margin-top: 50px;
}
form{
width: 500px;
height: 500px;
display: block;
margin: 0 auto;
}
form .code{
width: 410px;
height: 30px;
margin-bottom: 10px;
margin-left: 50px;
}
form .code input{
width: 280px;
height: 29px;
display: block;
border: 1px solid #666666;
float: left;
}
form .code img{
width: 120px;
height: 30px;
display: block;
float: left;
}
form .submit{
width: 200px;
height: 40px;
margin-left: 150px;
}
form .submit input{
width: 200px;
height: 40px;
background-color: orangered;
color: white;
font-size: 18px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h3>歡迎來到棋哥servlet驗證碼驗證界面</h3>
<form action="http://localhost:8090/26-Servlet/RegistServlet">
<div class="code">
<input type="text" placeholder="請輸入驗證碼..." name="code">
<img src="/26-Servlet/CheckCodeServlet" alt="驗證碼失效" onclick="changeCode(this)">
</div>
<div class="submit">
<input type="submit" value="提交驗證碼">
</div>
</form>
<script type="text/javascript">
function changeCode(obj){
obj.src = "/26-Servlet/CheckCodeServlet?time="+new Date().getTime();
}
</script>
</body>
</html>
CheckCodeServlet
package com.sjq.code;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
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;
@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
// 集合中保存所有成語
private List<String> words = new ArrayList<String>();
@Override
public void init() throws ServletException {
// 初始化階段，讀取new_words.txt
// web工程中讀取 文件,必須使用絕對磁盤路徑
String path = getServletContext().getRealPath("/WEB-INF/new_words.txt");
try {
BufferedReader reader = new BufferedReader(new FileReader(path));
String line;
//把讀的成語全部添加到一個集合當中
while ((line = reader.readLine()) != null) {
words.add(line);
}
reader.close();
} catch (IOException e) {
e.printStackTrace();
}
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 禁止緩存
response.setHeader("Cache-Control", "no-cache");
//設置過期時間爲立即過期
response.setDateHeader("Expires", 0);
int width = 120;
int height = 30;
// 步驟一 繪製一張內存中圖片
BufferedImage bufferedImage = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
// 步驟二 圖片繪製背景顏色 ---通過繪圖對象
Graphics graphics = bufferedImage.getGraphics();// 得到畫圖對象 --- 畫筆
// 繪製任何圖形之前 都必須指定一個顏色
graphics.setColor(getRandColor(200, 250));
graphics.fillRect(0, 0, width, height);
// 步驟三 繪製邊框
graphics.setColor(Color.WHITE);
graphics.drawRect(0, 0, width - 1, height - 1);
// 步驟四 四個隨機數字
Graphics2D graphics2d = (Graphics2D) graphics;
// 設置輸出字體
graphics2d.setFont(new Font("楷體", Font.BOLD, 18));
Random random = new Random();// 生成隨機數
int index = random.nextInt(words.size());
String word = words.get(index);// 獲得成語
System.out.println(word);
// 定義x座標
int x = 10;
for (int i = 0; i < word.length(); i++) {
// 隨機顏色
graphics2d.setColor(new Color(20 + random.nextInt(110), 20 + random
.nextInt(110), 20 + random.nextInt(110)));
// 旋轉 -30 --- 30度
int jiaodu = random.nextInt(60) - 30;
// 換算弧度
double theta = jiaodu * Math.PI / 180;
// 獲得字母數字
char c = word.charAt(i);
// 將c 輸出到圖片
graphics2d.rotate(theta, x, 20);
graphics2d.drawString(String.valueOf(c), x, 20);
graphics2d.rotate(-theta, x, 20);
x += 30;
}
// 將驗證碼內容保存session
//request.getSession().setAttribute("checkcode_session", word);
//把生成的驗證碼存放到全局域對象當中
this.getServletContext().setAttribute("checkCode", word);
// 步驟五 繪製干擾線
graphics.setColor(getRandColor(160, 200));
int x1;
int x2;
int y1;
int y2;
for (int i = 0; i < 30; i++) {
x1 = random.nextInt(width);
x2 = random.nextInt(12);
y1 = random.nextInt(height);
y2 = random.nextInt(12);
graphics.drawLine(x1, y1, x1 + x2, x2 + y2);
}
// 將上面圖片輸出到瀏覽器 ImageIO
graphics.dispose();// 釋放資源
//將圖片寫到response.getOutputStream()中
ImageIO.write(bufferedImage, "jpg", response.getOutputStream());
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
/**
* 取其某一範圍的color
*
* @param fc
* int 範圍參數1
* @param bc
* int 範圍參數2
* @return Color
*/
private Color getRandColor(int fc, int bc) {
// 取其隨機顏色
Random random = new Random();
if (fc > 255) {
fc = 255;
}
if (bc > 255) {
bc = 255;
}
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
}
RegistServlet
package com.sjq.code;
import java.io.IOException;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class RegistServlet
*/
@WebServlet("/RegistServlet")
public class RegistServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//解決響應信息的中文亂碼問題
response.setHeader("Content-Type", "text/html;charset=UTF-8");
//獲取接收請求參數
String code = request.getParameter("code");
System.out.println(code);
//如果出現中文亂碼可以設置編碼，由於沒有出現中文亂碼，所以此段註釋
//byte[] bytes = code.getBytes("ISO8859-1");
//code = new String(bytes,"UTF-8");
//取出存放的word
Object word = this.getServletContext().getAttribute("checkCode");
//將輸入的code值和隨機生成的word值進行字符串對比
if(code.equals(word)) {
response.getWriter().write("驗證成功!");
}else {
response.getWriter().write("驗證失敗...");
//重定向，隔三秒重新跳轉到原來的界面
response.setHeader("refresh", "3;url=/26-Servlet/code.html");
}
}
}
尾言
上面的幾段代碼皆親測可用，個人認爲只要大概能夠理解上面的部分代碼，熟悉其執行流程及思路即可。寫在博客裏的另一個目的也是爲了滿足自己的私心那就是保存起來方便日後在使用時直接對該代碼進行復制調用，只需修改一些文件名，路徑即可。若此文章能有幸被一些需要幫助的讀者瀏覽到，關於此代碼遇到的任何問題或是求取資源等等可加QQ 2569678842進行技術探討。本人也在學習階段，願意與所有投機的小夥伴一同在前進的路上一路高歌猛進。