使用技术java,javaweb,vue,axios,html,css,js
效果呈现,后端进行数据验证
![](https://i-blog.csdnimg.cn/blog_migrate/1c6cd3ebf608e616e4bc5ed8c3d4d1cd.png)
![](https://i-blog.csdnimg.cn/blog_migrate/32e279c1b339e1b2cd5d266eb4bcb227.png)
注意img里面的src路径返回的是一张图片
<li style="width: 500px;margin-bottom: 30px">
验证码:<el-input @blur="sr5" style="width: 100px;margin-left:-16px;" v-model="user.verify" placeholder="请输入内容"></el-input>
<a style="cursor: hand;margin: 100px;position: absolute" οnclick="fun1()">
<img style="height: 38px;position:relative;top:-100px;left: -30px" src="/journalism/CheckCodeServlet" alt="加载中..." id="img">
</a>
</li>
工具类CheckCodeServlet产生一个验证码图片 设置了session方便验证
![](https://i-blog.csdnimg.cn/blog_migrate/8daca2b7df104891235046e9dbdedfc1.png)
package com.util;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
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.File;
import java.io.IOException;
import java.io.OutputStream;
import java.util.Random;
@WebServlet("/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置缓存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "No-cache");
response.setDateHeader("Expires", 0);
//注意这里输出的是图片
response.setContentType("image/gif");
int width = 120;
int height = 50;
//画板
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//画笔
Graphics g = image.getGraphics();
Font font = new Font("宋体",Font.BOLD,35);
g.setFont(font);
String imagePath = request.getServletContext().getRealPath("/img/11.png");
Image image1 = ImageIO.read(new File(imagePath));
g.drawImage(image1, 0, 0, 120, 50, null);
// String source = "0123456789abcdefghijklmABCDEFGH好人按时发生大发";
String source = "0123456789";
String infor = "";
for (int i = 0; i < 4; i++) {
//随机取一个字符
int index = new Random().nextInt(source.length()-1);
char myCode = source.charAt(index);
//让字的颜色随机
Random random = new Random();
g.setColor(new Color(20+random.nextInt(120),20+random.nextInt(120),20+random.nextInt(120)));
//画入文字
g.drawString(myCode+"", 15+i*20, 30+new Random().nextInt(20));
//画入干扰线
g.drawLine(random.nextInt(80), random.nextInt(40), random.nextInt(100), random.nextInt(40));
infor += myCode;
}
//记录到session,以备将来匹配
request.getSession().setAttribute("infor", infor);
// 创建Cookie对象
// Cookie cookie = new Cookie("yanzhen1", infor);
// response.addCookie(cookie);
//释放资源
g.dispose();
OutputStream out = response.getOutputStream();
ImageIO.write(image,"gif", out);
out.flush();
out.close();}}
输入完验证码之后将数据传到后台
![](https://i-blog.csdnimg.cn/blog_migrate/edf171eb1dbc60b192e7f91159599623.png)
axios.post("http://localhost:8080/journalism/verification?name="+"verify"+"&input="+this.user.verify).then((resp)=> {
console.log(resp.data);
if(resp.data==false){
this.ts5 = true;
}else{
this.ts5 = false;}})
将数据传递到后台之后,进行数据验证,然后返回数据,完成验证码验证
![](https://i-blog.csdnimg.cn/blog_migrate/867121365f05232e393247ae8c1b1e70.png)
// 验证码
if("verify".equals(name)){
String input = req.getParameter("input");
System.out.println(input);
// 获取验证码里的session
HttpSession session = req.getSession();
String infor = (String)session.getAttribute("infor");
System.out.println(infor);
if(infor.equals(input)){
resp.getWriter().write("true");
}else{
resp.getWriter().write("false");
}
}