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

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

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

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

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)建驗證碼圖片對象
        Captcha captcha = new Captcha.Builder(200, 50)
                .addText(new DefaultTextProducer(), new DefaultWordRenderer())
                .gimp(new DropShadowGimpyRenderer())
                .addBackground(new FlatColorBackgroundProducer(Color.WHITE))
                .build();

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

        return outputStream.toByteArray();
    }
}

創(chuàng)建一個REST API接口：創(chuàng)建一個
CaptchaController類，用于生成驗證碼圖片的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 {
        // 生成驗證碼圖片的方法
        byte[] captchaImage = captchaGenerator.generateCaptchaImage("1234");
        
        // 設(shè)置響應(yīng)的內(nèi)容類型為圖片
        response.setContentType("image/png");
        
        // 將驗證碼圖片寫入響應(yīng)輸出流
        response.getOutputStream().write(captchaImage);
    }
}

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

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

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

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

在登錄頁面使用驗證碼組件：在你的登錄頁面的代碼中，使用Captcha組件來顯示驗證碼圖片，并在表單中添加一個輸入框用于用戶輸入驗證碼。

<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" />
      
      <!-- 顯示驗證碼圖片，并添加點擊事件刷新驗證碼 -->
      <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)行登錄驗證和驗證碼驗證的邏輯
      console.log("Username:", this.username);
      console.log("Password:", this.password);
      console.log("Captcha:", this.captcha);
    }
  },
  components: {
    Captcha
  }
};
</script>

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

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

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

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

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

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

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

感覺不錯記得一鍵三連哦?。。。?！文章來源地址http://www.zghlxwxcb.cn/news/detail-514299.html

到了這里，關(guān)于【項目功能模塊】SpringBoot+vue實現(xiàn)登錄圖片驗證碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！