目錄

• 說(shuō)明
• 快速開始
• 前端
• 后端
• 測(cè)試

說(shuō)明

最近需要改一下首頁(yè)界面，將之前的字符驗(yàn)證碼改成滑塊驗(yàn)證碼（這樣更好用一些），找了一下發(fā)現(xiàn)了anji-captcha這個(gè)組件，效果如下

快速開始

前端

首先將倉(cāng)庫(kù)克隆下來(lái)->https://github.com/anji-plus/captcha.git，然后在自己的工程里copy需要的文件

1)復(fù)制view/vue/src/components/verifition文件夾,到自己工程對(duì)應(yīng)目錄下復(fù)制view/vue/src/assets到自己工程對(duì)應(yīng)目錄下2)安裝請(qǐng)求和加密依賴npm install axios  crypto-js   -S

前端請(qǐng)求使用的axios，需要換成自己工程的axios，這樣請(qǐng)求后端路徑才會(huì)正確，配置位于verifition/api/index.js，同時(shí)如果后端有對(duì)請(qǐng)求攔截請(qǐng)過(guò)濾掉/captcha/get和/captcha/check兩個(gè)后端接口

示例使用

<template>  <div>    <Verify      @success="success"      :mode=""pop""      :captchaType=""blockPuzzle""      :imgSize="{ width: "330px", height: "155px" }"      ref="verify"    ></Verify>    <button @click="useVerify">調(diào)用驗(yàn)證組件</button>  </div></template><script>//引入組件import Verify from "@/components/verifition/Verify";export default {  name: "app",  components: {    Verify,  },  methods: {    success(params) {console.log("成功，下面是二次驗(yàn)證")      // params 返回的二次驗(yàn)證參數(shù), 和登錄參數(shù)一起回傳給登錄接口，方便后臺(tái)進(jìn)行二次驗(yàn)證    },    useVerify() {      this.$refs.verify.show();    },  },};</script>

后端

有starter版本的包，還是比較方便的

<dependency>    <groupId>org.springframework.boot</groupId>    <artifactId>spring-boot-starter-data-redis</artifactId></dependency><dependency>    <groupId>com.anji-plus</groupId>    <artifactId>spring-boot-starter-captcha</artifactId>    <version>1.2.8</version></dependency>

application.yml

server:  port: 8080# 滑動(dòng)驗(yàn)證，底圖路徑，不配置將使用默認(rèn)圖片# 支持全路徑# 支持項(xiàng)目路徑,以classpath:開頭,取resource目錄下路徑,例：classpath:images/jigsawspring:  redis:    database: 3    host: 151.168.99.100    password: "123456"    port: 6379aj:  captcha:    jigsaw: classpath:images/jigsaw    #滑動(dòng)驗(yàn)證，底圖路徑，不配置將使用默認(rèn)圖片    ##支持全路徑    # 支持項(xiàng)目路徑,以classpath:開頭,取resource目錄下路徑,例：classpath:images/pic-click    pic-click: classpath:images/pic-click    # 對(duì)于分布式部署的應(yīng)用，我們建議應(yīng)用自己實(shí)現(xiàn)CaptchaCacheService，比如用Redis或者memcache，    # 參考CaptchaCacheServiceRedisImpl.java    # 如果應(yīng)用是單點(diǎn)的，也沒有使用redis，那默認(rèn)使用內(nèi)存。    # 內(nèi)存緩存只適合單節(jié)點(diǎn)部署的應(yīng)用，否則驗(yàn)證碼生產(chǎn)與驗(yàn)證在節(jié)點(diǎn)之間信息不同步，導(dǎo)致失敗。    # ?。?！ 注意啦，如果應(yīng)用有使用spring-boot-starter-data-redis，    # 請(qǐng)打開CaptchaCacheServiceRedisImpl.java注釋。    # redis ----->  SPI： 在resources目錄新建META-INF.services文件夾(兩層)，參考當(dāng)前服務(wù)resources。    # 緩存local/redis...    cache-type: redis    # local緩存的閾值,達(dá)到這個(gè)值，清除緩存    cache-number: 1000    # local定時(shí)清除過(guò)期緩存(單位秒),設(shè)置為0代表不執(zhí)行    timing-clear: 180    # 驗(yàn)證碼類型default兩種都實(shí)例化。    type: default    # 漢字統(tǒng)一使用Unicode,保證程序通過(guò)@value讀取到是中文，可通過(guò)這個(gè)在線轉(zhuǎn)換;yml格式不需要轉(zhuǎn)換    # https://tool.chinaz.com/tools/unicode.aspx 中文轉(zhuǎn)Unicode    # 右下角水印文字(我的水印)    water-mark: Yunlingfly    # 右下角水印字體(不配置時(shí)，默認(rèn)使用文泉驛正黑)    # 由于宋體等涉及到版權(quán)，我們jar中內(nèi)置了開源字體【文泉驛正黑】    # 方式一：直接配置OS層的現(xiàn)有的字體名稱，比如：宋體    # 方式二：自定義特定字體，請(qǐng)將字體放到工程resources下fonts文件夾，支持ttf\ttc\otf字體    # aj.captcha.water-font=WenQuanZhengHei.ttf    # 點(diǎn)選文字驗(yàn)證碼的文字字體(文泉驛正黑)    # aj.captcha.font-type=WenQuanZhengHei.ttf    # 校驗(yàn)滑動(dòng)拼圖允許誤差偏移量(默認(rèn)5像素)    slip-offset: 5    # aes加密坐標(biāo)開啟或者禁用(true|false)    aes-status: true    # 滑動(dòng)干擾項(xiàng)(0/1/2)    interference-options: 1    history-data-clear-enable: true    # 接口請(qǐng)求次數(shù)一分鐘限制是否開啟 true|false    req-frequency-limit-enable: true    # 驗(yàn)證失敗5次，get接口鎖定    req-get-lock-limit: 5    # 驗(yàn)證失敗后，鎖定時(shí)間間隔,s    req-get-lock-seconds: 60    # get接口一分鐘內(nèi)請(qǐng)求數(shù)限制    req-get-minute-limit: 30    # check接口一分鐘內(nèi)請(qǐng)求數(shù)限制    req-check-minute-limit: 60    # verify接口一分鐘內(nèi)請(qǐng)求數(shù)限制    req-verify-minute-limit: 60

