继之前的登录……


1

在web.servlet包下新建一个checkCodeServlet类,作用是提供验证码图片,前端展示图片时的路径就可以写这个Servlet路径,代码之前已经写好了,复制过来就行
QQ图片20200711212844.png


2

在蓝圈web包下创建一个login.html展示前端页面,并设置表单跳转到负责登录的loginServlet;以及设置图片的src属性值指向提供验证码的checkCodeServlet
QQ图片20200711214731.png
QQ图片20200711214505.png


3

在login.jsp前端页面中给验证码图片一个id:”img” ,并且用这个id在此页面上面用script代码为图片绑定单击事件并切换图片的操作!
QQ图片20200711220236.png
QQ图片20200711220239.png


4、创建loginServlet

4.1进行request字符集编码、参数获取

QQ图片20200711221410.png

4.2将获取的参数的验证码和程序生成的验证码进行比对

由于浏览器访先问login.jsp登录页面为一次请求,然后瞬间再访问checkCodeServlet获取图片为第二次请求。说这个的原因是我们可以在checkCodeServlet里创建一个session对象来存储checkCodeServlet生成的验证码,然后再在loginServlet里继续用刚刚的创建的session对象来获取checkCodeServlet生成的验证码,最后和获取的参数的验证码进行比对!
虽然第一句话在我的理解看来并不能为 为什么要用session 解释得到位,反正就是多次请求就不能用request域,得用cookie域或者session域,而我们一般都只用session域!
QQ图片20200711225501.png
QQ图片20200711225503.png

4.3当验证码不一致

当验证码不一致,应该要跳转到login.jsp,因为是在服务器里面,所以可以用请求转发!
并且要弄个request域来存一个验证码错误的信息,啥都行,就是得要有一个!然后这个错误信息再在login.jsp中再用request域取出来
为什么可以用request域呢?
我们在浏览器输入/localhost/login/login.jsp是一次请求,然后我们在登录页面login.jsp输入用户名,密码和验证码之后点击提交按钮,就重定向到loginServlet,这是另一次请求!之后,如果验证码错误,在loginServlet我们请求转发到login.jsp返回到登录界面,这个操作的请求仍然还是属于刚刚点击提交按钮的那个请求,只是在服务器之间跳转资源而已!所以在loginServlet和login.jsp之间可以用request域来共享数据!
QQ图片20200711230121.png
转发到login.jsp的代码编写
QQ图片20200711234312.png


4.4当验证码一致

4.4.1当验证码一致,并且用户名和密码错误

即登录失败,请求转发到login.jsp并且用request域存储用户名或密码错误的信息
QQ图片20200711232517.png

4.4.2当验证码一致,并且用户名和密码也正确

即登录成功,就得重新跳转到一个新的页面success.jsp,因为是新的页面,所以要用到重定向,而重定向是另一次请求,所以要用session来存储用户信息,以便可以在success.jsp页面上用到这个用户信息,比如:XXX,欢迎来到首页什么鬼的~~
QQ图片20200711233058.png
QQ图片20200711233614.png

5、修复一些小 Bug

QQ图片20200712090240.png
下面就算没有验证码或者用户名密码错误也显示了null,怎么办呢?用三元表达式!
QQ图片20200712090524.png


另外,如果将浏览器的页面后退,验证码就可以重复使用,这样明显不安全!
解决方法:在loginServlet中将session保存的验证码的键删除掉!获取了就删除掉!只拿新创建的字符串变量去和用户输入的验证码比较就行了!
QQ图片20200712091357.png
这样就保证了验证码是一次性的验证码!