2、图形验证码

1、图形验证码设计

1.1思路

        现今,市面上的图形验证码付费的,免费的多种多样,主要形式有滑动拼图、文字点选、语序点选、字体识别、空间推理、智能随机等。

        而处理也分为web端和sever端两部分

        此处以免费的kaptcha 为例,进行数字图形验证码的解析

2、server 端

2.1 controller 

@RestController
@Slf4j
@RequestMapping("/sys")
public class SysLoginController {@Resourceprivate ISysCaptchaService sysCaptchaService;@GetMapping("/captcha/{uuid}")public void captcha(HttpServletResponse response, @PathVariable("uuid") String uuid) throws IOException {response.setHeader("Cache-Control", "no-store, no-cache");response.setContentType("image/jpeg");//获取图片验证码BufferedImage image = sysCaptchaService.getCaptcha(uuid);ServletOutputStream out = response.getOutputStream();ImageIO.write(image, "jpg", out);IOUtils.closeQuietly(out);}}

2.2 service

public interface ISysCaptchaService extends IService<SysCaptcha> {/*** 获取图片验证码** @param uuid uuid* @return Image*/BufferedImage getCaptcha(String uuid);
}

2.3 serviceImpl

//此处引入了kaptcha的Producer
import com.google.code.kaptcha.Producer;@Service
public class SysCaptchaServiceImpl extends ServiceImpl<SysCaptchaMapper, SysCaptcha> implements ISysCaptchaService {@Resourceprivate Producer producer;@Overridepublic BufferedImage getCaptcha(String uuid) {if (StrUtil.isBlank(uuid)) {throw new RuntimeException("uuid不能为空");}//生成文字验证码String code = producer.createText();SysCaptcha captchaEntity = new SysCaptcha();captchaEntity.setUuid(uuid);captchaEntity.setCode(code);//5分钟后过期captchaEntity.setExpireTime(DateUtil.offset(DateUtil.date(), DateField.MINUTE, 5).toLocalDateTime());//将数据写入数据库,此处最好可以写入到redis等缓存中,不需要过期手动处理this.save(captchaEntity);return producer.createImage(code);}
}

2.4 配置KaptchaConfig

@Configuration
public class KaptchaConfig {@Beanpublic DefaultKaptcha producer() {Properties properties = new Properties();properties.put("kaptcha.border", "no");properties.put("kaptcha.textproducer.font.color", "black");properties.put("kaptcha.textproducer.char.space", "5");properties.put("kaptcha.textproducer.font.names", "Arial,Courier,cmr10,宋体,楷体,微软雅黑");Config config = new Config(properties);DefaultKaptcha defaultKaptcha = new DefaultKaptcha();defaultKaptcha.setConfig(config);return defaultKaptcha;}
}

不进行config配置时,会报如下异常

**************************
APPLICATION FAILED TO START
***************************
Description:
A component required a bean of type 'com.google.code.kaptcha.Producer' that could not be found.Action:
Consider defining a bean of type 'com.google.code.kaptcha.Producer' in your configuration.

2.5 pom.xml

