1、老系统结构：jsp，servlet，jdk1.6，中途又加过一次spring security做登录验证
结果图：
2、生成验证码validateCode.jsp，产生的验证码存session，用于后端检验。这里生成验证码的逻辑改成java，有登录安全检验的要在Filter中排除这个生成验证码的url
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ page import="java.util.Random"%><%@ page import="java.io.OutputStream"%><%@ page import="java.awt.Color"%><%@ page import="java.awt.Font"%><%@ page import="java.awt.Graphics"%><%@ page import="java.awt.image.BufferedImage"%><%@ page import="javax.imageio.ImageIO"%><%//设置页面不缓存response.setHeader("Pragma","no-cache");response.setHeader("Cache-Control","no-catch");response.setDateHeader("Expires",0);int width = 80;int height = 32;//create the imageBufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);Graphics g = image.getGraphics();// set the background colorg.setColor(new Color(0xDCDCDC));g.fillRect(0, 0, width, height);// draw the borderg.setColor(Color.black);g.drawRect(0, 0, width - 1, height - 1);// create a random instance to generate the codesRandom rdm = new Random();StringBuilder builder = new StringBuilder();String str = "123456789qwertyuiopasdfghjklzxcvbnm";for (int i=0; i<4; i++) {int pos = rdm.nextInt(str.length());builder.append(str.substring(pos,pos+1));}// make some confusionfor (int i = 0; i < 50; i++) {int x = rdm.nextInt(width);int y = rdm.nextInt(height);g.drawOval(x, y, 0, 0);}String capstr = builder.toString();// 将验证码放入request.sessionsession.setAttribute("genValCode", capstr);g.setColor(new Color(0, 100, 0));g.setFont(new Font("Candara", Font.BOLD, 24));g.drawString(capstr, 8, 24);g.dispose();response.setContentType("image/jpeg");out.clear();out = pageContext.pushBody();OutputStream strm = response.getOutputStream();ImageIO.write(image, "jpeg", strm);strm.close();%>
登录页面加验证码div
<div class="validate-div"><input type="text" placeholder="验证码" class="validatecode" name="validate_code" id="validate_codeD"><img alt="validateCode" id="validateCodeD" class="validateimg" src="../pages/validateCode.jsp" onclick="loadimage('D');"></div>
2、切换验证码，验证码提交后端检查的js
//切换验证码图片function loadimage(ele){document.getElementById("validateCode"+ele).src = "../pages/validateCode.jsp?"+Math.random();}function checkValidateCode(ele) {var bool = true;var validate_code;validate_code = $("#validate_code"+ele).val();if (validate_code == "") {error.validateCodeErr(ele,"请输入验证码");return false;}$.post("../pages/validateCode.action", {"validateCode" : validate_code},function(msg){if(eval(msg)=="-1"){error.validateCodeErr(ele,"请输入验证码");bool = false;}else if(eval(msg) == "1"){$('.validatecode-error').remove();bool = true;}else if(eval(msg) == "0"){error.validateCodeErr(ele,"验证码错误");bool = false;}else if(eval(msg) == "2") {error.validateCodeErr(ele,"请点击验证码图片刷新");bool = false;}});return bool;}
3、后端检查，登录安全检验也要排除这个url
package .....servlet;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;public class ValidateCodeServlet extends HttpServlet {@Overridepublic void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {int flag = -1;HttpSession session = req.getSession();String realKey = (String) session.getAttribute("genValCode");String userKey = req.getParameter("validateCode");if (realKey == null || realKey.trim().equals("")) {flag = 2;} else {if (userKey == null || userKey.trim().equals("")) {flag = -1;} else {realKey = realKey.toLowerCase();userKey = userKey.toLowerCase();if (realKey.equals(userKey)) {flag = 1;} else {flag = 0;}}}resp.getWriter().write(String.valueOf(flag));}}
剩下的就是调调样式，和以前登录页面风格差不多就可以了
