登录登出以及随机生成验证码

（作者：杨先金；撰写时间：2019年4月8日）
1、登录：
登录页面的页面布局及其js代码部分如下，要完成登录功能，首先要给各个div元素绑定点击事件，获取该元素的值，接下来就是判断数据的完整性，如果数据填写完整，那么打开加载层，到控制器请求数据，并对请求回来的数据进行判断，如果返回来的数据状态为“成功”，那么直接跳到主页面，否则再对数据进行一系列的判断……


控制器部分的代码比较冗长，最主要的步骤无非就那几点：获取页面传递的变量，获取session中的验证码，判断用户输入的验证码和session中拿到的验证码是否一致（忽略大小写），如果验证码正确，那么对用户输入的密码加密，然后用加密后的密码和数据库查询到的密码进行比较，判断验证选择的角色是否正确，确认身份正确，把用户数据放到session中，设置session，使用cookie记住用户信息，否则设置有效期为昨天，浏览器会自动删除cookie
2、登出：
相较于登录要进行一系列复杂的判断而言，登出就简单了许多，只需一句代码的功夫就能解决。首先获取到登出按钮，给它绑定点击事件，在方法体内调用事先写好的退出登录的方法，退出登录的方法会去请求控制器，返回来数据后刷新页面即可。


控制器部分的代码也很简单，直接清空session，然后返回一个“true”。

3、随机生成验证码：
验证码的验证是注册登录中一个必不可少的环节，它并非用来为难人为登录，而是为防止机器登录而专门设计的一道关卡。
验证码的生成理念就是：它的长度为5（一般来说）的随机字符串，产生数字和密码混合的随机数，根据字符串创建验证码图片，新增图片，在图片上绘制文字，在图片上绘制干扰线，绘制图片的前景干扰点，在最外边绘制边框，将图转保存到内存流中，将流内容写入byte数组返回。

由于浏览器本身存在有缓存机制，当你第一次点击验证码的时候，事实上它就已经把你第一次生成的验证码的数据缓存一份保存到浏览器，在你第二次点击切换验证码的时候，它就会把保存到浏览器中的验证码给你拿出来，重新生成一张图片，而这张图片就是之前的那张，所以就造成了无论你如何点击它，都不会有切换的效果，当然你可以先清除浏览器的缓存，再来点击生成验证码，这样也是可以的，但就用户体验角度来说，这是个bug，你不可能提醒用户每点击一次验证码就要用户自己清理一下缓存吧？那得多麻烦。
要解决这一问题，只要在图片的路径上加上当前时间的参数避免与之前重复即可。

下面是生成验证码最终的效果图：人眼不难识别，但机器就无法正确地识别图中的内容。