    <properties><kaptcha.version>2.3.5</kaptcha.version></properties><dependencies><dependency><groupId>com.youkol.support.kaptcha</groupId><artifactId>kaptcha-spring-boot-starter</artifactId><version>${kaptcha.version}</version></dependency></dependencies>

2.6 数据库表

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;-- ----------------------------
-- Table structure for sys_captcha
-- ----------------------------
DROP TABLE IF EXISTS `sys_captcha`;
CREATE TABLE `sys_captcha`  (`uuid` char(36) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT 'uuid',`code` varchar(6) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '验证码',`expire_time` datetime NULL DEFAULT NULL COMMENT '过期时间',PRIMARY KEY (`uuid`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '系统验证码' ROW_FORMAT = Dynamic;SET FOREIGN_KEY_CHECKS = 1;

2.7 测试

3、web端

3.1 vue3 安装 uuid 小插件

3.1.1 安装

pnpm add vue3-uuid

如果pnpm安装异常

切换pnpm源

pnpm config set registry https://registry.npmmirror.com //切换淘宝源 

3.1.2 main.ts中引入

import { createApp } from 'vue'import App from './App.vue'
import router from './router'
import pinia from '@/stores'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//@ts-expect-error忽略当前文件ts类型的检测否则有红色提示(打包会失败)
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import 'virtual:svg-icons-register'
import '@/styles/index.scss'
//使用UUID
import UUID from 'vue3-uuid'const app = createApp(App)app.use(pinia)
app.use(router)
app.use(UUID)
app.use(ElementPlus, {'locale': zhCn
})app.mount('#app')

3.1.3 使用

import { uuid } from 'vue3-uuid'const getCaptcha = () => {const id = uuid.v4()console.log('@@@@', id)
}

3.2 加载验证码

3.2.1 Template

<template><div class="container"><el-row><el-col :span="12" :xs="0"></el-col><el-col :span="12" :xs="24"><el-formclass="login_form":model="userStore.user":rules="loginRules"ref="loginForm"><h1>欢迎登录{{ setting.title }}</h1><el-form-item><el-inputv-model="userStore.user.username"placeholder="请输入用户名"prefix-icon="User"></el-input></el-form-item><el-form-item><el-inputv-model="userStore.user.password"placeholder="请输入密码"prefix-icon="Lock"show-password></el-input></el-form-item><div class="captcha"><el-form-item><el-input type="text" placeholder="请输入验证码"></el-input></el-form-item><el-form-item><el-image :src="captchaUrl" @click="getCaptcha" style="width: 150px;height: 30px"></el-image><el-button style="width: 150px;" @click="refresh">刷新</el-button></el-form-item></div><div class="class-btn"><el-button type="primary" @click="login">登录</el-button><el-button type="primary" @click="register">注册</el-button></div></el-form></el-col></el-row></div>
</template>

3.2.2 script

<script setup lang="ts">
import { uuid } from 'vue3-uuid'let captchaUrl = ref('')
const getCaptcha = async () => {const id = uuid.v4()console.log(id)captchaUrl.value = import.meta.env.VITE_SERVER + '/sys/captcha/' + id
}
const refresh = () => {getCaptcha()
}onMounted(() => {getCaptcha()
})</script>

3.2.3 加载结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/42071.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电机控制杂谈——增量式的预测电流控制的优势在哪?

1.前言 前几天看到这么个问题。“模型预测控制如何消除静态误差” 评论说用增量式的预测控制。 这个回答让我想起来我大四下看的这篇论文。现在都一百多被引用了。 但是苦于当时能力有限&#xff0c;没办法复现这个文章。 所以现在想重新验证一下。 2.静态误差和电机磁链有…

36.哀家要长脑子了!--高精度的+-*/

1.791. 高精度加法 - AcWing题库 思路&#xff1a;把大数的每一位数当作数组的元素存入到数组中。倒序存储也是说&#xff0c;个位放在下标为0 的位置&#xff0c;然后每一位两两操作&#xff0c;做好进位的工作。 // C A B vector<int> add(vector<int>…

Spring Boot手写starter

目录 1.介绍1.1 什么是 Starter 机制&#xff1f;1.2 Starter 机制的工作原理&#xff1f; 2.starter自定义2.1 新建工程2.2 自定义注解2.3 创建增强类2.4 创建自动配置类2.5 配置自动配置2.6 测试 1.介绍 1.1 什么是 Starter 机制&#xff1f; Starter 机制是 Spring Boot 提…

BulingBuling - 作息安排 [Reset Your Routine] - 1

The Blinkist Team: [ Reset Your Routine ] 如果你发现自己很难按部就班&#xff0c;或者陷入工作效率低的困境&#xff0c;那么你可能需要重新调整一下作息时间&#xff01;从睡眠和营养&#xff0c;到待办事项和井井有条--本指南为你提供了各种技巧和策略&#xff0c;让你的…

自然之美无需雕琢

《自然之美&#xff0c;无需雕琢 ”》在这个颜值至上的时代&#xff0c;但在温馨氛围中&#xff0c;单依纯以一种意想不到的方式&#xff0c;为我们诠释了自然之美的真谛。而医生的回答&#xff0c;如同一股清流耳目一新。“我说医生你看我这张脸&#xff0c;有没有哪里要动的。…

【数据结构(邓俊辉)学习笔记】高级搜索树01——伸展树

文章目录 1. 逐层伸展1. 1 宽松平衡1. 2 局部性1. 3 自适应调整1. 4 逐层伸展1. 5 实例1. 6 一步一步往上爬1. 7 最坏情况 2. 双层伸展2.1 双层伸展2.2 子孙异侧2.3 子孙同侧2.4 点睛之笔2.5 折叠效果2.6 分摊性能2.7 最后一步 3 算法实现3.1 功能接口3.2 伸展算法3.3 四种情况…

linux下的网络编程

网络编程 1. 网络基础编程知识1.1网络字节序问题1.2 常用socket编程接口1.2.1 sockaddr1.2.2 ip地址转换函数1.2.4 socket()1.2.3 bind()1.2.4 listen()1.2.5 accept()1.2.6 connect() 1.3 以udp为基础的客户端连接服务器的demo1.4 以udp为基础的的服务器聊天室功能demo1.5 基于…

Spark SQL----内置函数Conversion Functions Conditional Functions

Spark SQL----内置函数Conversion Functions& Conditional Functions Conversion Functions 例子&#xff1a; -- cast SELECT cast(10 as int); --------------- |CAST(10 AS INT)| --------------- | 10| ---------------Conditional Functions 例子&#x…

Apispec,一个用于生成 OpenAPI(Swagger)规范的 Python 库

目录 01什么是 Apispec&#xff1f; 为什么选择 Apispec&#xff1f; 安装与配置 02Apispec 的基本用法 生成简单的 API 文档 1、创建 Apispec 实例 2、定义 API 路由和视图 3、添加路径到 Apispec 集成 Flask 和 Apispec 1、安装…

Spring Boot与Jenkins的集成

Spring Boot与Jenkins的集成 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 一、引言 Jenkins作为一个开源的持续集成&#xff08;CI&#xff09;和持续交付…

计算机行业现状分析与发展前景

一、行业竞争现状 技术创新不断涌现&#xff1a;计算机行业在技术创新方面取得了长足的进步&#xff0c;如云计算、大数据、人工智能、物联网等前沿技术不断涌现&#xff0c;这些技术不仅推动了行业的快速发展&#xff0c;也为传统产业的转型升级提供了有力支撑。 行业竞争日益…

Linux开发:进程间通过Unix Domain Socket传递数据

进程间传递数据的方式有很多种,Linux还提供一种特殊的Socket用于在多进程间传递数据,就是Unix Domain Socket(UDS)。 虽然通过普通的Socket也能做到在多进程间传递数据,不过这样需要通过协议栈层的打包与拆包,未免有些浪费效率,通过UDS,数据仅仅通过一个特殊的sock文件…

熔断降级处理

什么是熔断降级 微服务雪崩效应 当微服务运行不正常&#xff0c;会导致无法正常调用微服务&#xff0c;此时会出现异常&#xff0c;如果这种异常不去处理&#xff0c;可能会导致雪崩效应 微服务的雪崩效应表现在服务与服务之间调用&#xff0c;当其中一个服务无法提供服务时…

FreeU: Free Lunch in Diffusion U-Net——【代码复现】

这篇文章发表于CVPR 2024&#xff0c;官网地址&#xff1a;ChenyangSi/FreeU: FreeU: Free Lunch in Diffusion U-Net (CVPR2024 Oral) (github.com) 一、环境准备 提前准备好python、pytorch环境 二、下载项目依赖 demo下有一个requirements.txt文件&#xff0c; pip inst…

Symfony框架:优雅构建PHP应用的强有力工具

在PHP开发的广阔天地中&#xff0c;Symfony框架以其高性能、高安全性和组件化的特点&#xff0c;成为了构建现代Web应用的热门选择。Symfony是一个基于MVC&#xff08;模型-视图-控制器&#xff09;模式的全栈框架&#xff0c;提供了一套丰富的功能和工具&#xff0c;帮助开发者…

【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第55课-芝麻开门(语音 识别 控制3D纪念馆开门 和 关门)

【WEB前端2024】3D智体编程&#xff1a;乔布斯3D纪念馆-第55课-芝麻开门&#xff08;语音识别控制3D纪念馆开门和关门&#xff09; 使用dtns.network德塔世界&#xff08;开源的智体世界引擎&#xff09;&#xff0c;策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtn…

2.pwn的linux基础(计算机内部数据结构存储形式)

linux基础 保护层级: 分为四个ring0-ring3 一般来说就两个&#xff0c;0和3 0为内核 3为用户 权限: 用户分为多个组 文件和目录等等的权限一般都是三个&#xff0c;即可读可写可执行。 读:R&#xff0c;写:W&#xff0c;执行:X 赋予一个可执行文件执行权限就是chmod x file…

qt 如何添加子项目

首先我们正常流程创建一个项目文件&#xff1a; 这是我已经创建好的&#xff0c;请无视红线 然后找到该项目的文件夹&#xff0c;在文件夹下创建一个文件夹&#xff0c;再到创建好的文件夹下面创建一个 .pri 文件&#xff1a; &#xff08;创建文件夹&#xff09; &#xff08…

字节跳动与南开联合开源 StoryDiffusion:一键生成漫画和视频故事的神器!完全免费!

大家好&#xff0c;我是程序员X小鹿&#xff0c;前互联网大厂程序员&#xff0c;自由职业2年&#xff0c;也一名 AIGC 爱好者&#xff0c;持续分享更多前沿的「AI 工具」和「AI副业玩法」&#xff0c;欢迎一起交流~ 漫画&#xff0c;是多少人童年的回忆啊&#xff01; 记得小学…

#数据结构 链式栈

1. 概念 链式栈LinkStack 逻辑结构&#xff1a;线性结构物理结构&#xff1a;链式存储栈的特点&#xff1a;后进先出 栈具有后进先出的特点&#xff0c;我们使用链表来实现栈&#xff0c;即链式栈。那么栈顶是入栈和出栈的地方&#xff0c;单向链表有头有尾&#xff0c;那我…