Vue滑块验证码组件anji.docx

第

Vue滑块验证码组件anji

目录说明快速开始前端后端测试

说明

最近需要改一下首页界面，将之前的字符验证码改成滑块验证码（这样更好用一些），找了一下发现了anji-captcha这个组件，效果如下

快速开始

前端

首先将仓库克隆下来-/anji-plus/captcha.git，然后在自己的工程里copy需要的文件

1)复制view/vue/src/components/verifition文件夹,到自己工程对应目录下

复制view/vue/src/assets到自己工程对应目录下

2)安装请求和加密依赖

npminstallaxioscrypto-js-S

前端请求使用的axios，需要换成自己工程的axios，这样请求后端路径才会正确，配置位于verifition/api/index.js，同时如果后端有对请求拦截请过滤掉/captcha/get和/captcha/check两个后端接口

示例使用

template

div

Verify

@success=success

:mode=pop

:captchaType=blockPuzzle

:imgSize={width:330px,height:155px}

ref=verify

/Verify

button@click=useVerify调用验证组件/button

/div

/template

script

//引入组件

importVerifyfrom@/components/verifition/Verify;

exportdefault{

name:app,

components:{

Verify,

methods:{

success(params){

console.log(成功，下面是二次验证)

//params返回的二次验证参数,和登录参数一起回传给登录接口，方便后台进行二次验证

useVerify(){

this.$refs.verify.show();

/script

后端

有starter版本的包，还是比较方便的

dependency

groupIdorg.springframework.boot/groupId

artifactIdspring-boot-starter-data-redis/artifactId

/dependency

dependency

groupIdcom.anji-plus/groupId

artifactIdspring-boot-starter-captcha/artifactId

version1.2.8/version

/dependency

application.yml

server:

port:8080

#滑动验证，底图路径，不配置将使用默认图片

#支持全路径

#支持项目路径,以classpath:开头,取resource目录下路径,例：classpath:images/jigsaw

spring:

redis:

database:3

host:00

password:123456

port:6379

captcha:

jigsaw:classpath:images/jigsaw

#滑动验证，底图路径，不配置将使用默认图片

##支持全路径

#支持项目路径,以classpath:开头,取resource目录下路径,例：classpath:images/pic-click

pic-click:classpath:images/pic-click

#对于分布式部署的应用，我们建议应用自己实现CaptchaCacheService，比如用Redis或者memcache，

#参考CaptchaCacheServiceRedisImpl.java

#如果应用是单点的，也没有使用redis，那默认使用内存。

#内存缓存只适合单节点部署的应用，否则验证码生产与验证在节点之间信息不同步，导致失败。

#！！！注意啦，如果应用有使用spring-boot-starter-data-redis，

#请打开CaptchaCacheServiceRedisImpl.java注释。

#redis-----