idea-ssm汽车修配厂（一）ajax登录功能实现（4位图片验证码）

资料jsp+sql:链接: https://pan.baidu.com/s/1KeXXOpYfLOkkLdp3j2qySw 提取码: uibj
首先创建一个maven web工程，目录结构如下

**用逆向工程，生成一下，但是我们发现了一个问题，是不是每个mapper都有默认的公共的方法，我们要把这些给提出来卸载base层里面，应该怎么做呢？我们定义一个泛型的接口，把方法放进去，每一个mapper都继承这个接口不就行啦？
**

public interface BaseMapper<T> {
    int deleteByPrimaryKey(Integer id);

    int insert(T record);

    int insertSelective(T record);

    T selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(T record);

    int updateByPrimaryKey(T record);
}

首先写一个LoginController用于展示和处理。注意分包路径

这里呢，插入一个拦截器，在返回试图前postHandle，我们把项目路径给set进去，用于做以后的权限控制。

request.setAttribute("ctx",request.getContextPath());

好了，直接切入正题，图片验证码的实现。

后端是一个image标签，有一个src属性，跳转到servlet,让servlet来生成一个图片，以io流的形式响应过来，那么怎么写呢？

@WebServlet("/login/Kaptcha.jpg")
public class Kaptcha extends HttpServlet {
	
	
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		    response.setHeader("Pragma", "No-cache");  
	        response.setHeader("Cache-Control", "no-cache");  
	        response.setDateHeader("Expires", 0);  
	        response.setContentType("image/jpeg");  
	          
	        //生成随机字串  
	        String verifyCode = ImageUtil.generateVerifyCode(4);  
	        //将生成的图形验证码当中的字符串存session,将来使用spring-session-redis
	        request.getSession().setAttribute("validate", verifyCode);
	        
	       
	        //生成图片  
	        int w = 200, h = 80;  
	        ImageUtil.outputImage(w, h, response.getOutputStream(), verifyCode);  
		
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(req, resp);
	}

	
	
	

}

需要一个util，来

public class ImageUtil {
  
    //ʹ�õ�Algerian���壬ϵͳ��û�еĻ���Ҫ��װ���壬����ֻ��ʾ��д��ȥ����1,0,i,o�������׻������ַ�  
    public static final String VERIFY_CODES = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";  
    private static Random random = new Random();  
  
  
    /** 
     * ʹ��ϵͳĬ���ַ�Դ������֤�� 
     * @param verifySize    ��֤�볤�� 
     * @return 
     */  
    public static String generateVerifyCode(int verifySize){  
        return generateVerifyCode(verifySize, VERIFY_CODES);  
    }  
    /** 
     * ʹ��ָ��Դ������֤�� 
     * @param verifySize    ��֤�볤�� 
     * @param sources   ��֤���ַ�Դ 
     * @return 
     */  
    public static String generateVerifyCode(int verifySize, String sources){  
        if(sources == null || sources.length() == 0){  
            sources = VERIFY_CODES;  
        }  
        int codesLen = sources.length();  
        Random rand = new Random(System.currentTimeMillis());  
        StringBuilder verifyCode = new StringBuilder(verifySize);  
        for(int i = 0; i < verifySize; i++){  
            verifyCode.append(sources.charAt(rand.nextInt(codesLen-1)));  
        }  
        return verifyCode.toString();  
    }  
      
    /** 
     * ���������֤���ļ�,��������֤��ֵ 
     * @param w 
     * @param h 
     * @param outputFile 
     * @param verifySize 
     * @return 
     * @throws IOException 
     */  
    public static String outputVerifyImage(int w, int h, File outputFile, int verifySize) throws IOException{  
        String verifyCode = generateVerifyCode(verifySize);  
        outputImage(w, h, outputFile, verifyCode);  
        return verifyCode;  
    }  
      
    /** 
     * ��������֤��ͼƬ��,��������֤��ֵ 
     * @param w 
     * @param h 
     * @param os 
     * @param verifySize 
     * @return 
     * @throws IOException 
     */  
    public static String outputVerifyImage(int w, int h, OutputStream os, int verifySize) throws IOException{  
        String verifyCode = generateVerifyCode(verifySize);  
        outputImage(w, h, os, verifyCode);  
        return verifyCode;  
    }  
      
