使用 SpringBoot —— Hutool 实现图片验证码登录其实非常简单，下面就来实现一个简单的登录 demo
这个登录页面的实现非常简单，因为本人不是很会前端，所以登录页面做得还是非常简陋的
编写该页面的时候需要用到 bootstrap 组件，这里是直接引用了 bootstrap 的 CDN 链接，也可以直接下载 bootstrap，看个人喜欢
而这个页面的效果大致是这样的，sign in 的上方是验证码的显示的地方，下面会详细说
为了更好地理解，我们再弄个登录成功之跳转的页面
OK，HTML 页面已经写好了，接下来就是生成验证码了。Hutool 工具包将验证码生成封装得非常简单了，只需要几行代码就可以生成验证码
Hutool 的文档地址
实现代码如下：
如果上面的几种验证码还不能满足你，那么你还可以自定义一个验证码。比如我们希望使用纯字母的验证码、纯数字的验证码、加减乘除的验证码，此时我们就要自定义CodeGenerator
还可以自定义验证码内容为四则运算方式
我们先将验证码显示到网页上
现在是可以生成验证码了的，我们启动应用，访问 http://localhost:8080/getCode 即可得到验证码，如下：
但是这肯定不是我们想要的，我们想要把它显示到登录页面上去，怎么做呢？非常简单，在登录页面的代码中增加以下代码即可
没错，只需要在 src 使用 getCode 接口，将传过来的图片验证码显示即可，另外如果验证码比较模糊的，需要换一张显示，这个实现也非常简单，就是刷新一下验证码就行了
刷新验证码的代码如下（在 img 标签中增加一个点击事件即可）：
完整的 Controller 代码如下：
OK，现在再次启动应用，访问登录页面 http://localhost:8080/toLogin
我们来试下刷新验证码看看
OK，刷新验证码是没什么问题的
我们来试下登录
OK，这样就简单的验证码登录就完成了，代码下载地址
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/13274.html