通过Java实现各种前端验证码(字母,中文,数字运算)
这里借鉴一位大佬的开源项目:EasyCaptcha: 传送门
这里实现的验证码有英语字母,计算,中文类型,内置字体各种类型
这里那其中一种,计算类型的验证码,讲解如何在Java中实现。
效果图:
首先,导入这个依赖
<!--验证码-->
<dependency>
<groupId>com.github.whvcse</groupId>
<artifactId>easy-captcha</artifactId>
<version>1.6.2</version>
</dependency>
如果maven下载不了这个jar那就去maven的配置文件中,把镜像改成:
<mirror>
<id>aliyunmaven</id>
<mirrorOf>*</mirrorOf>
<name>阿里云公共仓库</name>
<url>https://maven.aliyun.com/repository/public</url>
</mirror>
jar下载好过后,编写后台返回验证码的请求:
这个验证码也可以不存到redis中,也可以存到session中。只需要这一个方法,就可以返回一个输出流,显示图片验证码了
@Controller
@RequestMapping("/seckill")
public class SecKillController{
@Autowired
private RedisTemplate redisTemplate;
/**
* 生成验证码的接口
* @param user 登录的用户
* @param goodsId 秒杀商品的id
* @param response 用于输出流
*/
@RequestMapping(value = "/captcha", method = RequestMethod.GET)
public void verifyCode(HttpSession session, HttpServletResponse response){
// 设置请求头输入为图片类型
response.setContentType("image/jpg");
// 设置不用缓存,防止验证码不刷新
response.setHeader("Pargam","No-cache");
response.setHeader("Cache-Control","no-cache");
// 设置过期时间,永不失效
response.setDateHeader("Expires",0);
// 算术类型(长,宽,几个数的运算)
ArithmeticCaptcha captcha = new ArithmeticCaptcha(130, 48);
captcha.setLen(3); // 几位数运算,默认是两位
System.out.println(captcha.getArithmeticString()); // 获取运算公式 5x0+5=?
System.out.println(captcha.text()); // 获取验证码结果
// 图片英语字母数字类型
//SpecCaptcha captcha = new SpecCaptcha(130, 48);
// 英语字母数字gif类型的
//GifCaptcha captcha = new GifCaptcha(130, 48,4);
// 中文类型的
//ChineseCaptcha captcha = new ChineseCaptcha(130, 48,3);
// 中文gif类型
//ChineseGifCaptcha captcha = new ChineseGifCaptcha(130, 48,4);
// 将结果放入Redis,设置5分钟失效时间。或者存入session·
session.setAttribute("captcha:admin", captcha.text());
// 输出验证码
try {
captcha.out(response.getOutputStream());
} catch (IOException e) {
e.printStackTrace();
}
}
}
接下来就是前端:
用一个图片展示,一个文本框输入,点击秒杀的时候在后端校验验证码是否正确
<div class="row">
<div class="form-inline">
<img id="captchaImg" width="130" height="48" onclick="refreshCaptcha()" style="display: none" />
<input id="captcha" class="form-control" style="display: none">
<button class="btn btn-primary btn-block" type="button" id="buyButton" onclick="getSeckillPath()">立即秒杀
<input type="hidden" name="goodsId" id="goodsId">
</button>
</div>
</div>
js:
<script>
$(function () {
// 加载商品信息,课忽略
getDetail();
// 首次加载 获取验证码
$("#captchaImg").attr("src","/seckill/captcha?goodsId="+$("#goodsId").val()+"&time="+new Date());
});
// 更新验证码的方法
function refreshCaptcha() {
// 点击的时候把地址换成这个
$("#captchaImg").attr("src","/seckill/captcha?goodsId="+$("#goodsId").val()+"&time="+new Date());
}
</script>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffgggggggggggggggggggggggggggg
Wmenghu: 卸载docker https://blog.csdn.net/qq_46264836/article/details/129713989?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%A6%82%E4%BD%95%E5%88%A0%E9%99%A4linux%E7%9A%84docker&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-6-129713989.142^v99^pc_search_result_base4&spm=1018.2226.3001.4187
bug冲: ServiceException 呢?
Wmenghu: yes
努力学前端的南宫: less要不要无所谓,要了就是仅在当前页面生效。 是“scoped”吧?
HCoJo: 哥们,我跟你的报错一模一样,解决了吗