Amoy East electricity supplier item (24) - Get a verification code function

introduction

On an "electricity supplier scouring East project (23) - Gateway Interface" , mainly on the portal interface, including the home page, registration page, login page.

In this paper the code has been submitted to Github (Rev: 43c259085c577a7539211e22cb4f9ff497b55aad), interested students can download to look at: https://github.com/ylw-github/taodong-shop

In a previous blog, you can see the registration page using the icon (as shown below) to replace, but we need to get from the background, the paper will get a verification code function talk about.

Herein directory structure:
l____ Introduction
l____ 1. backend code
l________ 1.1 verification code generation tools
l________ 1.2 start-exclude packets associated database loading
l________ 1.3 Test
l____ 2. distal codes
l________ 2.1 acquisition codes method
l________ 2.2 Test
l____ summary

1. The back-end code

Verification code generation tools 1.1

First paste tools Captcha code:

/**
 * description: 图形验证码工具类
 * create by: YangLinWei
 * create time: 2020/3/6 4:18 下午
 */
public class RandomValidateCodeUtil {

	public static final String RANDOMCODEKEY = "RANDOMVALIDATECODEKEY";// 放到session中的key
	private String randString = "0123456789";// 随机产生只有数字的字符串 private String
	// private String randString = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生只有字母的字符串
	// private String randString =
	// "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";//随机产生数字与字母组合的字符串
	private int width = 95;// 图片宽
	private int height = 25;// 图片高
	private int lineSize = 40;// 干扰线数量
	private int stringNum = 4;// 随机产生字符数量

	private static final Logger logger = LoggerFactory.getLogger(RandomValidateCodeUtil.class);

	private Random random = new Random();

	/**
	 * 获得字体
	 */
	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);
	}

	/**
	 * 生成随机图片
	 */
	public void getRandcode(HttpServletRequest request, HttpServletResponse response) {
		HttpSession session = request.getSession();
		// BufferedImage类是具有缓冲区的Image类,Image类是用于描述图像信息的类
		BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_BGR);
		Graphics g = image.getGraphics();// 产生Image对象的Graphics对象,改对象可以在图像上进行各种绘制操作
		g.fillRect(0, 0, width, height);// 图片大小
		g.setFont(new Font("Times New Roman", Font.ROMAN_BASELINE, 18));// 字体大小
		g.setColor(getRandColor(110, 133));// 字体颜色
		// 绘制干扰线
		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 {
			// 将内存中的图片通过流动形式输出到客户端
			ImageIO.write(image, "JPEG", response.getOutputStream());
		} catch (Exception e) {
			logger.error("将内存中的图片通过流动形式输出到客户端失败>>>>   ", e);
		}

	}

	/**
	 * 绘制字符串
	 */
	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;
	}

	/**
	 * 绘制干扰线
	 */
	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));
	}

	public static Boolean checkVerify(String verifiCode, HttpSession httpSession) {
		if (StringUtils.isEmpty(verifiCode)) {
			return false;
		}
		String random = (String) httpSession.getAttribute("RANDOMVALIDATECODEKEY");
		if (StringUtils.isEmpty(random)) {
			return false;
		}
		if (!random.equals(verifiCode)) {
			return false;
		}
		return true;
	}
}

Then the Controller layer calls:

@Controller
public class VerifyController {
	/**
	 * 生成验证码
	 */
	@RequestMapping(value = "/getVerify")
	public void getVerify(HttpServletRequest request, HttpServletResponse response) {
		try {
			response.setContentType("image/jpeg");// 设置相应类型,告诉浏览器输出的内容为图片
			response.setHeader("Pragma", "No-cache");// 设置响应头信息，告诉浏览器不要缓存此内容
			response.setHeader("Cache-Control", "no-cache");
			response.setDateHeader("Expire", 0);
			RandomValidateCodeUtil randomValidateCode = new RandomValidateCodeUtil();
			randomValidateCode.getRandcode(request, response);// 输出验证码图片方法
		} catch (Exception e) {

		}
	}
}

1.2 start-exclude loading database related packages

Start the project, discovered the error, as follows:
Failed to Auto-the configure the DataSource A:. 'Spring.datasource.url' IS not specified and the DataSource could BE NO Embedded Auto-the Configured

This is due to the addition of its dependencies maven database, but Add dependencies in core classes can not be removed, it can only be declared in the startup class does not load these databases related to dependence, as follows:

@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class,
        DataSourceTransactionManagerAutoConfiguration.class, HibernateJpaAutoConfiguration.class})
public class AppPortalWeb {

    public static void main(String[] args) {
        SpringApplication.run(AppPortalWeb.class, args);
    }
}

1.3 Test

Restart the project browser to visit: http://127.0.0.1:8080/getVerify , you can be seen to be able to get a verification code.

2. The front-end code

2.1 Get codes Method

html code:

<div class="layui-input-block getCode" style="margin-top: 12px;">
    <input type="text" name="graphicCode"
           value="${(registerVo.graphicCode)!''}" placeholder="请输入验证码" class="layui-input">
    <img alt="" src="getVerify" onclick="getVerify(this);"
         style="border: 1px solid #e2e2e2; font-size: 18px; height: 46px; margin-top: -69px; width: 44%; background-color: #e8d6c0; margin-left: 167px;">
</div>

js code:

<script>
   //获取验证码
   function getVerify(obj) {
       obj.src = "getVerify?" + Math.random();
   }
</script>

2.2 Test

Browser Access: http://127.0.0.1:8080/register.html

can see the registration code can be acquired.

to sum up

This article explains the function of the registration code to obtain specific details see the code I submitted:
https://github.com/ylw-github/taodong-shop , the version number:43c259085c577a7539211e22cb4f9ff497b55aad