    /** 
     * ����ָ����֤��ͼ���ļ� 
     * @param w 
     * @param h 
     * @param outputFile 
     * @param code 
     * @throws IOException 
     */  
    public static void outputImage(int w, int h, File outputFile, String code) throws IOException{  
        if(outputFile == null){  
            return;  
        }  
        File dir = outputFile.getParentFile();  
        if(!dir.exists()){  
            dir.mkdirs();  
        }  
        try{  
            outputFile.createNewFile();  
            FileOutputStream fos = new FileOutputStream(outputFile);  
            outputImage(w, h, fos, code);  
            fos.close();  
        } catch(IOException e){  
            throw e;  
        }  
    }  
      
    /** 
     * ���ָ����֤��ͼƬ�� 
     * @param w 
     * @param h 
     * @param os 
     * @param code 
     * @throws IOException 
     */  
    public static void outputImage(int w, int h, OutputStream os, String code) throws IOException{  
        int verifySize = code.length();  
        BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);  
        Random rand = new Random();  
        Graphics2D g2 = image.createGraphics();  
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON);  
        Color[] colors = new Color[5];  
        Color[] colorSpaces = new Color[] { Color.WHITE, Color.CYAN,  
                Color.GRAY, Color.LIGHT_GRAY, Color.MAGENTA, Color.ORANGE,  
                Color.PINK, Color.YELLOW };  
        float[] fractions = new float[colors.length];  
        for(int i = 0; i < colors.length; i++){  
            colors[i] = colorSpaces[rand.nextInt(colorSpaces.length)];  
            fractions[i] = rand.nextFloat();  
        }  
        Arrays.sort(fractions);  
          
        g2.setColor(Color.GRAY);// ���ñ߿�ɫ  
        g2.fillRect(0, 0, w, h);  
          
        Color c = getRandColor(200, 250);  
        g2.setColor(c);// ���ñ���ɫ  
        g2.fillRect(0, 2, w, h-4);  
          
        //���Ƹ�����  
        Random random = new Random();  
        g2.setColor(getRandColor(160, 200));// ������������ɫ  
        for (int i = 0; i < 20; i++) {  
            int x = random.nextInt(w - 1);  
            int y = random.nextInt(h - 1);  
            int xl = random.nextInt(6) + 1;  
            int yl = random.nextInt(12) + 1;  
            g2.drawLine(x, y, x + xl + 40, y + yl + 20);  
        }  
          
        // ������  
        float yawpRate = 0.05f;// ������  
        int area = (int) (yawpRate * w * h);  
        for (int i = 0; i < area; i++) {  
            int x = random.nextInt(w);  
            int y = random.nextInt(h);  
            int rgb = getRandomIntColor();  
            image.setRGB(x, y, rgb);  
        }  
          
        shear(g2, w, h, c);// ʹͼƬŤ��  
  
        g2.setColor(getRandColor(100, 160));  
        int fontSize = h-4;  
        Font font = new Font("Algerian", Font.ITALIC, fontSize);  
        g2.setFont(font);  
        char[] chars = code.toCharArray();  
        for(int i = 0; i < verifySize; i++){  
            AffineTransform affine = new AffineTransform();  
            affine.setToRotation(Math.PI / 4 * rand.nextDouble() * (rand.nextBoolean() ? 1 : -1), (w / verifySize) * i + fontSize/2, h/2);  
            g2.setTransform(affine);  
            g2.drawChars(chars, i, 1, ((w-10) / verifySize) * i + 5, h/2 + fontSize/2 - 10);  
        }  
          
        g2.dispose();  
        ImageIO.write(image, "jpg", os);  
    }  
      
    private static Color getRandColor(int fc, int bc) {  
        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);  
    }  
      
    private static int getRandomIntColor() {  
        int[] rgb = getRandomRgb();  
        int color = 0;  
        for (int c : rgb) {  
            color = color << 8;  
            color = color | c;  
        }  
        return color;  
    }  
      
    private static int[] getRandomRgb() {  
        int[] rgb = new int[3];  
        for (int i = 0; i < 3; i++) {  
            rgb[i] = random.nextInt(255);  
        }  
        return rgb;  
    }  
  
    private static void shear(Graphics g, int w1, int h1, Color color) {  
        shearX(g, w1, h1, color);  
        shearY(g, w1, h1, color);  
    }  
      
    private static void shearX(Graphics g, int w1, int h1, Color color) {  
  
        int period = random.nextInt(2);  
  
        boolean borderGap = true;  
        int frames = 1;  
        int phase = random.nextInt(2);  
  
        for (int i = 0; i < h1; i++) {  
            double d = (double) (period >> 1)  
                    * Math.sin((double) i / (double) period  
                            + (6.2831853071795862D * (double) phase)  
                            / (double) frames);  
            g.copyArea(0, i, w1, 1, (int) d, 0);  
            if (borderGap) {  
                g.setColor(color);  
                g.drawLine((int) d, i, 0, i);  
                g.drawLine((int) d + w1, i, w1, i);  
            }  
        }  
  
    }  
  
    private static void shearY(Graphics g, int w1, int h1, Color color) {  
  
        int period = random.nextInt(40) + 10; // 50;  
  
        boolean borderGap = true;  
        int frames = 20;  
        int phase = 7;  
        for (int i = 0; i < w1; i++) {  
            double d = (double) (period >> 1)  
                    * Math.sin((double) i / (double) period  
                            + (6.2831853071795862D * (double) phase)  
                            / (double) frames);  
            g.copyArea(i, 0, 1, h1, 0, (int) d);  
            if (borderGap) {  
                g.setColor(color);  
                g.drawLine(i, (int) d, i, 0);  
                g.drawLine(i, (int) d + h1, i, h1);  
            }  
  
        }  
  
    }  
   
} 

