首先使用maven搭建web项目导入一下servlet依赖
<!-- servlet依赖的jar包start -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
</dependency>
<!-- servlet依赖的jar包start -->
<!-- jsp依赖jar包start -->
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.3.1</version>
</dependency>
<!-- jsp依赖jar包end -->
<!--jstl标签依赖的jar包start -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!--jstl标签依赖的jar包end -->
第二步前端页面有点简陋自己用到时改一下根据自己的页面就行了,页面代码
<%--
Created by IntelliJ IDEA.
User: Lenovo
Date: 2020/2/11
Time: 15:21
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<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="mathCode?"+Math.random();
}
</script>
<body>
<form action="mathVail" method="post">
<label>算数验证码:</label>
<input type="text" id="inputCode" name="inputCode" placeholder="输入验证码,大小写无关"/>
<%--此处src的名称codeImage与web.xml中配置的<url-pattern>/codeImage</url-pattern>名称相同--%>
<img src="mathCode" id="imgCode" align="center" onclick="changeCode()"/>
<a class="code_a" onclick="changeCode()">看不清!切换一张</a><br>
<input type="submit" value="登录">
</form>
<div style="color: #ff0000;">${errMsg}</div>
</body>
</html>
最重要的配置web.xml配置此处小心
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>Archetype Created Web Application</display-name>
<servlet>
<servlet-name>mathCodeServlet</servlet-name>
<servlet-class>demo2.servlet.MathCodeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>mathCodeServlet</servlet-name>
<url-pattern>/mathCode</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>mathCodeVail</servlet-name>
<servlet-class>demo2.servlet.MathVailServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>mathCodeVail</servlet-name>
<url-pattern>/mathVail</url-pattern>
</servlet-mapping>
<!--<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>-->
</web-app>
生成算数验证码的servlet代码
package demo2.servlet;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
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;
/**
* package_name:demo1.servlet
* Author:徐亚远
* Date:2020/2/11 15:05
* 项目名:code-projects
* Desription:
**/
public class MathCodeServlet extends HttpServlet {
private int width = 160; //宽度
private int height = 40; //高度
private int fontsize = 22; //字体大小
private Random random = new Random(); //随机数对象
private String str = "+-*/"; //从str中随机生成字符
private int result = -1;
//返回随机颜色
private Color randColor() {
int r = random.nextInt(256);
int g = random.nextInt(256);
int b = random.nextInt(256);
return new Color(r, g, b);
}
private String randomCode() {
int first = random.nextInt(100);
int second = random.nextInt(100)+1;
char op = str.charAt(random.nextInt(str.length()));
switch (op){
case '+':
result = first+second;
break;
case '-':
result = first - second;
break;
case '*':
result = first * second;
break;
case '/':
result = first / second;
break;
}
return ""+first+op+second+"=?";
}
@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 {
//一:创建画板:new Bufferedimage()
BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//二:创建画笔:画板.getGaphics()
Graphics2D pen = (Graphics2D) img.getGraphics();
//三:随机生成内容:不同颜色的字符此处可以定义生成字符的个数这个是生成六个字符的验证码
String code = randomCode();
//保存在session中
req.getSession().setAttribute("vailCode",result );
//四:绘制内容:画笔.drawString()
// 4.1设置绘制区域
pen.fillRect(0, 0, width, height);
//4.2设置字体
pen.setFont(new Font("微软雅黑", Font.BOLD, fontsize));
//4.3生成随机内容
for (int i = 0; i < code.length(); i++) {
pen.setColor(randColor());
//绘制字符
pen.drawString(code.charAt(i) + "", 5 + i * fontsize, (fontsize + height) / 2);
}
//4.4绘制噪音线
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) );
}
//五:存为图片发送:ImageIo.wreite(画板,图片类型,输出流)
ServletOutputStream out = resp.getOutputStream();
ImageIO.write(img, "png", out);
out.flush();
out.close();
}
}
验证算数验证码的servlet代码
package demo2.servlet;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
* package_name:demo2.servlet
* Author:徐亚远
* Date:2020/2/11 15:18
* 项目名:code-projects
* Desription:
**/
public class MathVailServlet 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 {
//得到数据
String inputCode = req.getParameter("inputCode").toString().toLowerCase();
String vailCode = req.getSession().getAttribute("vailCode").toString().toLowerCase();
//验证是否一致
if (inputCode.equals(vailCode)){
resp.sendRedirect("success.jsp");
}else {
req.getSession().setAttribute("errMsg","验证码输入错误,请重新输入" );
//返回上一页
resp.sendRedirect("mathCode.jsp");
}
}
}
验证成功跳转的页面
<%--
Created by IntelliJ IDEA.
User: Lenovo
Date: 2020/2/9
Time: 12:29
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>验证码输入成功</title>
</head>
<body>
<h2>验证码输入成功</h2>
</body>
</html>
验证码验证错误的显示效果: