Vue前端中从后端获取图片验证码

  • 前端发送请求
<template><el-form :model="user" :rules="rules" ref="userForm" class="login" label-width="auto" style="max-width: 600px"><el-form-item label="用户名" prop="name" ><el-input v-model="user.name" id="name" placeholder="请输入用户名" /></el-form-item><el-form-item label="密码" prop="pass"><el-input v-model="user.pass" id="pass" placeholder="请输入密码"/></el-form-item><el-form-item label="验证码" prop="captcha"><el-input v-model="user.captcha" id="captcha" placeholder="请输入验证码"/><img :src="captchaUrl" alt="验证码" @click="refreshCaptcha"></el-form-item><el-form-item><el-button type="primary" @click="onSubmit" class="btn">登录</el-button></el-form-item></el-form>
</template><script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import Schema from "async-validator";
import {ElMessage} from "element-plus";
import axios from "axios";
// 响应式的对象
const user = reactive({name: '',pass: '',captcha:''
})// 设置验证规则
const rules = {name: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' },],pass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}//  创建对表单的引用
const userForm = ref(null);// 点击登录按钮的时候,验证是否满足rules规则
const onSubmit = () => {if (userForm.value){userForm.value.validate((valid: boolean)=>{if (valid){//验证通过,执行登录逻辑console.log(user);ElMessage.success("登录成功")}else {//表单验证未通过,显示错误信息ElMessage.error("请检查输入的内容")return false}})}
}// 验证码
// 使用 ref 创建响应式数据
const captchaUrl =  ref('');
// 刷新验证码
const refreshCaptcha = ()=>{axios.get('http://localhost:8080/captcha',{responseType : 'blob'}).then(response =>{captchaUrl.value = URL.createObjectURL(new Blob([response.data]));}).catch(error=>{console.log("获取验证码失败",error)})
}// 组件挂载时加载验证码
onMounted(()=>{refreshCaptcha();
})
</script>
  • 后端响应
@RestController
@Slf4j
public class LoginController {//获取验证码@CrossOrigin@GetMapping("/captcha")public void captcha(HttpServletResponse response, HttpServletRequest request) throws IOException {SpecCaptcha captcha = new SpecCaptcha(150,40);String text = captcha.text();captcha.out(response.getOutputStream());}}
  • 解决跨域
package com.kfm.bisheserve.config;import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;/*** @author 27359* date:2024/5/29*/
public class CorsWebMvcConfig implements WebMvcConfigurer {
//    配置CORS映射@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")  //这个映射适用于所有URL模式(/**),表示对于所有请求,都应用这个CORS配置.allowedOriginPatterns("/**")  //这意味着允许所有域名的请求访问你的后端服务。.allowedMethods("*")  //这意味着允许所有类型的HTTP请求(如GET、POST、PUT、DELETE等)。.allowCredentials(true) //这通常与Access-Control-Allow-Origin响应头一起使用,以允许跨域请求携带cookie。.maxAge(3600)  //这意味着浏览器可以缓存预检请求的结果,避免在每次跨域请求时都发送预检请求.allowedHeaders("*"); //这意味着允许所有类型的请求头。}
}

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

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

相关文章

SqlServer还原系统库步骤及问题解决

还原master 需要切换到binn目录 Cd C:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\Binn 关闭服务 用单用户模式启动 SQL Server 默认实例 sqlservr.exe -m 直接单用户登录 恢复master备份文件 RESTORE DATABASE master FROM DISK E:\dbbak\txic_ke…

react 表格实现拖拽功能

项目背景 : react ant 单纯实现拖拽确实不难 , 我的需求是根据后台接口返回 , 生成对应的父子表格 , 并只可以拖拽子的位置 , 如图 后台返回的数据结构 (pid为0说明是父 , 子的pid等于父的id , 说明是父的子) 1 , 我先转成了树形结构且自己加上了key (注意 : key一定得是唯一的…

Resilience4j结合微服务出现的异常

Resilience4j结合微服务出现的异常 1、retry未生效 由于支持aop&#xff0c;所以要引入aop的依赖。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId> </dependency>2、circ…

gamit前导软件linus的root账号登录

1computer---etc- --lightdm-- 2进入超级管理员 gedit ./lightdm.conf [SeatDefaults] greeter-sessionunity-greeter user-sessionubuntu greeter-show-manual-logintrue allow-guestfalse 保存文档&#xff0c;关闭文档 3删除文档 users.conf删除 rm -f users.conf 4…

6. C++通过fork的方式实现高性能网络服务器

我们上一节课写的tcp我们发现只有第一个与之连接的人才能收发信息。他又很多的不足 高性能网络服务器 通过fork实现高性能网络服务器 我们通过fork进行改装之后就可以成百上千的用户进行连接访问&#xff0c;对于每一个用户来说我们都fork一个子进程。让后让每一个子进程都是…

人大金仓数据库大小写不敏感确认

1、图形化确认(管理—其他选项—预设选项) 2、命令行确认 # ksql -p 54321 -U system test # show enable_ci; 查看是否大小写敏感&#xff0c;on表示大小敏感&#xff0c;off表示大小写不敏感&#xff0c;使用某些项目的时候&#xff0c;需要设置数据库大小写不敏感&#…

C#发票查验接口提升财税服务效率与透明度

在传统模式下&#xff0c;代理记账工作往往涉及大量手工录入和核对发票信息的过程&#xff0c;不仅耗时费力&#xff0c;还容易出现人为错误。为解决这一行业痛点&#xff0c;翔云人工智能开放平台积极探索金融科技应用&#xff0c;提供了发票查验接口&#xff0c;实现发票信息…

全网唯一:触摸精灵iOS版纯离线本地文字识别插件

目的 触摸精灵iOS是一款可以模拟鼠标和键盘操作的自动化工具。它可以帮助用户自动完成一些重复的、繁琐的任务&#xff0c;节省大量人工操作的时间。但触摸精灵的图色功能比较单一&#xff0c;无法识别屏幕上的图像&#xff0c;根据图像的变化自动执行相应的操作。本篇文章主要…

【TB作品】msp430f5529单片机墨水屏,口袋板,显示温度和万年历,tmp421温度,RTC时间

文章目录 一、部分程序二、展示三、全部代码下载 一、部分程序 int main(void) {WDTCTL WDTPW | WDTHOLD; //关闭看门狗init(); //屏幕初始化InitIIC(); //I2C初始化TMP_Init(); //tmp421初始化SetupRTC();_EINT();while (1){} }#pragma vectorRT…

ES升级--04--SpringBoot整合Elasticsearch

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 SpringBoot整合Elasticsearch1.建立项目2.Maven 依赖[ES 官方网站&#xff1a;https://www.elastic.co/guide/en/elasticsearch/client/java-rest/6.8/index.html](…

Leetcode:整数反转

题目链接&#xff1a;7. 整数反转 - 力扣&#xff08;LeetCode&#xff09; 普通版本&#xff08;翻转字符串&#xff09; class Solution { public:int reverse(int x) {//将整数变成字符串string sto_string(x);int flag0;//flag用于标识原来的整数是否为负//去掉负号if(s[…

Go 语言中基础数据类型、运算符、类型转换与类型别名

在编程语言中&#xff0c;数据类型是程序设计的基石&#xff0c;它们决定了变量的存储方式、允许的操作以及运算结果。在 Go 语言中&#xff0c;数据类型丰富而灵活&#xff0c;提供了强大的工具来处理各种数据和运算需求。无论是简单的布尔值、整型和浮点型&#xff0c;还是复…

Wireshark Lua插件入门

摘要 开发中经常通过抓包分析协议&#xff0c;对于常见的协议如 DNS wireshark 支持自动解析&#xff0c;便于人类的理解&#xff0c;对于一些私有协议&#xff0c;wireshark 提供了插件的方式自定义解析逻辑。 1 动手 废话少说&#xff0c;直接上手。 第一步当然是装上wiresh…

RUST运算符重载

在 Rust 中&#xff0c;可以使用特征&#xff08;traits&#xff09;来实现运算符重载。运算符重载是通过实现相应的运算符特征&#xff08;如 Add、Sub、Mul 等&#xff09;来完成的。这些特征定义在 std::ops 模块中。下面是一个简单的示例&#xff0c;展示如何为一个自定义结…

人工智能学习笔记(2):认识和安装Stable Diffusion

人工智能学习笔记&#xff08;2&#xff09;&#xff1a;认识和安装Stable Diffusion 文章目录 人工智能学习笔记&#xff08;2&#xff09;&#xff1a;认识和安装Stable DiffusionStable Diffusion的起源和发展历程Stable Diffusion的应用场景基本原理文本到图像的转换过程潜…

KIBANA的安装教程(超详细)

前言 Kibana 是一个开源的基于浏览器的可视化工具&#xff0c;主要用于分析和展示存储在 Elasticsearch 索引中的数据。它允许用户通过各种图表、地图和其他可视化形式来探索和理解大量数据。Kibana 与 Elasticsearch 和 Logstash 紧密集成&#xff0c;共同构成了所谓的 ELK 堆…

【天翼云】诚聘 高级运营工程师(安全)

工作地址&#xff1a;成都、北京 岗位薪资&#xff1a;面议 职位详情&#xff1a; 1、负责信息安全监管部门、內控合规部门的统一对口与联络, 落实信息安全监管要求和报送。 2、牵头组织落实信息科技监管评级、内外部审计检查中发现信息安全问题, 跟踪和督促问题整改。 3、负责…

安卓手机APP开发____持久性工作

安卓手机APP开发____持久性工作 概述 如果工作始终要通过应用重启和系统重新启动来调度&#xff0c;便是持久性的工作。 WorkManager 是适用于持久性工作的推荐解决方案。 由于大多数后台处 理操作都是通过持久性工作完成的&#xff0c;因此 WorkManager 通常也是后台处理 的…

【Linux】 深入讲解自动化构建工具

各位大佬好 &#xff0c;这里是阿川的博客&#xff0c;祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 Linux一系列的文章&#xff08;质量分均在93分 以…

nessus plugins目录为空的问题

想要避免这种问题&#xff0c;可以将nessus服务设置为手动&#xff0c;并且先停止nessus服务。 批处理脚本&#xff1a; 下面的/~/Nessus/plugin_feed_info.inc替换成你配置好的 plugin_feed_info.inc 所在的路径 service nessusd stop; cp /~/Nessus/plugin_feed_info.inc …