前后端开发-springboot项目/java搭配vue获取谷歌验证码

效果如上

1.添加依赖

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

2.在登录接收参数列表中添加code

@TableField(exist = false)
private String code;//验证码

3.验证码样式配置

import com.google.code.kaptcha.impl.DefaultKaptcha;
import com.google.code.kaptcha.util.Config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;import java.util.Properties;/*** 谷歌图形验证码配置类* <p>* Created by HMF on 2021/07/24 21:44*/
@Configuration  // 配置了的@Configuration注解不要忘记了
public class CaptchaConfig {/*** 配置直接copy文档的* DefaultKaptcha 验证码生成器** @return*/@Bean   // @Bean注解，返回的对象交给IOC处理public DefaultKaptcha defaultKaptcha() {// 验证码生成器DefaultKaptcha defaultKaptcha = new DefaultKaptcha();// 配置Properties properties = new Properties();//是否有边框properties.setProperty("kaptcha.border", "yes");// 设置边框颜色properties.setProperty("kaptcha.border.color", "105,179,90");// 边框粗细度，默认为1// properties.setProperty("kaptcha.border.thickness","1");// 验证码properties.setProperty("kaptcha.session.key", "code");// 验证码文本字符颜色 默认为黑色properties.setProperty("kaptcha.textproducer.font.color", "blue");// 设置字体样式properties.setProperty("kaptcha.textproducer.font.names", "宋体,楷体,微软雅黑");// 字体大小，默认40properties.setProperty("kaptcha.textproducer.font.size", "30");// 验证码文本字符内容范围 默认为abced2345678gfynmnpwx// properties.setProperty("kaptcha.textproducer.char.string", "");// 字符长度，默认为5properties.setProperty("kaptcha.textproducer.char.length", "4");// 字符间距 默认为2properties.setProperty("kaptcha.textproducer.char.space", "4");//验证码图片宽度 默认为200properties.setProperty("kaptcha.image.width", "100");// 验证码图片高度 默认为40properties.setProperty("kaptcha.image.height", "40");Config config = new Config(properties);defaultKaptcha.setConfig(config);return defaultKaptcha;}
}

上面的配置可以根据自己的个人喜好更改

4.验证码请求接口

import com.google.code.kaptcha.impl.DefaultKaptcha;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import javax.imageio.ImageIO;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.image.BufferedImage;
import java.io.IOException;/*** 谷歌验证码接口Controller* <p>* Created by HMF on 2021/07/24 21:51*/
@RestController
public class CaptchaController {@Autowiredprivate DefaultKaptcha defaultKaptcha;@GetMapping(value = "/captcha", produces = "image/jpeg")public void captcha(HttpServletRequest request, HttpServletResponse response) {// 返回的是一个图形验证码，通过流的方式直接传一个正常的图片过去// 那么响应头需要做一些处理，这里处理基本上来说固定的// 定义response输出类型为image/jpeg类型response.setDateHeader("Expires", 0);// Set standard HTTP/1.1 no-cache headers.response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");// Set IE extended HTTP/1.1 no-cache headers (use addHeader).response.addHeader("Cache-Control", "post-check=0, pre-check=0");// Set standard HTTP/1.0 no-cache header.response.setHeader("Pragma", "no-cache");// return a jpegresponse.setContentType("image/jpeg");//-------------------生成验证码 begin --------------------------// 获取验证码文本内容String text = defaultKaptcha.createText();System.out.println("验证码内容：" + text);// 将验证码放入session中request.getSession().setAttribute("captcha", text);// 根据文本内容创建图形验证码BufferedImage image = defaultKaptcha.createImage(text);ServletOutputStream outputStream = null;try {outputStream = response.getOutputStream();// 输出流输出图片，格式jpgImageIO.write(image, "jpg", outputStream);outputStream.flush();} catch (IOException e) {e.printStackTrace();} finally {if (null != outputStream) {try {outputStream.close();} catch (IOException e) {e.printStackTrace();}}}//-------------------生成验证码 end ----------------------------}
}

5.前端请求

data

captchaUrl: '/captcha?time=' + new Date(),

这里做了一个点击事件

 // 点击更换验证码updateCaptcha() {this.captchaUrl = '/captcha?time=' + new Date();},

需要注意的是，如果你的项目中设置了登录限制，我们放行的路径需要放上

"/captcha",

前后端开发-springboot项目/java搭配vue获取谷歌验证码相关推荐

基于Springboot+vue前后端分离的项目--后端笔记
效果图: 1.前言从零开始搭建一个项目最重要的是选择一个自己熟悉的框架,此项目使用Springboot框架来构建后端结构,使用vue来构建前端页面.数据层我们常用的是Mybatis,这里我大部分使 ...
laravel + Vue 前后端分离之项目配置 - 开发环境
既然你来到查看这篇文章,那么你应该知道PHP 版本 >=7. 接着看一下目录 |-blog |-- api |-- front 目录外部很简单,,不多说了,赶紧看重点配置Laravel 作为前 ...
Element-UI + Vue.js + SpringBoot 实现前后端分离入门项目
Element UI 项目简介与演示刷新页面时让组件默认为当前路由路径删除时确认分页功能的实现 el-date-picke 日期少一天前端部分源码:https://github.com/szl ...
网易音乐网站系统|前后端分离springboot+vue实现在线音乐网站
作者主页:编程千纸鹤作者简介:Java.前端.Python开发多年,做过高程,项目经理,架构师主要内容:Java项目开发.毕业设计开发.面试技术整理.最新技术分享收藏点赞不迷路关注作者有好处 ...
前后端分离(SpringBoot+Vue)-基础的权限管理系统
前后端分离(SpringBoot+Vue)-基础的权限管理系统简介前端项目代码地址:前端代码后端项目代码地址:后端代码最后的附录记录了自己在开发过程遇到问题及实现.部分文件的介绍采用前后端分 ...
JAVA外卖项目第九天前后端分离和项目部署优化
瑞吉外卖项目优化-Day03 课程内容前后端分离开发 Yapi Swagger 项目部署前言当前项目中,前端代码和后端代码混合在一起,是存在问题的,存在什么问题呢? 主要存在以下几点问题: 1) ...
实战react技术栈+express前后端博客项目（8）-- 前端管理界面标签管理+后端对应接口开发...
项目地址:https://github.com/Nealyang/R... 本想等项目做完再连载一波系列博客,随着开发的进行,也是的确遇到了不少坑,请教了不少人.遂想,何不一边记录踩坑,一边分享收获呢 ...
前后端分离及项目开发流程
前后端分离开发流程新框架前后端完全分离,后端基于SpringBoot提供 ResultFul的接口服务,前端是基于Layui的全静态页面,这样就对我们的开发流程提出新的要求. 后端人员:按照约定提供 ...
前后端分离的项目部署到tomcat_如何在开发时部署和运行前后端分离的JavaWeb项目...
在开发中大型的JavaEE项目时,前后端分离的框架逐渐成为业界的主流,传统的单机部署前后端在同一个项目中的工程项目越来越少.这类JavaWeb项目的后端通常都采用微服务的架构,后端会被分解为诸多个小项 ...

前后端开发-springboot项目/java搭配vue获取谷歌验证码

前后端开发-springboot项目/java搭配vue获取谷歌验证码相关推荐

最新文章

热门文章