需要用到一个 jar 包
Jar包链接：https://pan.baidu.com/s/1ZvSAn_vjrYq_IuScCU3G_w 密码：9fnb
创建一个生成验证码图片的servlet 主要在35-45行！
1 package com.it.Servlet; 2 3 import java.io.IOException; 4 import javax.servlet.ServletException; 5 import javax.servlet.annotation.WebServlet; 6 import javax.servlet.http.HttpServlet; 7 import javax.servlet.http.HttpServletRequest; 8 import javax.servlet.http.HttpServletResponse; 9 10 11 import cn.hutool.captcha.CaptchaUtil; 12 import cn.hutool.captcha.LineCaptcha; 13 14 /** 15 * Servlet implementation class AutoCodeServlet 16 */ 17 @WebServlet("/AutoCodeServlet") 18 public class AutoCodeServlet extends HttpServlet { 19 private static final long serialVersionUID = 1L; 20 21 /** 22 * @see HttpServlet#HttpServlet() 23 */ 24 public AutoCodeServlet() { 25 super(); 26 // TODO Auto-generated constructor stub 27 } 28 29 /** 30 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 31 */ 32 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 33 // TODO Auto-generated method stub 34 35 //创建一个宽度 200 高度 100的图形验证码 36 LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(200, 100); 37 38 //得到生成的验证码字符 39 String code=lineCaptcha.getCode(); 40 41 //将验证码写到会话中 42 request.getSession().setAttribute("cod", code); 43 44 //response进行输出 45 lineCaptcha.write(response.getOutputStream()); 46 47 } 48 49 /** 50 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 51 */ 52 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 53 // TODO Auto-generated method stub 54 doGet(request, response); 55 } 56 57 }
创建判断判断验证码的servlet
1 package com.it.Servlet; 2 3 import java.io.IOException; 4 import javax.servlet.ServletException; 5 import javax.servlet.annotation.WebServlet; 6 import javax.servlet.http.HttpServlet; 7 import javax.servlet.http.HttpServletRequest; 8 import javax.servlet.http.HttpServletResponse; 9 10 /** 11 * Servlet implementation class LogServlet 12 */ 13 @WebServlet("/LogServlet") 14 public class LogServlet extends HttpServlet { 15 private static final long serialVersionUID = 1L; 16 17 /** 18 * @see HttpServlet#HttpServlet() 19 */ 20 public LogServlet() { 21 super(); 22 // TODO Auto-generated constructor stub 23 } 24 25 /** 26 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 27 */ 28 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 29 // TODO Auto-generated method stub 30 31 //得到生成的验证码字符 32 String oldcode=(String) request.getSession().getAttribute("cod"); 33 34 //得到用户输入的验证码 35 String code=request.getParameter("c"); 36 37 //两个验证码进行判断 38 if(!oldcode.equals(code)) { 39 request.setAttribute("cde", "验证码错误！"); 40 request.getRequestDispatcher("index.jsp").forward(request, response); 41 } 42 43 //得到账号 44 String name=request.getParameter("u"); 45 46 //得到密码 47 String pwd=request.getParameter("p"); 48 49 //判断账号和密码是否成功 成功进行页面跳转 50 if(name.equals("admin")&&pwd.equals("admin")) { 51 response.sendRedirect("logsu.jsp"); 52 } 53 } 54 55 /** 56 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 57 */ 58 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 59 // TODO Auto-generated method stub 60 doGet(request, response); 61 } 62 63 }
创建一个登入的jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 4 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 5 <html> 6 <head> 7 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 8 <title>Insert title here</title> 9 <script type="text/javascript"> 10 function changcode(){ 11 //点击图片改变验证码 12 /* document.getElementByID("uimg").src; */ //这句话的结果是AutoCodeServlet 13 //给AutoCodeServlet 传一个时间的参数 然后点击是改变验证码 14 document.getElementById("uimg").src=document.getElementById("uimg").src+"?time="+new Date().getTime(); 15 } 16 17 function login(){ 18 //点登入 19 20 //获取账号 密码 验证码 21 var name=document.getElementById("uname").value; 22 var pwd=document.getElementById("upass").value; 23 var code=document.getElementById("ucode").value; 24 location.href="LogServlet?u="+name+"&p="+pwd+"&c="+code; 25 } 26 </script> 27 28 <style type="text/css"> 29 .md{ 30 width:300px; 31 height:500px; 32 margin:0px auto; 33 margin-top:200px; 34 } 35 #log{ 36 margin-left:50px; 37 } 38 </style> 39 </head> 40 <body> 41 <div class="md"> 42 <input type="text" id="uname"/><br><br> 43 <input type="password" id="upass"/><br><br> 44 <input type="text" id="ucode"/><img alt="验证码" src="AutoCodeServlet" id="uimg" onclick="changcode()"><br><br> 45 <span><c:out value="${cde }"></c:out></span> 46 <input type="submit" value="登入" id="log" onclick="login()"/> 47 </div> 48 </body> 49 </html>
创建一个登入成功后跳转的jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>Insert title here</title> 8 </head> 9 <body> 10 <h1>欢迎加入！</h1> 11 </body> 12 </html>
效果：
