案例需求
访问带有验证码的登录页面login.jsp。
用户输入用户名，密码以及验证码。
如果用户名和密码输入有误，跳转登录页面,提示:用户名或密码错误
如果验证码输人有误，跳转登录页面，提示:验证码错误
如果全部输入正确，则跳转到主页success.jsp，显示:用户名,欢迎您
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
int width = 100;
int height = 50;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics graphics = image.getGraphics();
graphics.setColor(Color.PINK);
graphics.fillRect(0,0,width,height);
graphics.setColor(Color.BLUE);
graphics.drawRect(0,0,width-1,height-1);
String str = "ABCDEFGHIGKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
Random random = new Random();
StringBuilder sb = new StringBuilder();
for (int i = 1; i <=4; i++) {
int i1 = random.nextInt(str.length());
char c = str.charAt(i1);
sb.append(c);
graphics.drawString(c+"",width/5*i,height/2);
}
String checkCode_session = sb.toString();
req.getSession().setAttribute("checkCode_session",checkCode_session);
// graphics.drawString("A",20,25);
// graphics.drawString("B",40,25);
// graphics.drawString("C",60,25);
// graphics.drawString("D",80,25);
graphics.setColor(Color.green);
for (int i = 0; i <10; i++) {
int x1 = random.nextInt(width);
int x2 = random.nextInt(width);
int y1 = random.nextInt(height);
int y2 = random.nextInt(height);
graphics.drawLine(x1,y1,x2,y2);
}
ImageIO.write(image,"jpg",resp.getOutputStream());
}
}
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
String password = request.getParameter("password");
String checkCode = request.getParameter("checkCode");
HttpSession session = request.getSession();
String checkCode_session = (String) session.getAttribute("checkCode_session");
if (checkCode_session.equalsIgnoreCase(checkCode)){
if ("zhangsan".equals(username) && "123".equals(password)){
session.setAttribute("user",username);
response.sendRedirect(request.getContextPath()+"/success.jsp");
}else {
request.setAttribute("login_error","用户名密码错误");
request.getRequestDispatcher("/login.jsp").forward(request,response);
}
}else {
request.setAttribute("cc_error","验证码错误");
request.getRequestDispatcher("/login.jsp").forward(request,response);
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <h1><%=request.getSession().getAttribute("user")%>欢迎您</h1> </body> </html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script> window.onload = function () { document.getElementById("img").onclick = function () { this.src="/checkCodeServlet?time="+new Date().getTime(); } } </script> <style> div{ color:red; } </style> </head> <body> <form action="/LoginServlet" method="post"> <table> <tr> <td>用户名</td> <td><input type="text" name="username"></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password"></td> </tr> <tr> <td>验证码</td> <td><input type="text" name="checkCode"></td> </tr> <tr> <td colspan="2"><img id="img" src="/checkCodeServlet"></td> </tr> <tr> <td colspan="2"><input type="submit" value="登录"></td> </tr> </table> </form> <div><%=request.getAttribute("cc_error")%></div> <div><%=request.getAttribute("login_error")%></div> </body> </html>
验证码细节：：
login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <script> window.onload = function () { document.getElementById("img").onclick = function () { this.src="/checkCodeServlet?time="+new Date().getTime(); } } </script> <style> div{ color:red; } </style> </head> <body> <form action="/LoginServlet" method="post"> <table> <tr> <td>用户名</td> <td><input type="text" name="username"></td> </tr> <tr> <td>密码</td> <td><input type="password" name="password"></td> </tr> <tr> <td>验证码</td> <td><input type="text" name="checkCode"></td> </tr> <tr> <td colspan="2"><img id="img" src="/checkCodeServlet"></td> </tr> <tr> <td colspan="2"><input type="submit" value="登录"></td> </tr> </table> </form> <div><%=request.getAttribute("cc_error") == null ? "" : request.getAttribute("cc_error")%></div> <div><%=request.getAttribute("login_error") == null ? "" : request.getAttribute("login_error")%></div> </body> </html>
