有声小说打包下载_Spring Boot+Ext JS 實(shí)現圖形驗證碼| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

Spring Boot+Ext JS 實(shí)現圖形驗證碼

## Spring Boot+Ext JS 實(shí)現圖形驗證碼
### 最終效果
![](/upload/picture/2022-10-10/upload_a38c139c2428ee94f4fad73aa869aafa.png)
為加強安全性，圖片中繪制一些干擾線(xiàn)
點(diǎn)擊驗證碼圖形時(shí)， 更新新的驗證碼
### 實(shí)現思路
包含數字的圖片在后端生成，這里通過(guò)Spring配置的Controller獲取
使用Ext JS定義一個(gè)包含驗證碼圖片的組件，該圖片通過(guò)使用后端地址獲取。
后端在生成數字圖片時(shí)，會(huì )將數字寫(xiě)入到Session中，以便與前端傳遞的驗證碼進(jìn)行比較， 如果相同，則驗證成功。
實(shí)現代碼
首先是生成后端的圖片。
后端代碼
控制器方法
```java
@RequestMapping(value = "/getGraphicVcode")	
public void getVerify(HttpServletRequest request, HttpServletResponse response) {				try {		
		response.setContentType("image/jpeg");// 設置相應類(lèi)型,告訴瀏覽器輸出的內容為圖片	
		response.setHeader("Pragma", "No-cache");// 設置響應頭信息，告訴瀏覽器不要緩存此內容
		response.setHeader("Cache-Control", "no-cache");	
		response.setDateHeader("Expire", 0);		
		GraphicVcodeUtil randomValidateCode = new GraphicVcodeUtil();	
		randomValidateCode.writeRandcode(request, response);// 輸出驗證碼圖片		
	} catch (Exception e) {			
		e.printStackTrace();	
	}	
}
```

### 圖形驗證碼生成器共用類(lèi)
```java
public class GraphicVcodeUtil {	
public static final String RANDOMCODEKEY = "RANDOMGRAPHICVCODE";// 放到session中的key	
private String randString = "0123456789";// 隨機產(chǎn)生驗證碼的字符集， 一般以數字為多	
private int width = 95;// 圖片寬	
private int height = 25;// 圖片高	
private int lineSize = 40;// 干擾線(xiàn)數量	
private int stringNum = 4;// 隨機產(chǎn)生字符數量	
private static final Logger logger = LoggerFactory.getLogger(GraphicVcodeUtil.class);	private Random random = new Random();	/**	 * 生成隨機圖片	 */	
public void writeRandcode(HttpServletRequest request, HttpServletResponse response) {		HttpSession session = request.getSession();		// BufferedImage類(lèi)是具有緩沖區的Image類(lèi),Image類(lèi)是用于描述圖像信息的類(lèi)		
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);		Graphics g = image.getGraphics();// 產(chǎn)生Image對象的Graphics對象,改對象可以在圖像上進(jìn)行各種繪制操作		
g.fillRect(0, 0, width, height);// 圖片大小		
g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));// 字體大小		
g.setColor(getRandColor(110, 133));// 字體顏色		// 繪制干擾線(xiàn)		
for (int i = 0; i <= lineSize; i++) {			
drowLine(g);	
}	// 繪制隨機字符	
String randomString = "";	
for (int i = 1; i <= stringNum; i++) {	
randomString = drowString(g, randomString, i);	
}	
logger.info(randomString);	// 將生成的隨機字符串保存到session中	
session.removeAttribute(RANDOMCODEKEY);		
session.setAttribute(RANDOMCODEKEY, randomString);		
g.dispose();	
try {		
// 將內存中的圖片通過(guò)流動(dòng)形式輸出到客戶(hù)端		
ImageIO.write(image, "JPEG", response.getOutputStream());	
} catch (Exception e) {		
logger.error("將內存中的圖片通過(guò)流動(dòng)形式輸出到客戶(hù)端失敗>>>> ", e);	
}	
}	
/**	 * 獲得字體	 */	
private Font getFont() {	
return new Font("Fixedsys", Font.CENTER_BASELINE, 18);
}	/**	 * 獲得顏色	 */	
private Color getRandColor(int fc, int bc) {	
if (fc > 255)	
fc = 255;		
if (bc > 255)	
bc = 255;	
int r = fc + random.nextInt(bc - fc - 16);	
int g = fc + random.nextInt(bc - fc - 14);	
int b = fc + random.nextInt(bc - fc - 18);	
return new Color(r, g, b);	}	
/**	 * 繪制字符串	 */	
private String drowString(Graphics g, String randomString, int i) {	
g.setFont(getFont());	
g.setColor(new Color(random.nextInt(101), random.nextInt(111), random.nextInt(121)));	
String rand = String.valueOf(getRandomString(random.nextInt(randString.length())));	
randomString += rand;	
g.translate(random.nextInt(3), random.nextInt(3));	
g.drawString(rand, 13 * i, 16);	
return randomString;	}	
/**	 * 繪制干擾線(xiàn)	 */	
private void drowLine(Graphics g) {		
int x = random.nextInt(width);	
int y = random.nextInt(height);
int xl = random.nextInt(13);
int yl = random.nextInt(15);	
g.drawLine(x, y, x + xl, y + yl);	}
/**	 * 獲取隨機的字符	 */	
public String getRandomString(int num) {	
return String.valueOf(randString.charAt(num));
}}
```

在瀏覽器中輸入 http://localhost:8080/tool/getGraphicVcode, 獲取圖片的效果如下：

接下來(lái)就是將后端的隨機圖片結合到Ext JS的組件中。
### Ext JS帶圖形驗證碼的組件類(lèi)
```javascript
Ext.define('ExtjsdevEncy.view.chp12.GraphicVcode', {
	extend: 'Ext.form.field.Text',  
	alias: 'widget.graphicvcode', 
	xtype:'graphicvcode', 
	isLoader:true,    
	emptyText : '請輸入驗證碼', 
	codeUrl: 'http://localhost:8080/tool/getGraphicVcode',   
	listeners:{       
	afterrender: function (thisField, eOpts ) {      
	this.codeEl = thisField.getEl().createChild({ tag: 'img', src: Ext.BLANK_IMAGE_URL});            this.codeEl.addCls('x-form-graphicvcode');   
	this.codeEl.on('click', this.loadCodeImg, this);      
	if (this.isLoader) this.loadCodeImg();     
	}   
	}, 
	alignErrorIcon: function() {    
	this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]);  
	},  
	loadCodeImg: function() {     
	this.codeEl.set({ src: this.codeUrl + '?id=' + Math.random() });   
}});
```

繼承 Ext.form.field.Text， 在afterrender事件，也就是組件渲染完成之后創(chuàng  )建一個(gè)圖片的標簽加在后面
通過(guò)codeUrl指定驗證碼圖片的地址， 在loadCodeImg 設置圖片地址的時(shí)候加上一個(gè)id= 隨機字串的目的是為了避免緩存， 每次都從服務(wù)器中獲取新的圖片。
以上需要的樣式設置：
```css
CheckCode{ 
float:left;
}
.x-form-graphicvcode{
width:73px;
height:20px;
vertical-align:middle;
cursor:pointer;
float:left; 
margin-left:7px;
}
```

完整的效果如本篇開(kāi)頭所示。

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

Spring Boot+Ext JS 實(shí)現圖形驗證碼

網(wǎng)站導航