java基础界面滑块按钮案例



/template>

el-form-item v-if="captchaOnOff&&(captcha_type=='captcha_type_imgfill'||captcha_type=='captcha_type_clickword')" prop="isLock">

/el-form-item>

el-form-item v-if="captchaOnOff&&(captcha_type=='captcha_type_imgfill'||captcha_type=='captcha_type_clickword')" prop="code">

/el-form-item>

template>

class="verify-bar-area"

:style="{

width: setSize.imgWidth,

height: barSize.height,

'line-height': barSize.height,

}"

>

class="verify-left-bar"

:style="{

width: leftBarWidth !== undefined ? leftBarWidth : barSize.height,

height: barSize.height,

'border-color': leftBarBorderColor,

transaction: transitionWidth,

}"

>

class="verify-move-block"

@touchstart="start"

@mousedown="start"

:style="{

width: barSize.height,

height: barSize.height,

'background-color': moveBlockBackgroundColor,

left: moveBlockLeft,

transition: transitionLeft,

}"

>

:class="['verify-icon iconfont', iconClass]"

:style="{ color: iconColor }"

>

v-if="type === '2'"

class="verify-sub-block"

:style="{

width: Math.floor((parseInt(setSize.imgWidth) * 47) / 310) + 'px',

height: setSize.imgHeight,

top: '-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',

'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,

}"

>

:src="'data:image/png;base64,' + blockBackImgBase"

alt=""

style="width: 100%; height: 100%; display: block"

/>

Verifition/Verify.vue:

此组件在验证失败时候需要一张图片，小编放置如下：

前端部分到此基本就结束了，下面开始Java Spring Boot部分.

引入依赖：

com.github.anji-plus

captcha-spring-boot-starter

1.2.7

主要目录如下：

CaptchaRedisServiceImpl

package com.wjwjy.web.BaseAnji.service.impl;

import com.anji.captcha.service.CaptchaCacheService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.data.redis.core.StringRedisTemplate;

import org.springframework.stereotype.Service;

import java.util.concurrent.TimeUnit;

@Service

public class CaptchaRedisServiceImpl implements CaptchaCacheService {

@Autowired

private StringRedisTemplate stringRedisTemplate;

@Override

public void set(String s, String s1, long l) {

stringRedisTemplate.opsForValue().set(s, s1, l, TimeUnit.SECONDS);

}

@Override

public boolean exists(String s) {

return stringRedisTemplate.hasKey(s);

}

@Override

public void delete(String s) {

stringRedisTemplate.delete(s);

}

@Override

public String get(String s) {

return stringRedisTemplate.opsForValue().get(s);

}

@Override

public String type() {

return "redis";

}

}

在resourcesjava基础界面滑块按钮案例/META-INF/ 下新建services目录，然后在services下新建com.anji.captcha.service.CaptchaCacheService，这里需要注意，新建的是文件。

com.anji.captcha.service.CaptchaCacheService代码如下:

com.wjwjy.web.BaseAnji.service.impl.CaptchaRedisServiceImpl

这里需要注意，com.anji.captcha.service.CaptchaCacheService的内容必须是CaptchaRedisServiceImpl的路径。

BaseAnjiController：

package com.wjwjy.web.BaseAnji.controller;

import com.anji.captcha.model.common.ResponseModel;

import com.anji.captcha.model.vo.CaptchaVO;

import com.anji.captcha.service.CaptchaService;

import lombok.extern.slf4j.Slf4j;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.*;

@RestController

@CrossOrigin

@Slf4j

@RequestMapping(value="/api/base/base_anji")

public class BaseAnjiController {

@Autowired

private CaptchaService captchaService;

@PostMapping("/get")

public ResponseModel get(@RequestBody CaptchaVO captchaVO) {

return captchaService.get(captchaVO);

}

@PostMapping("/check")

public ResponseModel check(@RequestBody CaptchaVO captchaVO) {

return captchaService.check(captchaVO);

}

@PostMapping("/verify")

public ResponseModel verify(@RequestBody CaptchaVO captchaVO) {

return captchaService.verification(captchaVO);

}

}

Java的请求代码到这里基本结束，但还需配置一下aj-captcha

新建Config类：

package com.wjwjy.trendscommon.config;

import com.anji.captcha.model.common.Const;

import com.anji.captcha.service.CaptchaService;

