登录功能之添加验证码|学习笔记

开发者学堂课程【JSP 快速入门：登录功能之添加验证码】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/33/detail/718

登录功能之添加验证码

内容介绍：

1. 验证码功能的基本原理

2. VerifyCodeServlet 生成图片

3. LoginServlet 校验验证码

4. 验证码换一张功能

验证码功能的基本原理：

首先用户发出请求到 login.jsp→VerifyCodeServlet 生成图片并保存到 session 之后响应给客户端→用户提交验证码表单→ LoginServlet 获取表单中的验证码和 session 中的验证码并进行比较→如果信息相同则向下运行，不同则保存错误信息到request 域并转发到 login.jsp

VerifyCodeServlet 生成图片

1.生成图片

2.保存图片上的文本到 session域中

3.把图片响应给客户端

对应代码：

package cn.itcast.servlet;

import java.awt.image.BufferedImage;

public class VerifyCodeServlet extends

HttpServlet {

public void doGet (HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

VerifyCode vc = new VerifyCode ();

BufferedImage image = vc. getImage ();

request.getSession().setAttribute("session_vcode",ve.getText());

VerifyCode.output(image,response.getOutputStream());

}

}

LoginServlet 校验验证码

1从 session 中获取正确的验证码

2从表单中获取用户填写的验证码

3进行比较！

4如果相同，向下运行，否则保存错误信息到 request 域，转发到 login.jsp

对应代码：String sessionCode = (String) request, getSession ().getAttribute ("session_vcode");

String paramCode = request. getParameter ("verifyCode");

if(!paramCode.equalsIgnoreCase(sessionCode)) {

request.setAttribute("msg","验证码错误！");

request.getRequestDispatcher("/session2/login.jsp").forward(request,response);

return

}

验证码换一张功能

1.得到 img 元素

2.修改其 src 为 /day11_3/VerifyCodeServlet

对应代码：

function_change(){

var imgEle = document.getElementById("img");

imgEle.src = "/day11_3/VerifyCodeServlet?a="+ new Date().getTime();

}