头条创作挑战赛

9.4.6 验证码-展示

1. 需求分析

展示验证码：展示验证码图片，并可以点击切换

验证码的生成是通过工具类来实现的，具体的工具类参考

04-资料\1. 登录注册案例\CheckCodeUtil.java

在该工具类中编写main方法进行测试:

publicstaticvoidmain(String[] args) throws IOException{//生成验证码的图片位置OutputStream fos =newFileOutputStream("d://a.jpg");//checkCode为最终验证码的数据String checkCode = CheckCodeUtil.outputVerifyImage(100,50, fos,4);
     System.out.println(checkCode);
 }

生成完验证码以后，我们就可以知晓:

• 验证码就是使用Java代码生成的一张图片
• 验证码的作用:防止机器自动注册，攻击服务器

1. 实现流程分析

(1)前端发送请求给CheckCodeServlet

(2)CheckCodeServlet接收到请求后，生成验证码图片，将图片用Reponse对象的输出流写回到前端

思考:如何将图片写回到前端浏览器呢?

(1)Java中已经有工具类生成验证码图片，测试类中只是把图片生成到磁盘上 (2)生成磁盘的过程中使用的是OutputStream流，如何把这个图片生成在页面呢? (3)前面在将Reponse对象的时候，它有一个方法可以获取其字节输出流，getOutputStream() (4)综上所述，我们可以把写往磁盘的流对象更好成Response的字节流，即可完成图片响应给前端

1. 具体实现

(1)修改Register.jsp页面，将验证码的图片从后台获取

<tr><td>验证码td><tdclass="inputs"><inputname="checkCode"type="text"id="checkCode"><imgid="checkCodeImg"src="/brand-demo/checkCodeServlet"><ahref=""id="changeImg">看不清？a>td>tr><script>document.getElementById("changeImg").onclick =function(){//路径后面添加时间戳的目的是避免浏览器进行缓存静态资源document.getElementById("checkCodeImg").src ="/brand-demo/checkCodeServlet?"+newDate().getMilliseconds();
     }script>

(2)编写CheckCodeServlet类，用来接收请求生成验证码

@WebServlet("/checkCodeServlet")publicclassCheckCodeServletextendsHttpServlet{@OverrideprotectedvoiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException{// 生成验证码ServletOutputStream os = response.getOutputStream();
         String checkCode = CheckCodeUtil.outputVerifyImage(100,50, os,4);
     }@OverrideprotectedvoiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException{this.doGet(request, response);
     }
 }

9.4.7验证码-校验

1. 需求

• 判断程序生成的验证码 和 用户输入的验证码 是否一样，如果不一样，则阻止注册
• 验证码图片访问和提交注册表单是两次请求，所以要将程序生成的验证码存入Session中

思考:为什么要把验证码数据存入到Session中呢?

• 生成验证码和校验验证码是两次请求，此处就需要在一个会话的两次请求之间共享数据
• 验证码属于安全数据类的，所以我们选中Session来存储验证码数据。

1. 实现流程分析

(1)在CheckCodeServlet中生成验证码的时候，将验证码数据存入Session对象

(2)前端将验证码和注册数据提交到后台，交给RegisterServlet类

(3)RegisterServlet类接收到请求和数据后，其中就有验证码，和Session中的验证码进行对比

(4)如果一致，则完成注册，如果不一致，则提示错误信息

1. 具体实现

(1)修改CheckCodeServlet类，将验证码存入Session对象

@WebServlet("/checkCodeServlet")publicclassCheckCodeServletextendsHttpServlet{@OverrideprotectedvoiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException{// 生成验证码ServletOutputStream os = response.getOutputStream();
         String checkCode = CheckCodeUtil.outputVerifyImage(100,50, os,4);// 存入SessionHttpSession session = request.getSession();
         session.setAttribute("checkCodeGen",checkCode);
 
 
     }@OverrideprotectedvoiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException{this.doGet(request, response);
     }
 }

(2)在RegisterServlet中，获取页面的和session对象中的验证码，进行对比

packagecom.itheima.web;importcom.itheima.pojo.User;importcom.itheima.service.UserService;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.*;importjava.io.IOException;@WebServlet("/registerServlet")publicclassRegisterServletextendsHttpServlet{privateUserService service =newUserService();@OverrideprotectedvoiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException{//1. 获取用户名和密码数据String username = request.getParameter("username");
         String password = request.getParameter("password");
 
         User user =newUser();
         user.setUsername(username);
         user.setPassword(password);// 获取用户输入的验证码String checkCode = request.getParameter("checkCode");// 程序生成的验证码，从Session获取HttpSession session = request.getSession();
         String checkCodeGen = (String) session.getAttribute("checkCodeGen");// 比对if(!checkCodeGen.equalsIgnoreCase(checkCode)){
 
             request.setAttribute("register_msg","验证码错误");
             request.getRequestDispatcher("/register.jsp").forward(request,response);// 不允许注册return;
         }//2. 调用service 注册booleanflag = service.register(user);//3. 判断注册成功与否if(flag){//注册功能，跳转登陆页面request.setAttribute("register_msg","注册成功，请登录");
             request.getRequestDispatcher("/login.jsp").forward(request,response);
         }else{//注册失败，跳转到注册页面request.setAttribute("register_msg","用户名已存在");
             request.getRequestDispatcher("/register.jsp").forward(request,response);
         }
 
 
     }@OverrideprotectedvoiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException{this.doGet(request, response);
     }
 }

至此，用户的注册登录功能就已经完成了。

声明：本文部分素材转载自互联网，如有侵权立即删除 。