采用servlet+html+js
在进行之前要先导入好自己需要的pom依赖
没有这个依赖无法使用servlet(在原生javaweb开发时导入jar包)
<!--servlet依赖-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
</dependency>
这个直接采用注解@WebServlet,简化了web.xml的配置文件编写,提高了开发效率。
1、首先编写主要代码
@WebServlet("/CheckCode")
public class CheckCodeServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int width = 100;
int height = 50;
// 1.创建一个对象,在内存中图片(验证码图片对象)
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_BGR);
// 2.美化图片
// 2.1填充背景色
Graphics g = image.getGraphics();// 画笔对象
g.setColor(Color.pink);// 设置背景颜色
g.fillRect(0,0,width,height);
// 2.2画边框
g.setColor(Color.BLUE);// 设置边框颜色
g.drawRect(0,0,width - 1,height - 1);
String str = "ABCDEFGHIJKLMNOPRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
// 生成随机角标
Random ran = new Random();
for (int i = 1; i <= 4; i++) {
int index = ran.nextInt(str.length());
// 获取字符
char ch = str.charAt(index);// 随机字符
// 2.3写验证码
g.drawString(ch+"",width/5*i,height/2);
}
// 2.4画干扰线
g.setColor(Color.BLACK);
// 随机生成坐标点
for (int i = 0; i < 10; i++) {
int x1 = ran.nextInt(width);
int x2 = ran.nextInt(width);
int y1 = ran.nextInt(height);
int y2 = ran.nextInt(height);
g.drawLine(x1,y1,x2,y2);
}
// 3.将图片输出到页面展示
ImageIO.write(image,"jpg",response.getOutputStream());
}
}
2、然后我们配置tomact
(基于原生的javaweb开发,这里还是使用的外入tomcat,在现在的先进开发技术当中,通过框架springboot内嵌tomcat【或者自己定义undertow服务器,引入pom进行开发】)
启动tomcat,输入接口/CheckCode
3、接着编写html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证码</title>
<script>
/*
分析:
点击超链接,需要换一张
1.给超链接和图片绑定单击事件
2.重新设置图片的src属性值
*/
window.onload = function (){
// 1.获取图片对象
let image = document.getElementById("checkCode");
// 2.绑定单击事件
image.onclick = function (){
// 加时间错
var date = new Date().getTime();
image.src = "/day15/CheckCode?"+date;
}
// 3.获取超链接对象
let a = document.getElementById("change");
a.onclick = image.onclick;
}
</script>
</head>
<body>
<img src="/day15/CheckCode" id="checkCode">
<a id="change" href="#">看不清换一张</a>
</body>
</html>
最后启动测试
启动tomact,打开html
点击图形或者超链接,即可实现验证码的变化