我自己也是在学习当中,有什么问题请轻喷。
参考学习若依项目实现验证码功能
1.pom.xml中导入依赖
<!--验证码-->
<dependency>
<groupId>com.github.penggle</groupId>
<artifactId>kaptcha</artifactId>
<version>2.3.2</version>
</dependency>
2. 实现前端页面
<div>
<form method="post" class="layui-form">
<input name="username" placeholder="用户名" value="admin" type="text" lay-verify="required"
class="layui-input">
<hr class="hr15">
<input name="password" lay-verify="required" value="123456" placeholder="密码" type="password"
class="layui-input">
<hr class="hr15">
<div class="layui-row" th:if="${captchaEnabled==true}">
<div class="layui-input-inline " style="width: 40%">
<input autocomplete="off" lay-verify="required" type="text" name="validateCode" class="form-control code" placeholder="验证码" maxlength="5"/>
</div>
<div class="layui-inline " style="float: right;display: block;width: auto;">
<a href="javascript:void(0);" title="点击更换验证码">
<img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="60%"/>
</a>
</div>
</div>
<hr class="hr15">
<input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
<hr class="hr20">
</form>
</div>