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

  • 前端发送请求
html 复制代码
<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>
  • 后端响应
java 复制代码
@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());
    }

}
  • 解决跨域
java 复制代码
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映射
    @Override
    public 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("*"); //这意味着允许所有类型的请求头。
    }
}
相关推荐
blackorbird17 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者18 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强18 小时前
Chrome和IE获取本机ip地址
前端
天***889618 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*18 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls19 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友19 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵19 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机20 小时前
Promise 常见面试题(持续更新中)
前端·javascript
潘小安20 小时前
跟着 AI 学 (一)- shell 脚本
前端·ci/cd·vibecoding