1.登陆界面（简易制作，丑勿喷）:
login.jsp:
<%@ page contentType="text/html;charset=UTF-8" language="java" %><script type="text/javascript" src="js/js.js"></script><html><head><title>登录页面</title></head><body><div id="top"><span style="color:red">${errors}</span></div><form id="login" action="/servlet/LoginServlet" method="post">用户名:<input type="text" name="user" id="user" /><br>密 码:<input type="password" name="pwd" id="pwd" /><br>验证码(点击图片更换验证码):<br><input name="check" type="text" id="check" maxlength="4" class="check_input" /><br><img src="images/checkcode.png" id="safecode" onclick="reloadcode()"/><br><input type="submit" value="确定"><input type="reset" value="重置"></form></body></html>
注:
1.action="/servlet/LoginServlet"为登录界面表单提交后,将页面请求转发到LoginServlet处理登录请求。
2. < src=“images/checkcode.png” id=“safecode” οnclick=“reloadcode()”/>该语句用于处理更换验证码操作。
3. <script type=“text/javascript” src=“js/js.js” 用于响应js.js文件中的函数。
4.
${errors}用于传递登录出现问题时的信息.
2.页面验证码制作:
import com.sun.image.codec.jpeg.JPEGCodec;import com.sun.image.codec.jpeg.JPEGImageEncoder;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.awt.*;import java.awt.image.BufferedImage;import java.io.IOException;import java.io.OutputStream;import java.util.Random;@WebServlet(name = "CheckCodeServlet",urlPatterns = {"/images/checkcode.png"})public class CheckCodeServlet extends HttpServlet {private String code = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";/*随机选取一个字符*/private char ranCheckCode(){int randomIndex=new Random().nextInt(code.length());//得到随机的位置return code.charAt(randomIndex);}/*产生0-200的随机数设置颜色*/private int ranNum(){return new Random().nextInt(200);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {StringBuffer checkcode =new StringBuffer();for (int i = 0; i <4 ; i++) {checkcode.append(ranCheckCode());//将四个随机得到的字符拼接为验证码}String check =checkcode.toString();//得到验证码request.getSession().setAttribute("checkcode",check);//将生成的验证码存起来,用于验证//1.在内存中生成图片BufferedImage img =new BufferedImage(44,20,BufferedImage.TYPE_INT_RGB);//2.从图片缓存中取出画笔对象(该画笔对象用于修改图片缓存区的像素数据)Graphics2D g2d = (Graphics2D) img.getGraphics();//3.用画笔将图片缓存填充为白色背景g2d.setColor(new Color(255,255,255));//将画笔设置为白色g2d.fillRect(0,0,44,20);//从原点坐标开始44X20的区域画为白色//4.在得到的白色背景板上开始画验证码for (int i = 0; i < check.length(); i++) {g2d.setColor(new Color(ranNum(),ranNum(),ranNum()));//随机生成画笔颜色String c=check.charAt(i)+"";g2d.drawString(c,11*i,16);//从x坐标开始画单个字符串,循环四次,得到画好的验证码图片}//将验证码图片转换成某种图片格式写到客户端response.setContentType("image/jpeg");OutputStream output = response.getOutputStream();//得到压缩后jpeg字节,(通过缓存输出流)JPEGImageEncoder encoder= JPEGCodec.createJPEGEncoder(output);//encoder.encode将图片缓存流编码encoder.encode(img);}}注: JPEGImageEncoder 在JDK8之后已被取消,有新方法代替之。
3.LoginServlet：登陆请求处理服务器
import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;import java.sql.Connection;import java.sql.PreparedStatement;import java.sql.ResultSet;@WebServlet(name = "LoginServlet", urlPatterns = {"/servlet/LoginServlet"})public class LoginServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取表单提交的数据String user = request.getParameter("user");String pwd = request.getParameter("pwd");String chknumber = request.getParameter("check");//校验验证码String chkcode = (String)request.getSession().getAttribute("checkcode");Connection conn = null;PreparedStatement prst = null;ResultSet rs = null;try {//获取表单提交的数据//输入验证码时不区分大小写if(chknumber.toUpperCase().equals(chkcode.toUpperCase())){//校验登陆帐号String sql = "select * from user where user = ?" ;conn = DB.getConnection();//博主自己整合好的jdbc连接类prst = conn.prepareStatement(sql);prst.setString(1,"admin");//向sql语句传入"admin"参数,得到数据库中用户名为"admin"的用户信息用来与表单传递来的参数进行比对操作rs = prst.executeQuery();if(rs.next()){String user1 = rs.getString("user");String pwd1 = rs.getString("pwd");if(user1.equals(user) ){//校验密码if(pwd1.equals(pwd)){//选择sendRedirect以防止任何需要刷新页面的请求响应(用户名,密码,验证码错误之类)后验证码图片缺失response.sendRedirect("/登录成功.jsp");}else{request.getSession().setAttribute("errors","密码输入错误！");//选择sendRedirect以防止任何需要刷新页面的请求响应(用户名,密码,验证码错误之类)后验证码图片缺失response.sendRedirect("/login.jsp");}}else{request.getSession().setAttribute("errors","用户名输入错误！");//转回登陆页面//选择sendRedirect以防止任何需要刷新页面的请求响应(用户名,密码,验证码错误之类)后验证码图片缺失response.sendRedirect("/login.jsp");}}}else{request.getSession().setAttribute("errors","验证码错误！");//选择sendRedirect以防止任何需要刷新页面的请求响应(用户名,密码,验证码错误之类)后验证码图片缺失response.sendRedirect("/login.jsp");}} catch (Exception e) {e.printStackTrace();} finally {DB.closeConnection(conn);}}}注：数据库表中已从在用户名为admin，密码admin的用户。
4.刷新验证码
目录下新建一个js文件,编写一个可以使验证码响应刷新的函数
function reloadcode(){var verify=document.getElementById('safecode');verify.src = "/images/checkcode.png?" + Math.random();}
分析：通过document.getElementById得到验证码图片路径，通过在图片路径后添加随机数使得服务器（CheckCodeservlet）每次响应后都会产生不同的图片路径，从而得到新的验证码图片，实现刷新操作。
5.登陆成功.jsp
用户名,密码,验证码输入无误登录成功后转到此页面。
<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head><title>当你看到这个界面说明你已经成功登录!</title></head><body></body></html>
