话说:

各位读者,中午好啊。还是那句口号:“学会一样东西的感觉是快乐的,如果能够创造新的东西,会更加快乐!”

这篇博客小结验证码的使用,验证码本质就是一个Servlet,在图片src=""的时候,直接加载这个Servlet名即可。
难度系数:★☆☆☆☆
目录:


1.引入验证码Servlet
2.配置Web.xml或者交给Spring管理
3.页面调用|Controller层调用方法


1.引入验证码Servlet
VertifyCodeServlet

package com.hmc.util;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
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 VertifyCodeServlet extends HttpServlet {

	@Override
	public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

		String data = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
		Random ran = new Random();

		// 创建一个图片
		BufferedImage img = new BufferedImage(100, 40, BufferedImage.TYPE_INT_RGB);

		// 得到图片上的一个画笔
		Graphics g = img.getGraphics();

		// 设置画笔的颜色,用来做边框颜色
		g.setColor(new Color(225, 225, 225));
		// 用画笔来填充一个矩形,矩形的左上角坐标,宽,高
		g.fillRect(0, 0, 100, 40);

		// 画底色矩形
		g.setColor(Color.WHITE);
		g.fillRect(1, 1, 100 - 2, 40 - 2);

		// 设置字体:宋体、不带格式的、字号
		g.setFont(new Font("宋体", Font.ITALIC + Font.BOLD, 20));

		StringBuffer s = new StringBuffer();
		for (int i = 0; i < 4; i++) {
			// 生成一个随机颜色 并设置给画笔
			g.setColor(new Color(ran.nextInt(255), ran.nextInt(255), ran.nextInt(255)));
			// 随机取一个字
			int index = ran.nextInt(data.length());
			// 设置验证码
			s.append(data.charAt(index));
			g.drawString(data.substring(index, index + 1), 100 / 6 * (i + 1), 25);
		}

		// 干扰素
		for (int i = 0; i < 1; i++) {
			g.setColor(new Color(ran.nextInt(255), ran.nextInt(255), ran.nextInt(255)));
			g.drawLine(ran.nextInt(100), ran.nextInt(40), ran.nextInt(100), ran.nextInt(40));
			g.drawOval(ran.nextInt(100), ran.nextInt(40), 2, 2);
		}

		// 将验证码写入session
		HttpSession session = req.getSession();
		session.setAttribute("code", s.toString());
		
		System.out.println(session.getAttribute("code"));

		// 将图片写入页面
		ImageIO.write(img, "jpg", resp.getOutputStream());
		

	}

	
	@Override
	public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

备注:此Servlet非本人所写,作者不详,嘻嘻。是个工具,拿来主义。感兴趣可以画画玩下,太忙,还有很多事要做。
放置位置:一般放在util工具包里面

2.配置Web.xml或者交给Spring管理

法1:传统的Servlet方式——配置web.xml
法2:交给Spring管理——配置applicationConfig.xml

法1:传统的Servlet方式——配置web.xml

<!-- ================配置验证码Servlet========================= -->
 <servlet>
	<servlet-name>vertifyCode</servlet-name>
	<servlet-class>com.hmc.util.VertifyCodeServlet</servlet-class>
</servlet>
		   
 <servlet-mapping>
	<servlet-name>vertifyCode</servlet-name>
	<url-pattern>/vertifyCode</url-pattern>
</servlet-mapping>

也就是说,页面一旦在地址栏输入vertifyCode,名字叫做vertifyCode的Servlet就会去找这个类,然后执行代码。但是我们是验证码,怎么会牵扯到在地址栏输出呢?

所以:src不仅可以写图片路径,还可以写Servlet名
配置web.xml之后,要重启服务器。

法2:交给Spring管理——配置applicationConfig.xml

用了框架之后,我们就可以不必再配置web.xml了,直接让Spring赋予Servlet生命!

<!--把验证码交给Spring管理 VertifyCodeServlet  -->
   <bean  class="com.hmc.util.VertifyCodeServlet">
   </bean>

3.页面调用|Controller层调用方法

法1:Servlet方式
法2:框架方式

法1:Servlet方式

<img src="vertifyCode" onclick="this.src='vertifyCode?'+new Date()">

这里的vertifyCode就是我们的web.xml中配置的url-pattern
加了个onclick事件,点击的时候可以自动刷新,点击的时候把路径更换一下,带上一个时间参数,就表示每次调用不同的。实现后效果是这样的:

express服务器下的验证码与前端结合 前端 验证码_验证码

法2:框架方式

Spring管理VertifyCode之后,怎么触发路径?当然要在Controller里面写方法,那么方法返回什么?怎么写?当然是调用VertifyCodeServlet里面的方法喽。
框架中图片方式和上面相同,不过需要在Controler里面调用一下方法:

<img src="vertifyCode" onclick="this.src='vertifyCode?'+new Date()">

Controller:

//2018/01/27 11:02 
@Controller
public class VertifyCodeController {
@Autowired
	private VertifyCodeServlet vertifyCodeServlet;

//2.访问验证码
@RequestMapping("vertifyCode")
public void getCode(HttpServletRequest req,HttpServletResponse resp) throws ServletException, IOException {
	vertifyCodeServlet.doGet(req, resp);
}
}

因为方法里面写的就是doGet所以调用deGet() doPost()都可以。

好!搞定! 各位小伙伴?还有其他或者更好的方式么?欢迎评论交流~ 祝各位周末愉快!