SpringBoot+vue實(shí)現(xiàn)登錄圖片驗(yàn)證碼

要在Spring Boot和Vue中實(shí)現(xiàn)登錄時(shí)的圖片驗(yàn)證碼功能，可以按照以下步驟進(jìn)行操作：
后端（Spring Boot）實(shí)現(xiàn)：
添加相關(guān)依賴：在
pom.xml文件中添加以下依賴：

<dependency>
    <groupId>nl.captcha</groupId>
    <artifactId>simplecaptcha</artifactId>
    <version>1.2.2</version>
</dependency>

創(chuàng)建一個(gè)驗(yàn)證碼生成器：創(chuàng)建一個(gè)CaptchaGenerator類，用于生成驗(yàn)證碼圖片。

import nl.captcha.Captcha;
import nl.captcha.backgrounds.FlatColorBackgroundProducer;
import nl.captcha.gimpy.DropShadowGimpyRenderer;
import nl.captcha.text.producer.DefaultTextProducer;
import nl.captcha.text.renderer.DefaultWordRenderer;
import org.springframework.stereotype.Component;

import javax.imageio.ImageIO;
import java.awt.*;
import java.io.ByteArrayOutputStream;
import java.io.IOException;

@Component
public class CaptchaGenerator {

    public byte[] generateCaptchaImage(String captchaText) {
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        
        // 創(chuàng)建驗(yàn)證碼圖片對(duì)象
        Captcha captcha = new Captcha.Builder(200, 50)
                .addText(new DefaultTextProducer(), new DefaultWordRenderer())
                .gimp(new DropShadowGimpyRenderer())
                .addBackground(new FlatColorBackgroundProducer(Color.WHITE))
                .build();

        try {
            // 將驗(yàn)證碼圖片寫入輸出流
            ImageIO.write(captcha.getImage(), "png", outputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }

        return outputStream.toByteArray();
    }
}

創(chuàng)建一個(gè)REST API接口：創(chuàng)建一個(gè)
CaptchaController類，用于生成驗(yàn)證碼圖片的API接口。

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@RestController
@RequestMapping("/api/captcha")
public class CaptchaController {

    private final CaptchaGenerator captchaGenerator;

    @Autowired
    public CaptchaController(CaptchaGenerator captchaGenerator) {
        this.captchaGenerator = captchaGenerator;
    }

    @GetMapping
    public void generateCaptcha(HttpServletResponse response) throws IOException {
        // 生成驗(yàn)證碼圖片的方法
        byte[] captchaImage = captchaGenerator.generateCaptchaImage("1234");
        
        // 設(shè)置響應(yīng)的內(nèi)容類型為圖片
        response.setContentType("image/png");
        
        // 將驗(yàn)證碼圖片寫入響應(yīng)輸出流
        response.getOutputStream().write(captchaImage);
    }
}

啟動(dòng)應(yīng)用程序：?jiǎn)?dòng)Spring Boot應(yīng)用程序，確保REST API接口可用。
前端（Vue）實(shí)現(xiàn)：
創(chuàng)建一個(gè)驗(yàn)證碼組件：創(chuàng)建一個(gè)Captcha.vue組件，用于顯示驗(yàn)證碼圖片。

<template>
  <div>
    <!-- 顯示驗(yàn)證碼圖片，點(diǎn)擊圖片刷新驗(yàn)證碼 -->
    <img :src="captchaImage" alt="Captcha" @click="refreshCaptcha" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      captchaImage: "" // 驗(yàn)證碼圖片的URL
    };
  },
  mounted() {
    this.refreshCaptcha(); // 組件掛載時(shí)刷新驗(yàn)證碼
  },
  methods: {
    refreshCaptcha() {
      this.captchaImage = `/api/captcha?t=${Date.now()}`; // 刷新驗(yàn)證碼圖片的URL，添加時(shí)間戳以避免緩存
    }
  }
};
</script>

<style scoped>
img {
  cursor: pointer; // 設(shè)置鼠標(biāo)指針樣式為手型
}
</style>

在登錄頁(yè)面使用驗(yàn)證碼組件：在你的登錄頁(yè)面的代碼中，使用Captcha組件來(lái)顯示驗(yàn)證碼圖片，并在表單中添加一個(gè)輸入框用于用戶輸入驗(yàn)證碼。

<template>
  <div>
    <h1>Login Page</h1>
    <form @submit="submitForm">
      <input type="text" v-model="username" placeholder="Username" />
      <input type="password" v-model="password" placeholder="Password" />
      
      <!-- 顯示驗(yàn)證碼圖片，并添加點(diǎn)擊事件刷新驗(yàn)證碼 -->
      <input type="text" v-model="captcha" placeholder="Captcha" />
      <captcha></captcha>
      
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import Captcha from "@/components/Captcha.vue";

export default {
  data() {
    return {
      username: "",
      password: "",
      captcha: ""
    };
  },
  methods: {
    submitForm() {
      // 在此處進(jìn)行登錄驗(yàn)證和驗(yàn)證碼驗(yàn)證的邏輯
      console.log("Username:", this.username);
      console.log("Password:", this.password);
      console.log("Captcha:", this.captcha);
    }
  },
  components: {
    Captcha
  }
};
</script>

