做个验证码居然这么简单

一、 首先要再控制器那里写一个方法，生成验证码主要有三步。

第一步，就是生成长度为4的验证码字符串，而且是随机的。先用string类型声明一个变量，然后调用一个已经封装的方法，随机生成一个长度的字符串，需要生成长度多少位的就在后面的括号写上就行，这个方法可以再网上找到，然后可以复制自己封装，主要的封装有两个，一个是创建随机长度字符串ValidCodeUtils，另一个是把创建出来的字符串转换为图片ValidCodeUtils。

第二步，生成字符串之后就是把它转换为一个图片，转换图片的方法和上面一样，也是用封装的方法直接引用，引用之后就会自动地把这个字符串转换为验证码图片。

第三步，就是把生成出来的图片存放到session的临时存储里面，session它是一个缓存机制，存储在这里面也主要是方便后面的使用。

第四步，就是把这张图片返回，因为我们生成的是一张图片，而且图片是文件这一类这种东西，文件这类东西可以用一个File文件格式返回，但是里面返回的文件内容必须是byte数组的类型，且是图片的格式。

二、得到图片后，接着去到页面那边进行数据的绑定，这里有个简单的绑定方法，因为在页面上写的是一张图，而且控制器那边返回的也是一张图片，我们就可以直接在html布局的验证码的src后面直接写上控制器方法的链接，这样就可以把生成的图片获取到页面上了，

但是呢，这样绑定的验证码图片不能点击切换，为了防止生成出来的验证码识别不出来的问题，我们就要给验证码一个可以点击切换的功能。

接着就是给图片写了一个点击事件，在这个点击事件里面用prop添加参数，后面括号的是（“需要操控的元素”，“绑定图片路径”）。但是这里特别需要注意的是，因为浏览器都会有一个缓存的功能，它会把前面的验证码图片保留下来，这就造成了一个假象，就好像点击没有反应的样子，图片也没有切换。其实这个解决

办法就是在后面拼接一个日期，这个日期也就起到刷新的作用，这时你运行点击验证码就会发现图片可以切换了。

三、最后就是判断输入的验证码是否匹配，

在session那里获取到图片之后，判断验证码和文本框输入的字符串是否相同，并且字母是忽略大小写的，这时就要把验证码的字符串进行转化。判断图片上的代码和页面上的比较，相等就说明输入的验证码正确。