import com.anji.captcha.service.impl.CaptchaServiceFactory;

import com.anji.captcha.util.Base64Utils;

import com.anji.captcha.util.FileCopyUtils;

import com.anji.captcha.util.ImageUtils;

import com.anji.captcha.util.StringUtils;

import lombok.extern.slf4j.Slf4j;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.context.annotation.DependsOn;

import org.springframework.core.io.Resource;

import org.springframework.core.io.support.PathMatchingResourcePatternResolver;

import org.springframework.core.io.support.ResourcePatternResolver;

import java.util.HashMap;

import java.util.Map;

import java.util.Properties;

@Slf4j

@Configuration

public class Config {

@Bean

@DependsOn("AjCaptchaCacheService")

public CaptchaService captchaService() {

Properties config = new Properties();

// try {

// try (InputStream input = CaptchaConfig.class.getClassLoader()

// .getResourceAsStream("application.properties")) {

// config.load(input);

// }

// }catch (Exception ex){

// ex.printStackTrace();

// }

//各种参数设置....

//缓存类型redis/local/....

config.put(Const.CAPTCHA_CACHETYPE, "local");//缓存类型

config.put(Const.CAPTCHA_WATER_MARK, "吾疾唯君医Java");//水印文字

config.put(Const.CAPTCHA_FONT_TYPE, "宋体");//字体

config.put(Const.CAPTCHA_TYPE, "default");//blockPuzzle 图片滑块 clickWord 文字点选 default默认两者都实例化

config.put(Const.CAPTCHA_INTERFERENCE_OPTIONS, "0");//滑动干扰项(0/1/2)

config.put(Const.ORIGINAL_PATH_JIGSAW, "");

config.put(Const.ORIGINAL_PATH_PIC_CLICK, "");

config.put(Const.CAPTCHA_SLIP_OFFSET, 5);//校验滑动拼图允许误差偏移量(默认5像素)

config.put(Const.CAPTCHA_AES_STATUS, "true");

config.put(Const.CAPTCHA_WATER_FONT, "宋体");//aes加密坐标开启或者禁用(true|false)

config.put(Const.CAPTCHA_CACAHE_MAX_NUMBER, "1000");

config.put(Const.CAPTCHA_TIMING_CLEAR_SECOND, "180");

//更多自定义参数，请参考service/springboot/https://www.51969.com/resources/application.properties

if ((StringUtils.isNotBlank(config.getProperty(Const.ORIGINAL_PATH_JIGSAW))

&& config.getProperty(Const.ORIGINAL_PATH_JIGSAW).startsWith("classpath:"))

|| (StringUtils.isNotBlank(config.getProperty(Const.ORIGINAL_PATH_PIC_CLICK))

&& config.getProperty(Const.ORIGINAL_PATH_PIC_CLICK).startsWith("classpath:"))) {

//自定义resources目录下初始化底图

config.put(Const.CAPTCHA_INIT_ORIGINAL, "true");

initializeBaseMap(config.getProperty(Const.ORIGINAL_PATH_JIGSAW),

config.getProperty(Const.ORIGINAL_PATH_PIC_CLICK));

}

CaptchaService s = CaptchaServiceFactory.getInstance(config);

return s;

}

private static void initializeBaseMap(String jigsaw, String picClick) {

ImageUtils.cacheBootImage(getResourcesImagesFile(jigsaw + "/original/*.png"),

getResourcesImagesFile(jigsaw + "/slidingBlock/*.png"),

getResourcesImagesFile(picClick + "/*.png"));

}

public static Map getResourcesImagesFile(String path) {

Map imgMap = new HashMap<>();

ResourcePatternResolver resolver = new PathMatchingResourcePatternResolver();

try {

Resource[] resources = resolver.getResources(path);

for (Resource resource : resources) {

byte[] bytes = FileCopyUtils.copyToByteArray(resource.getInputStream());

String string = Base64Utils.encodeToString(bytes);

String filename = resource.getFilename();

imgMap.put(filename, string);

}

} catch (Exception e) {

e.printStackTrace();

}

return imgMap;

}

}

到这里，验证实现的代码就基本结束了，如有不足之处欢迎大家指正。还希望大家点点关注，多多支持，谢谢~

好文阅读

大家都在找：

spring boot：springboot框架图

后端：后端开发工程师

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.bianchenghao6.com/h6javajc/19994.html