JavaEE之--登录页面(用户名、密码、验证码)
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>
版权声明：本文为qq_44779506原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
