javaee的OA项目（四）登录退出功能的实现，验证码实现

一写代码就开心

发布于 2021-06-17 19:28:55

6200

登录成功，需要将当前登录用户的username展示在主页面，我们主页面是jsp页面，所以可以使用session获取，只需要在后端登录成功之后，我们将用户的信息保存在session中，之后跳转到主页面的时候，利用jstl工具获取到session中的数据就可以了。

后端登录的接口是

        Employee login = emps.login(empid, pwd);

        if(login!=null){
//            欢迎xxxxxx登录
            HttpSession session = req.getSession();
            session.setAttribute("emp",login);

            resp.sendRedirect(req.getContextPath()+"/main.html");
        }else{
            req.getRequestDispatcher("/login.jsp").forward(req,resp);
        }

首页利用session获取用户信息的代码是

${sessionScope.emp.realName}

退出

一点击退出按钮，走后端接口，后端接口的代码逻辑是清除session，并且跳转到登录页面

    //    注销
    protected void loginout(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.getSession().invalidate();   注销
        resp.sendRedirect(req.getContextPath()+"/login.jsp");  跳转

    }

验证码

现在是一个工具类，可以当做一个servlet层的代码。调用这个接口，我们前段就可以生成一个图片

package com.util;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


@WebServlet("/random.jpg")
public class RandomServlet extends HttpServlet {

	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		// 在内存中创建图象
		int width = 110, height = 30;
		BufferedImage image = new BufferedImage(width, height,
				BufferedImage.TYPE_INT_RGB);
		// 获取图形上下文
		Graphics g = image.getGraphics();
		// 生成随机类
		Random random = new Random();
		// 设定背景色
		g.setColor(getRandColor(200, 250));
		g.fillRect(0, 0, width, height);
		// 设定字体
		g.setFont(new Font("Times New Roman", Font.PLAIN, 20));
		// 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
		g.setColor(getRandColor(160, 200));
		for (int i = 0; i < 155; i++) {
			int x = random.nextInt(width);
			int y = random.nextInt(height);
			int xl = random.nextInt(12);
			int yl = random.nextInt(12);
			g.drawLine(x, y, x + xl, y + yl);
		}
		// 取随机产生的认证码(6位数字)
		String sRand = "";
		for (int i = 0; i < 6; i++) {
			String rand = String.valueOf(random.nextInt(10));
			sRand += rand;
			// 将认证码显示到图象中
			g.setColor(new Color(20 + random.nextInt(110), 20 + random
					.nextInt(110), 20 + random.nextInt(110)));
			// 调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
			g.drawString(rand, 13 * i + 6, 16);
		}
		// 图象生效
		g.dispose();
		
		try {
			ImageIO.write(image, "JPEG", response.getOutputStream());
		} catch (Exception e) {
			System.out.println("验证码图片产生出现错误：" + e.toString());
		}
		//保存验证码到Session
		request.getSession().setAttribute("randStr", sRand);
		
	}


	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		this.doGet(request, response);
	}
	/*
	 * 给定范围获得随机颜色
	 */
	private Color getRandColor(int fc, int bc) {
		Random random = new Random();
		if (fc > 255)
			fc = 255;
		if (bc > 255)
			bc = 255;
		int r = fc + random.nextInt(bc - fc);
		int g = fc + random.nextInt(bc - fc);
		int b = fc + random.nextInt(bc - fc);
		return new Color(r, g, b);
	}
}

里面代码的意思是，只要调用这个接口，里面使用代码生成一个图片,图片里面有随机数，并且把这个随机数保存到了session里面

//保存验证码到Session
		request.getSession().setAttribute("randStr", sRand);

前段在放验证码的地方，写

<img  id="ran" onclick="rand()"  src="random.jpg" style="width: 115px;height: 45px">

因为返回的是一个图片，所以前端把返回到图片放到img标签里面，就可以展示了

以下图片是直接调用那个servlet接口生成的图片

 <script type="text/javascript">

        function rand(){

            document.getElementById("ran").src="random.jpg?a="+Math.random()

        }

    </script>

前端给那个图片一个点击的按钮事件，一点击直接调用后端的接口，并且返回图片，返回之后，把img标签的src属性的值改为返回图片的地址，那么我们看见的图片就会变化了。这样就实现了点击验证码，会变化的特点

点击登录，把用户输入的验证码也传达后端，在后端从session中获取这个验证码，那么进行对比就可以了