General idea, simply speaking, is the background to generate pictures at the same time to save the picture information in the session, the front-end display pictures, enter the verification code information after submitting the form to the background, remove the verification code stored in the session information, and the form submitted verification code information check.
When you click on the captcha image, re-request the background code image method via jquery to change the image.
First, in the backend controller, there is a method:
The path is http://localhost:8888/RiXiang_blog/login/captcha.form, and access to the path allows you to write the picture through response.
@RequestMapping (value = "/captcha", method = requestmethod.get) @ResponseBody public void Captcha (httpservletrequest request, httpservletresponse response) throws Servletexception, IOException { Captchautil.outputcaptcha (request, response); }
Captchautil is a tool class that encapsulates the generation of CAPTCHA images, and stores session functions.
The code is as follows:
PackageCom.util;ImportJava.awt.Color;ImportJava.awt.Font;ImportJava.awt.Graphics2D;ImportJava.awt.image.BufferedImage;Importjava.io.IOException;ImportJava.util.Random;Importjavax.servlet.ServletException;ImportJavax.servlet.ServletOutputStream;Importjavax.servlet.http.HttpServletRequest;ImportJavax.servlet.http.HttpServletResponse;ImportCom.sun.image.codec.jpeg.JPEGCodec;ImportCom.sun.image.codec.jpeg.JPEGImageEncoder;/*** @ClassName: Captchautil * @Description: Tool class for verification code *@authornameless * @date 2016-5-7 a.m. 8:33:08 *@version1.0*/ Public Final classcaptchautil{PrivateCaptchautil () {}/** Random character dictionary*/ Private Static Final Char[] CHARS = {' 2 ', ' 3 ', ' 4 ', ' 5 ', ' 6 ', ' 7 ', ' 8 ', ' 9 ', ' A ', ' B ', ' C ', ' D ', ' E ', ' F ', ' G ', ' H ', ' J ', ' K ', ' L ', ' M ', ' N ', ' P ', ' Q ', ' R ', ' S ', ' T ', ' U ', ' V ', ' W ', ' X ', ' Y ', ' Z ' }; /** Random number*/ Private StaticRandom random =NewRandom (); /** Get 6-bit random numbers*/ Private StaticString getrandomstring () {StringBuffer buffer=NewStringBuffer (); for(inti = 0; I < 6; i++) {buffer.append (Chars[random.nextint (chars.length))); } returnbuffer.tostring (); } /** Get random number color*/ Private StaticColor Getrandomcolor () {return NewColor (Random.nextint (255), Random.nextint (255), Random.nextint (255)); } /** Returns the inverse color of a color*/ Private StaticColor Getreversecolor (color c) {return NewColor (255-c.getred (), 255-C.getgreen (),255-C.getblue ()); } Public Static voidOutputcaptcha (httpservletrequest request, httpservletresponse response)throwsservletexception, IOException {response.setcontenttype ("Image/jpeg"); String RandomString=getrandomstring (); Request.getsession (true). SetAttribute ("RandomString", RandomString); intwidth = 100; intHeight = 30; Color Color=Getrandomcolor (); Color Reverse=getreversecolor (color); BufferedImage Bi=Newbufferedimage (width, height, bufferedimage.type_int_rgb); Graphics2D g=Bi.creategraphics (); G.setfont (NewFont (Font.sans_serif, Font.Bold, 16)); G.setcolor (color); G.fillrect (0, 0, width, height); G.setcolor (reverse); g.DrawString (RandomString,18, 20); for(inti = 0, n = random.nextint (100); I < n; i++) {G.drawrect (Random.nextint (width), random.nextint (height),1, 1); } //turn into JPEG formatServletoutputstream out =Response.getoutputstream (); JPEGImageEncoder Encoder=Jpegcodec.createjpegencoder (out); Encoder.encode (BI); Out.flush (); }}
The front end gets the captcha picture, to write this:
......
<tr>
<th>captcha</th>
<td>
<input type= "text" id= "Captcha" name= "Captcha" class= "text" maxlength= "ten"/>
</td>
</tr>
IMG Writes the path in SRC, and when the page loads it accesses the http://localhost:8888/RiXiang_blog/login/captcha.form to get the picture.
Verification of the form's submission and login information is not specific.
Click the JS code to replace the verification code as follows:
// Replacement Verification Code $ (' #captchaImage '). Click (function() { $ (' #captchaImage '). attr ("src", "Captcha.form?"). timestamp= "+ (new Date ()). ValueOf ());
You can see that the timestamp is added later as a parameter, timestamp= "+ (new Date ()). ValueOf (). Adding this parameter will allow you to revisit the back-end method. Otherwise, the image cannot be refreshed.
Implement login verification code function under SPRINGMVC