这里和图片的字符串验证码差不多,只是要保留一个结果就可以了!
程序运行截图如下:
输入错误后,还是这个界面,但输入正确后:
程序截图如下:
maven项目,源码如下:
LoginServlet.java
import javax.jws.WebService;
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;
@WebServlet(value = "/login")
public class LoginServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//得到数据
String inCode = request.getParameter("inCode").toString().toLowerCase();
String vailCode = request.getSession().getAttribute("vailCode").toString().toLowerCase();
//验证是否正确
if(inCode.equals(vailCode)){
response.sendRedirect("index.jsp");
}
else{
String url = request.getHeader("Referer");
response.sendRedirect(url);
}
}
}
ValServlet.java
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
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.util.Random;
@WebServlet(value = "/val")
public class ValServlet extends HttpServlet {
private Random random = new Random();
private int width = 140;
private int height = 30;
private int fontSize = 18;
private String str = "+-*÷";
private int value = -1; //结果
private String randCode(){
int one = random.nextInt(100);
int two = random.nextInt(100);
char op = str.charAt(random.nextInt(str.length()));
switch (op){
case '+':
value = one + two;
break;
case '-':
value = one - two;
break;
case '*':
value = one * two;
break;
case '÷':
value = one / two;
break;
}
return "" + one + op + two + "=?";
}
private Color randColor(){
int r = random.nextInt(256);
int g = random.nextInt(256);
int b = random.nextInt(256);
return new Color(r, g, b);
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//创建画板
BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//创建画笔
Graphics2D pen = img.createGraphics();
//生成内容
String code = randCode();
request.getSession().setAttribute("vailCode", value);
//绘制区域
pen.fillRect(0, 0, width, height);
//绘制字体
pen.setFont(new Font("微软雅黑", Font.BOLD, fontSize+random.nextInt(5)));
//绘制字符
for(int i = 0; i < code.length(); i++){
pen.setColor(randColor());
pen.drawString(code.charAt(i) + "", 5 + i * fontSize, (fontSize + height) / 2 + random.nextInt(5));
}
//绘制噪音线
for(int i = 0; i < 2; i++){
pen.setColor(randColor());
pen.setStroke(new BasicStroke(3));
pen.drawLine(random.nextInt(width / 2), random.nextInt(height),random.nextInt(width), random.nextInt(height));
}
//保存并发送
ServletOutputStream out = response.getOutputStream();
ImageIO.write(img, "png", out);
out.flush();
out.close();
}
}
web.xml
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>Archetype Created Web Application</display-name>
</web-app>
cal.jsp
<%--
Created by IntelliJ IDEA.
User: cff
Date: 2020/1/31
Time: 20:33
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>cal Title</title>
<style type="text/css">
.code_a{
color: #0000ff;
font-size: 12px;
text-decoration: none;
cursor: pointer;
}
#imgCode{
cursor: pointer;
}
</style>
<script type="text/javascript">
function changeCode() {
var imgCode = document.getElementById("imgCode");
imgCode.src = "val?" + Math.random();
}
</script>
</head>
<body>
<form action="login" method="post">
<label>验证码:</label>
<input type="text" id="inCode" name="inCode" />
<img src = "val" align="center" id="imgCode" οnclick="changeCode()" />
<a class="code_a" οnclick="changeCode()">换一张</a><br />
<input type="submit" value="登录" />
</form>
</body>
</html>
index.jsp
<%--
Created by IntelliJ IDEA.
User: cff
Date: 2020/1/31
Time: 22:15
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>SUCCESS</h1>
</body>
</html>
porn.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>calVailDemo</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.10</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.5</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.2.2</version>
</dependency>
</dependencies>
</project>