设置验证码

（作者：张滋，撰写时间：2019年5月28日）

下面我们来讲一下验证码，验证码是基本都是在登录页面或者是验证消息时用的，都是来验证是不是本人操作的，那么我们如何来设置验证码呢？

首先，我们先设置HTML代码，如下图：

然后，我们通过img标签里面的ID来添加点击事件来设置JS代码，再通过prop去改变img标签的url路径，如下图：

这时，我们会发现点击事件触发了，也可以更换图片，就是显示不出来图片而已，接着在写控制器方法前，先创建一个叫ValidCodeUtils的静态类，然而它里面有两个方法：

一个方法是用来获得随机字符串：

另一个则是根据字符串来创建验证码图片：

这时，我们就要写控制器代码了，如下图：

这时我们又遇到一个问题就是，我们点击事件触发了，然而我们的图片则是不切换的，因为浏览器的缓存机制，浏览器为了避免不断的去请求服务器，浏览器就会把相同路径的图片缓存一份下来，当你设置同样的路径的时候，浏览器就会认为这是同一张图片，就会把缓存好的图片输出，但是这时又不能更改路径，这就会导致这个问题的发生。

 

我们虽然不能更改他的路径，但是我们可以传参数啊，也就是说把路径通过传参数和当前时间的转换成的毫秒数来进行拼接，这样我们就能使每一次的路径都不同，这样我们就可以在触发点击事件的同时，也能切换验证码的图片，如下图：

这样我们便完成了验证码这一功能了。