Kaptcha验证码（springboot后端加vue前端简单实列）

2024-02-05 21:30
文章标签 java javascript 简单 springboot vue spring 前端 frontend 验证码 kaptcha 实列 后端加

本文主要是介绍Kaptcha验证码（springboot后端加vue前端简单实列），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

搭建编写环境

搭建前端环境（vue）

使用cmd创建一个基本的vue项目，并用idea打开

image-20220207141100560

搭建后端环境（springboot）

在根目录创建一个Module

image-20220207141304587

选择spring，并下一步。

image-20220207141347145

勾选Web下的Spring Web。并下一步。

image-20220207141447328

这样你的后端环境就搭建完成了。

image-20220207141536446

代码编写

后端

第一步：导入kaptcha依赖

        <!-- 验证码 依赖--><dependency><groupId>com.github.axet</groupId><artifactId>kaptcha</artifactId><version>0.0.9</version></dependency>

image-20220207142021615

第二步：配置KaptchaConfig（验证码图像的一些配置信息）

image-20220207142055821

package com.example.demo.kaptcha;import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;import java.util.Properties;@Component
public class KaptchaConfig {@Beanpublic DefaultKaptcha getDefaultKaptcha() {com.google.code.kaptcha.impl.DefaultKaptcha defaultKaptcha = new com.google.code.kaptcha.impl.DefaultKaptcha();Properties properties = new Properties();// 图片边框properties.setProperty("kaptcha.border", "no");// 边框颜色properties.setProperty("kaptcha.border.color", "black");//边框厚度properties.setProperty("kaptcha.border.thickness", "1");// 图片宽properties.setProperty("kaptcha.image.width", "200");// 图片高properties.setProperty("kaptcha.image.height", "50");//图片实现类properties.setProperty("kaptcha.producer.impl", "com.google.code.kaptcha.impl.DefaultKaptcha");//文本实现类properties.setProperty("kaptcha.textproducer.impl", "com.google.code.kaptcha.text.impl.DefaultTextCreator");//文本集合，验证码值从此集合中获取properties.setProperty("kaptcha.textproducer.char.string", "01234567890qwertyuiopasdfghjklzxcvbnm");//验证码长度properties.setProperty("kaptcha.textproducer.char.length", "4");//字体properties.setProperty("kaptcha.textproducer.font.names", "宋体");//字体颜色properties.setProperty("kaptcha.textproducer.font.color", "black");//文字间隔properties.setProperty("kaptcha.textproducer.char.space", "5");//干扰实现类properties.setProperty("kaptcha.noise.impl", "com.google.code.kaptcha.impl.DefaultNoise");//干扰颜色properties.setProperty("kaptcha.noise.color", "blue");//干扰图片样式properties.setProperty("kaptcha.obscurificator.impl", "com.google.code.kaptcha.impl.WaterRipple");//背景实现类properties.setProperty("kaptcha.background.impl", "com.google.code.kaptcha.impl.DefaultBackground");//背景颜色渐变，结束颜色properties.setProperty("kaptcha.background.clear.to", "white");//文字渲染器properties.setProperty("kaptcha.word.impl", "com.google.code.kaptcha.text.impl.DefaultWordRenderer");Config config = new Config(properties);defaultKaptcha.setConfig(config);return defaultKaptcha;}
}

第三步：生成验证码图像的CaptchaController

image-20220207142223086

package com.example.demo.kaptcha;import com.google.code.kaptcha.Constants;
import com.google.code.kaptcha.Producer;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.awt.image.BufferedImage;
@Controller
public class CaptchaController {@Autowiredprivate Producer captchaProducer;@Autowiredprivate static Logger logger = LoggerFactory.getLogger(CaptchaController.class);@RequestMapping("getimg")public ModelAndView getKaptchaImage(HttpServletRequest request, HttpServletResponse response) throws Exception {HttpSession session = request.getSession();String code = (String)session.getAttribute(Constants.KAPTCHA_SESSION_KEY);logger.debug("******************验证码是: " + code + "******************");response.setDateHeader("Expires", 0);// 设置标准的HTTP/1.1无缓存头信息response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");// 设置IE扩展的HTTP/1.1无缓存头(使用addHeader)response.addHeader("Cache-Control", "post-check=0, pre-check=0");// 设置标准HTTP/1.0无缓存报头response.setHeader("Pragma", "no-cache");// 返回一个jpegresponse.setContentType("image/jpeg");// 为图像创建文本String capText = captchaProducer.createText();// 将文本存储在会话中session.setAttribute(Constants.KAPTCHA_SESSION_KEY, capText);// 用文本创建图像BufferedImage bi = captchaProducer.createImage(capText);ServletOutputStream out = response.getOutputStream();// 导出数据ImageIO.write(bi, "jpg", out);try {out.flush();} finally {out.close();}return null;}
}

上面代码看不懂的，去学学IO流！

第四步：后台登录Controller

image-20220207142646169

package com.example.demo.kaptcha;import com.google.code.kaptcha.Constants;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;@RestControllerpublic class login {@GetMapping("login")public boolean login(HttpServletRequest request, @RequestParam("code") String code) {String sessionCode = (String) request.getSession().getAttribute(Constants.KAPTCHA_SESSION_KEY);if (code.equals(sessionCode)) {
//            验证正常返回truereturn true;} else {
//            验证失败返回falsereturn false;}}
}

第五步：跨域配置webconfig

在demo下创建一个config包添加一个webconfig文件

image-20220207184258232

package com.example.demo.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class webconfig {private CorsConfiguration buildConfig() {CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOriginPattern("*"); // 1允许任何域名使用corsConfiguration.addAllowedHeader("*"); // 2允许任何头corsConfiguration.addAllowedMethod("*"); // 3允许任何方法（post、get等）corsConfiguration.setAllowCredentials(true);//支持安全证书。跨域携带cookie需要配置这个corsConfiguration.setMaxAge(3600L);//预检请求的有效期，单位为秒。设置maxage，可以避免每次都发出预检请求return corsConfiguration;}@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", buildConfig()); // 4return new CorsFilter(source);}

第六步：测试

运行项目：

image-20220207184316484

image-20220207143129145

1、获得图片

在浏览器中输入：http://localhost:8080/getimg

image-20220207143215478

2、验证校验码

在浏览器中输入：http://localhost:8080/login?code=m83v

image-20220207143310876

假如错误

image-20220207143332302

前端

第一步：创建一个network包。并编写封装

image-20220207145200187

import axios from 'axios'
// 运行跨域携带cookie
axios.defaults.withCredentials = true
export function kaptcha(config) {let newVar = axios.create({baseURL: 'http://localhost:8080',timeout:5000});return newVar(config);
}

第二步，编写页面

我就在vue原有的helloworld.vue的页面上改，删除里面原有的div。

image-20220207145740945

<template><div><h1>图像验证码</h1><img src="http://localhost:8080/getimg" id="images" @click="replace"><br><input size="20" placeholder="请输入验证码" id="input" /><br><button @click="click">验证</button><br><a>判断结果：{{this.$data.message}}</a></div></template><script>
import {kaptcha} from "@/network/kaptcha";export default {name: 'HelloWorld',data(){return{data:'',message:''}},methods:{replace(){document.getElementById("images").src="http://localhost:8080/getimg";},click(){this.$data.data=document.getElementById("input").value;kaptcha({url:'login',params:{code:this.$data.data},}).then(res=>{this.$data.message=res.data}).catch(err=>{this.$data.message=err.data})}}
}
</script><style scoped></style>

第三步，测试

正确返回true

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XslpgDpc-1644230852718)(C:\Users\xinji\AppData\Roaming\Typora\typora-user-images\image-20220207184548616.png)]

错误返回false

image-20220207184602207

本片注意,跨域问题!!!

这篇关于Kaptcha验证码（springboot后端加vue前端简单实列）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/682214。

相关文章

Spring Boot整合Redis注解实现增删改查功能(Redis注解使用)

Spring Boot整合Redis注解实现增删改查功能(Redis注解使用)

《SpringBoot整合Redis注解实现增删改查功能(Redis注解使用)》文章介绍了如何使用SpringBoot整合Redis注解实现增删改查功能,包括配置、实体类、Repository、Se... 目录配置Redis连接定义实体类创建Repository接口增删改查操作示例插入数据查询数据删除数据更
阅读更多...
Java Lettuce 客户端入门到生产的实现步骤

Java Lettuce 客户端入门到生产的实现步骤

《JavaLettuce客户端入门到生产的实现步骤》本文主要介绍了JavaLettuce客户端入门到生产的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目录1 安装依赖MavenGradle2 最小化连接示例3 核心特性速览4 生产环境配置建议5 常见问题
阅读更多...
Java使用Swing生成一个最大公约数计算器

Java使用Swing生成一个最大公约数计算器

《Java使用Swing生成一个最大公约数计算器》这篇文章主要为大家详细介绍了Java使用Swing生成一个最大公约数计算器的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下... 目录第一步：利用欧几里得算法计算最大公约数欧几里得算法的证明情形 1：b=0情形 2：b>0完成相关代码第二步：加
阅读更多...
Java 的ArrayList集合底层实现与最佳实践

Java 的ArrayList集合底层实现与最佳实践

《Java的ArrayList集合底层实现与最佳实践》本文主要介绍了Java的ArrayList集合类的核心概念、底层实现、关键成员变量、初始化机制、容量演变、扩容机制、性能分析、核心方法源码解析、... 目录1. 核心概念与底层实现1.1 ArrayList 的本质1.1.1 底层数据结构JDK 1.7
阅读更多...
Java Map排序如何按照值按照键排序

Java Map排序如何按照值按照键排序

《JavaMap排序如何按照值按照键排序》该文章主要介绍Java中三种Map（HashMap、LinkedHashMap、TreeMap）的默认排序行为及实现按键排序和按值排序的方法,每种方法结合实... 目录一、先理清 3 种 Map 的默认排序行为二、按「键」排序的实现方式1. 方式 1：用 TreeM
阅读更多...
Java中流式并行操作parallelStream的原理和使用方法

Java中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流（parallelStream）的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS
阅读更多...
Java中Redisson 的原理深度解析

Java中Redisson 的原理深度解析

《Java中Redisson的原理深度解析》Redisson是一个高性能的Redis客户端,它通过将Redis数据结构映射为Java对象和分布式对象,实现了在Java应用中方便地使用Redis,本文... 目录前言一、核心设计理念二、核心架构与通信层1. 基于 Netty 的异步非阻塞通信2. 编解码器三、
阅读更多...
SpringBoot基于注解实现数据库字段回填的完整方案

SpringBoot基于注解实现数据库字段回填的完整方案

《SpringBoot基于注解实现数据库字段回填的完整方案》这篇文章主要为大家详细介绍了SpringBoot如何基于注解实现数据库字段回填的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解... 目录数据库表pom.XMLRelationFieldRelationFieldMapping基础的一些代
阅读更多...
一篇文章彻底搞懂macOS如何决定java环境

一篇文章彻底搞懂macOS如何决定java环境

《一篇文章彻底搞懂macOS如何决定java环境》MacOS作为一个功能强大的操作系统,为开发者提供了丰富的开发工具和框架,下面：本文主要介绍macOS如何决定java环境的相关资料,文中通过代码... 目录方法一：使用 which命令方法二：使用 Java_home工具（Apple 官方推荐）那问题来了，
阅读更多...
Java HashMap的底层实现原理深度解析

Java HashMap的底层实现原理深度解析

《JavaHashMap的底层实现原理深度解析》HashMap基于数组+链表+红黑树结构,通过哈希算法和扩容机制优化性能,负载因子与树化阈值平衡效率,是Java开发必备的高效数据结构,本文给大家介绍... 目录一、概述：HashMap的宏观结构二、核心数据结构解析1. 数组（桶数组）2. 链表节点（Node
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2