验证码功能

一般验证码功能实现方式为，前端界面访问一个url请求，后端服务代码生成一个图片流返回至浏览器，浏览器通过img标签来展示图片信息，其流程模式如下所示：

• 前端界面
  前端界面需要完成的功能，
  1）跳转到登陆页面后立即生成一个验证码图片
  2）由于看不清或其他原因，可以更改验证码图片数据
  更改img标签的属性以及增加一个事件

<img src="/verify/authImage?1" id="codeImg" alt="点击更换" onclick="javascript:changeImg()"                                  title="点击更换" />

增加以下javascript代码，来向后端服务请求图片，鼠标点击一下验证码图片即可实现刷新验证码

<script src="../static/plugins/jquery-1.12.4/jquery.min.js" th:src="@{/plugins/jquery-1.12.4/jquery.min.js}" ></script> <script type="text/javascript">     function changeImg(){         var imageCode=$("#codeImg");         imageCode.attr('src', '/verify/authImage?date=' + new Date());     } </script>

• 后端业务
  生成验证码功能是一个通用的方法，其他业务或以后其他地方也能使用的到。我们可以再次创建一个maven module模块项目，用于存放一些公共组件。比如：现在的生成验证码代码模块、以后的web模块统一返回数据功能等等。创建工程项目可以参照上一篇文章完成。
  生成验证码图片源代码

package springboot.study.common;  import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.IOException; import java.io.OutputStream; import java.util.Random;  import javax.imageio.ImageIO;  public class AuthImageCodeUtils {      private static final Color Color = null;     private static char mapTable[] = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q',             'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', };      /**      * 功能:生成彩色验证码图片 参数width为生成图片的宽度,参数height为生成图片的高度,参数os为页面的输出流      */      public static String getCerPic(int width, 

                    

                        
关键字：