將service/springboot/src/main/resources下的images和METE-INF文件夾copy到自己的工程里，將CaptchaCacheService文件里的內(nèi)容改為自己的目錄并新建CaptchaCacheServiceRedisImpl文件作為緩存，內(nèi)容如下

package cn.yunlingfly.springbootanjicaptcha.service;import com.anji.captcha.service.CaptchaCacheService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.data.redis.core.StringRedisTemplate;import java.util.concurrent.TimeUnit;/** * 對(duì)于分布式部署的應(yīng)用，我們建議應(yīng)用自己實(shí)現(xiàn)CaptchaCacheService，比如用Redis，參考service/spring-boot代碼示例。 * 如果應(yīng)用是單點(diǎn)的，也沒有使用redis，那默認(rèn)使用內(nèi)存。 * 內(nèi)存緩存只適合單節(jié)點(diǎn)部署的應(yīng)用，否則驗(yàn)證碼生產(chǎn)與驗(yàn)證在節(jié)點(diǎn)之間信息不同步，導(dǎo)致失敗。 * <p> * ☆☆☆ SPI： 在resources目錄新建META-INF.services文件夾(兩層)，參考當(dāng)前服務(wù)resources。 * <p> * 使用redis緩存 * * @author lide1202@hotmail.com * @date 2020-05-12 */public class CaptchaCacheServiceRedisImpl implements CaptchaCacheService {    @Override    public String type() {return "redis";    }    @Autowired    private StringRedisTemplate stringRedisTemplate;    @Override    public void set(String key, String value, long expiresInSeconds) {stringRedisTemplate.opsForValue().set(key, value, expiresInSeconds, TimeUnit.SECONDS);    }    @Override    public boolean exists(String key) {return stringRedisTemplate.hasKey(key);    }    @Override    public void delete(String key) {stringRedisTemplate.delete(key);    }    @Override    public String get(String key) {return stringRedisTemplate.opsForValue().get(key);    }    @Override    public Long increment(String key, long val) {return stringRedisTemplate.opsForValue().increment(key, val);    }}

測(cè)試

前后端分別啟動(dòng)后，瀏覽器訪問(wèn)http://localhost:3000/#/captcha即可看到結(jié)果

為了方便測(cè)試，我將我前后端都上傳到Github了，代碼戳

前端->https://github.com/Yunlingfly/vue-captcha

后端->https://github.com/Yunlingfly/springboot-anji-captcha

官方文檔->AJ-Captcha在線體驗(yàn)

到此這篇關(guān)于Vue滑塊驗(yàn)證碼組件anji-captcha的使用的文章就介紹到這了,更多相關(guān)Vue滑塊驗(yàn)證碼內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！