前台用户注册_生成验证码

验证码的作用是验证操作者是否是真人，避免机器操作恶意提交。它是后台随机生成的一串字符串，但我们不能将该字符串直接传到前台，否则机器直接读到字符串，验证码将没有任何意义。

一般在后台生成验证码后，一方面将验证码保存到session中，另一方面将验证码做成一张图片，将图片传到前台。用户认出验证码后，输入验证码传到后台，如果正确即可判断操作者为真人。

1. 引入生成验证码的servlet

   xxxxxxxxxx
   /**
    * 验证码
    */
   @WebServlet("/frontdesk/checkCode")
   public class CheckCodeServlet extends HttpServlet {
      public void doGet(HttpServletRequest request, HttpServletResponse response)throws IOException {
         //服务器通知浏览器不要缓存
         response.setHeader("pragma","no-cache");
         response.setHeader("cache-control","no-cache");
         response.setHeader("expires","0");
         
         //在内存中创建一个长80，宽30的图片，默认黑色背景
         //参数一：长
         //参数二：宽
         //参数三：颜色
         int width = 80;
         int height = 30;
         BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
         
         //获取画笔
         Graphics g = image.getGraphics();
         //设置画笔颜色为灰色
         g.setColor(Color.GRAY);
         //填充图片
         g.fillRect(0,0, width,height);
         
         //产生4个随机验证码，12Ey
         String checkCode = getCheckCode();
         //将验证码放入HttpSession中
         request.getSession().setAttribute("checkCode",checkCode);
         
         //设置画笔颜色为黄色
         g.setColor(Color.YELLOW);
         //设置字体的小大
         g.setFont(new Font("黑体",Font.BOLD,24));
         //向图片上写入验证码
         g.drawString(checkCode,15,25);
         
         //将内存中的图片输出到浏览器
         //参数一：图片对象
         //参数二：图片的格式，如PNG,JPG,GIF
         //参数三：图片输出到哪里去
         ImageIO.write(image,"PNG",response.getOutputStream());
      }
   
      /**
       * 产生4位随机字符串 
       */
      private String getCheckCode() {
         String base = "0123456789ABCDEFGabcdefg";
         int size = base.length();
         Random r = new Random();
         StringBuffer sb = new StringBuffer();
         for(int i=1;i<=4;i++){
            //产生0到size-1的随机值
            int index = r.nextInt(size);
            //在base字符串中获取下标为index的字符
            char c = base.charAt(index);
            //将c放入到StringBuffer中去
            sb.append(c);
         }
         return sb.toString();
      }
      public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         this.doGet(request,response);
      }
   }
   

2. 启动类扫描注解标注的Web组件

   xxxxxxxxxx
   @SpringBootApplication
   @MapperScan("com.itbaizhan.travel.mapper")
   //SpringBoot启动时扫描注册注解标注的Web组件
   @ServletComponentScan
   public class TravelApplication {
       
   }
   

3. 修改注册页，引入验证码

   xxxxxxxxxx
   <tr>
       <td class="td_left">
           <label for="check">验证码</label>
       </td>
       <td class="td_right check">
           <input type="text" id="check" name="checkCode" class="check">
           <img src="/frontdesk/checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
           <script type="text/javascript">
               //图片点击事件
               function changeCheckCode(img) {
                    // 在方法后添加参数的原因是如果不添加参数，img.src的属性不会改变，此时浏览器就不会向后端发送请求。
                   img.src = "/frontdesk/checkCode?" + new Date().getTime();
               }
           </script>
       </td>
   </tr>