這樣，當(dāng)用戶訪問(wèn)登錄頁(yè)面時(shí)，會(huì)生成并顯示一個(gè)驗(yàn)證碼圖片。用戶可以點(diǎn)擊驗(yàn)證碼圖片來(lái)刷新驗(yàn)證碼。在提交登錄表單時(shí)，你可以在后端進(jìn)行相應(yīng)的驗(yàn)證碼驗(yàn)證邏輯，以確保用戶輸入的驗(yàn)證碼與生成的驗(yàn)證碼一致。
請(qǐng)確保你已正確安裝了相關(guān)依賴，并根據(jù)你的項(xiàng)目結(jié)構(gòu)和需求進(jìn)行相應(yīng)的路徑和配置調(diào)整。以上代碼只是一個(gè)示例，你可以根據(jù)實(shí)際情況進(jìn)行修改和擴(kuò)展。

擴(kuò)展
0---------------------------------------------------0
<dependency> 是 Maven 項(xiàng)目中用于管理依賴的標(biāo)簽。在這段代碼中，<dependency> 標(biāo)簽用于指定項(xiàng)目所依賴的庫(kù)（Artifact）的相關(guān)信息。
具體來(lái)說(shuō)：
<groupId>：指定庫(kù)的 Group ID，即庫(kù)所屬的組織或者項(xiàng)目的標(biāo)識(shí)符。在這里，
nl.captcha 表示這個(gè)庫(kù)是由名為 “nl.captcha” 的組織提供。
<artifactId>：指定庫(kù)的 Artifact ID，即庫(kù)的唯一標(biāo)識(shí)符。在這里，
simplecaptcha 表示這個(gè)庫(kù)的名稱為 “simplecaptcha”。
<version>：指定庫(kù)的版本號(hào)。在這里，
1.2.2 表示使用的是 “simplecaptcha” 庫(kù)的版本 1.2.2。
通過(guò)在 Maven 項(xiàng)目的 pom.xml 文件中添加這段 <dependency> 代碼，你就可以告訴 Maven 構(gòu)建系統(tǒng)，你的項(xiàng)目需要使用 “simplecaptcha” 庫(kù)，并且指定了具體的版本號(hào)。當(dāng)你構(gòu)建項(xiàng)目時(shí)，Maven 會(huì)自動(dòng)下載并管理這個(gè)庫(kù)的相關(guān)依賴。
簡(jiǎn)而言之，這段代碼的目的是在 Maven 項(xiàng)目中添加 “simplecaptcha” 庫(kù)作為項(xiàng)目的依賴，以便在代碼中使用該庫(kù)提供的功能。
SimpleCaptcha 是一個(gè)開源的 Java 庫(kù)，用于生成和驗(yàn)證圖像驗(yàn)證碼。它提供了一個(gè)簡(jiǎn)單而靈活的方式來(lái)創(chuàng)建各種類型的驗(yàn)證碼，包括文本、數(shù)字、字母、數(shù)學(xué)等。
SimpleCaptcha 的主要特點(diǎn)和功能包括：
高度可定制化：SimpleCaptcha 允許你通過(guò)配置各種參數(shù)來(lái)定制生成的驗(yàn)證碼，例如驗(yàn)證碼的長(zhǎng)度、字體樣式、字體顏色、背景樣式、干擾線等。你可以根據(jù)自己的需求創(chuàng)建符合你應(yīng)用程序風(fēng)格的驗(yàn)證碼。

多種驗(yàn)證碼類型：SimpleCaptcha 支持多種驗(yàn)證碼類型，包括文本驗(yàn)證碼、數(shù)字驗(yàn)證碼、字母驗(yàn)證碼、數(shù)學(xué)驗(yàn)證碼等。你可以選擇適合你應(yīng)用場(chǎng)景的驗(yàn)證碼類型。

高度可讀性：生成的驗(yàn)證碼圖像具有良好的可讀性，確保用戶能夠輕松辨認(rèn)驗(yàn)證碼。

防止自動(dòng)化攻擊：通過(guò)添加干擾線、噪點(diǎn)等特征，SimpleCaptcha 增加了驗(yàn)證碼的復(fù)雜度，提高了驗(yàn)證碼的安全性，減少了自動(dòng)化攻擊的風(fēng)險(xiǎn)。

簡(jiǎn)單易用：SimpleCaptcha 提供了簡(jiǎn)單的 API，使得在你的 Java 應(yīng)用程序中集成和使用驗(yàn)證碼變得非常容易。

可以使用 SimpleCaptcha 來(lái)為你的應(yīng)用程序添加驗(yàn)證碼功能，以增強(qiáng)用戶驗(yàn)證和安全性。它適用于各種場(chǎng)景，如用戶注冊(cè)、登錄、重置密碼、防止惡意攻擊等。
可以在 SimpleCaptcha 的官方網(wǎng)站或者其 GitHub 頁(yè)面獲取更多關(guān)于 SimpleCaptcha 的詳細(xì)信息、文檔和示例代碼：https://www.simplecaptcha.org/

感覺(jué)不錯(cuò)記得一鍵三連哦！?。。。?/strong>文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-500490.html

到了這里，關(guān)于【項(xiàng)目功能模塊拆分】SpringBoot+vue實(shí)現(xiàn)登錄圖片驗(yàn)證碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！