后端代码送上

<img
							style="height:24px;width:60px;display:inline-block; vertical-align:middle;cursor:pointer;"
							src="${ctx}/login/Kaptcha.jpg" border="0" title="看不清,请点击图片换一张"
							id="imageValidate" onclick="refreshCode()">

function refreshCode() {
		document.getElementById('imageValidate').src = '${ctx}/login/Kaptcha.jpg?'
				+ Math.random();
	}

这样的话呢，图片验证码就出来了。

当用户点击登录，我们应该发起ajax请求注意用button。

function login() {
	    //取到登录账号
		var loginName = $("#loginName").val();
		//取到密码
		var password = $("#password").val();
		//取到验证码
		var validateCode = $("#validateCode").val();
		if (loginName == '' || password == '' || validateCode == "") {
			alert("用户名、密码、验证码不能为空");

		} else {
			$.ajax({
				type : "post",
				url : "${ctx}/login/login",
				data : {
					'loginName' : loginName,
					'password' : password,
					'validate' : validateCode
				},
				success : function(data) {
					if(data=='1'){
						$("#tips").html("验证码错误");
					}else if(data=='2'){
						$("#tips").html("账号或密码错误");
					}else if(data=='3'){
						//登录成功之后，到达首页 index
						window.location.href="${ctx}/index/index";
					}
					
				}
                  
			});

		}

	}

在我们的LoginController接收一下，我用的vo类接收一下

@RequestMapping("/login")
	public void login(LoginVo vo, HttpServletRequest request, HttpServletResponse response) throws Exception{
		//判断验证码是否正确
		String code=(String)request.getSession().getAttribute(SysConstant.VALIDATE_CODE);
		if(vo.getValidate().toUpperCase().equals(code.toUpperCase())){
			//验证码正确
			SysUser user= userService.findUserByLoginNameAndPassword(vo);
			if(null==user){
				response.getWriter().write("2");
			}else{
				//登录成功
				request.getSession().setAttribute("user",user);
				response.getWriter().write("3");
			}
		}else{
			//验证码错误
			response.getWriter().write("1");
		}
	}