最近在完成一個基于SSH（struts+spring+hibernate）組合框架集成的J2EE商城項目
在完成登錄注冊時需要集成驗證碼功能，所以記下模塊化集成驗證碼的步驟：
1.創建一個畫布
2.設置一個畫筆
3.生成四個隨機的字母或數字
4.將四個字母或數字寫到圖片上.
5.將圖片輸出到瀏覽器.
*編寫一個Action類，生成驗證碼
創建一個CheckImgAction類
package cn.itcast.shop.user;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.util.Random;
import javax.imageio.ImageIO;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
/**
* 驗證碼程序
* @author 喻可偉
*
*/
public class CheckImgAction extends ActionSupport {
@Override
public String execute() throws Exception {
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));
String words = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890";
Random random = new Random();// 生成隨機數
// 定義StringBuffer
StringBuffer sb = new StringBuffer();
// 定義x坐標
int x = 10;
for (int i = 0; i < 4; 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;
// 生成一個隨機數字
int index = random.nextInt(words.length()); // 生成隨機數 0 到 length - 1
// 獲得字母數字
char c = words.charAt(index);
sb.append(c);
// 將c 輸出到圖片
graphics2d.rotate(theta, x, 20);
graphics2d.drawString(String.valueOf(c), x, 20);
graphics2d.rotate(-theta, x, 20);
x += 30;
}
// 將生成的字母存入到session中
ServletActionContext.getRequest().getSession()
.setAttribute("checkcode", sb.toString());
// 步驟五 繪制干擾線
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();// 釋放資源
ImageIO.write(bufferedImage, "jpg", ServletActionContext.getResponse()
.getOutputStream());
return NONE;
}
/**
* 取其某一范圍的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);
}
}
在struts.xml中配置
<!-- 配置驗證碼的Action -->
<action name="checkImg" class="checkImg"></action>
在applicationContext.xml中配置
<bean id="checkImg" class="cn.yiyuan.shop.user.CheckImgAction" scope="prototype"></bean>
在regist1.jsp中驗證碼圖片的位置
src="${pageContext.request.contextPath}/checkImg.action"
到這時驗證碼已經可以在頁面顯示了，并且刷新頁面可以刷新驗證碼的顯示，但是如果要實現點擊驗證碼圖片切換驗證碼效果需要再寫js進行切換
導入vuejs實現點擊切換驗證碼效果
導入vue.js與app.js，主要實現在app.js里
//register.jsp img驗證碼標簽
@click="change()"
var vm = new Vue({
el: '#app',
data: {
},
//在methods對象中定義方法
methods:{
change:function (){
//點擊切換驗證碼圖片
var img = document.getElementById("checkImg");
img.src = "${pageContext.request.contextPath}/checkImg.action?"+new Date().getTime();
}
}
})
此時已經可以通過點擊來修改驗證碼圖片了
實現點擊注冊按鈕提交驗證碼校驗
在UserAction中regist方法上進行校驗.
/**
* 前臺:注冊用戶的方法:
*/
@InputConfig(resultName="registInput")
public String regist(){
// 從session中獲得存的驗證碼
String checkcodeRegister = (String) ServletActionContext.getRequest().getSession().getAttribute("checkcode");
if(checkcode == null || !checkcode.equalsIgnoreCase(checkcodeRegister)){
this.addActionError("驗證碼錯誤!");
return "registInput";
}
userService.regist(user);
this.addActionMessage("注冊成功!請去郵箱激活!");
return "registSuccess";
}
當你完成這一步時，恭喜你可以模塊化集成驗證碼就已經完成了
