模拟用户登录,内含验证码验证和request等操作

模拟用户登录,内含验证码验证和jsp等操作


1.案例需求:

	1. 访问带有验证码的登录页面login.jsp
	2. 用户输入用户名,密码以及验证码。
		* 如果用户名和密码输入有误,跳转登录页面,提示:用户名或密码错误
		* 如果验证码输入有误,跳转登录页面,提示:验证码错误
		* 如果全部输入正确,则跳转到主页success.jsp,显示:用户名,欢迎您

2.案例分析:

3.代码实现

1. 登录界面的设置:

设计思想:
1. 先写出页面的基本框架:一个基本的表单,其中采用el表达式来表达虚拟目录,动态生成虚拟目录。

<form action="${pageContext.request.contextPath}/loginServlet" method="post">
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>验证码</td>
            <td><input type="text" name="checkCode"></td>
        </tr>
        <tr>

            <td colspan="2"><img id="img" src="/day16/checkCodeServlet"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="登录"></td>
        </tr>
    </table>


</form>


2. 用于显示验证码正确和错误之后的定向问题:主要codes:

采用el表达式是用来显示的,如果没有返回值或者返回值为空的话,如果采用request.getAttribute()的方法会产生null,但是如果采用el表达式,直接返回空字符串,不用返回null,简化了代码。
<div>
    ${requestScope.cc_error}  
/*这里也可以采用三目操作符来表示:
	<%=request.getAttribute("cc_error") == null ? "" : request.getAttribute("cc_error")%>	*/
</div>
<div>
    ${requestScope.login_error}
</div>

2. 获取验证码的设置:

使用servlet来获取验证码,具体过程如下:
1. 先创建一个对象,用来画图:

	int width=100;
    int height=50;
    BufferedImage image=new BufferedImage(width,height,
                BufferedImage.TYPE_INT_RGB);
解释:第1,2行代码不用解释。使用BufferdImage对象来创造一个图像的对象,刚开始显示一个小方框,长100px,宽50px,采用RGB来涂色
2. 进一步美化照片,先填充色来填充背景
	Graphics graphics = image.getGraphics();
    graphics.setColor(Color.PINK);//
	graphics.fillRect(0,0,width,height);
3. 到这一步,会发现下和右没有图上颜色,再进一步梅花:
	graphics.setColor(Color.blue);
    graphics.drawRect(0,0,width-1,height-1);
4. 定义显示在图片上的字符和数字的库---》由大写A~Z小写的a~z和0~9组成: 
String str="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
5. 创建随机类来生成随机的角标
	Random ran=new Random();
	StringBuilder sb=new StringBuilder();
	for (int i = 1; i <=4 ; i++) {
            int index = ran.nextInt(str.length());
            //获取字符
            char ch = str.charAt(index);
            sb.append(ch);
            //2.3写验证码
            graphics.drawString(ch+"",width/5*i,height/2);
        }
6. 再将生成的动态验证码字符串交个session来保存,共客户端访问数据
	String checkCode_session = sb.toString();
	//存入session
    request.getSession().setAttribute("checkCode_session",checkCode_session);
7. 生产干扰线
	graphics.setColor(Color.GREEN);
    //随机生成坐标
    for (int i = 0; i < 10; i++) {
        int x1 = ran.nextInt(width);
        int x2 = ran.nextInt(width);
        int y1 = ran.nextInt(height);
        int y2 = ran.nextInt(height);
        graphics.drawLine(x1,x2,y1,y2);

    }
8. 将图片输出到页面展示
    ImageIO.write(image,"jpg",response.getOutputStream());

至此,验证码的servlet生成;

3. 登录servlet的设置:

TIP:这里采用写死的方法,简化了开发,读者可以采用sql的数据库连接上去动态生成用户名和密码。

1. 首先设置代码的编码格式为utf-8;
**request.setCharacterEncoding("utf-8");**
注意是request,请求用来设置编码。response一般是用来服务器的发送信息(用于给客户端发送回应)
2.采用request请求来获取username,password和验证码的元素:

	String username = request.getParameter("username");
    String password = request.getParameter("password");
    String checkCode = request.getParameter("checkCode");
3. 获取session进行验证:
HttpSession session = request.getSession();
String checkCode_session = (String) session.getAttribute("checkCode_session");
//删除验证码session中存储的
session.removeAttribute("checkCode_session");
4. 判断验证码,用户名和密码是否都正确,首先需要先判断验证码是否正确,这样可以避免数据库的消耗。(如果先验证用户名和密码的话,需要去数据库查询,查询完了如果验证码不对,也无法登录,所以需要先验证验证码)

判断获取的字符串是否为空然后和在login.jsp页面中输入的字符串去掉大小写进行比较
如图在login.jsp中定义的:


这是在CheckCodeServlet中保存在session中的验证码字符串

String checkCode = request.getParameter("checkCode");
表示把数据从请求中去了出来并且赋给了checkCode。

进行比较
if(checkCode_session!=null&&checkCode_session.equalsIgnoreCase(checkCode)){
        //忽略大小写比较字符串,判断用户名和密码是否一致
        //正确
        if("zhangsan".equals(username)&&"123".equals(password)){
            //登录成功
            //存储信息,用户信息
                session.setAttribute("user",username);
            //重定向到success.jsp
            response.sendRedirect(request.getContextPath()+"/success.jsp");
        }else{
            //不一致,存储提示信息到request
            request.setAttribute("login_error","用户名或者密码错误");
            //转发到登录页面
            request.getRequestDispatcher("/login.jsp").forward(request,response);
        }
    }else{
        //不一致,存储提示信息到request
        request.setAttribute("cc_error","验证码错误");
        //转发到登录页面
        request.getRequestDispatcher("/login.jsp").forward(request,response);
    }

3.界面如下:

4.测试用例:略


codes from GitHub-----》》》》》登录简单案例-验证码

博客网站 https://yamon.top 个人网站 https://yamon.top/resume GitHub网站 https://github.com/yamonc 欢迎前来访问
原文地址:https://www.cnblogs.com/chenyameng/p/11223139.html