使用后端生成图片验证码流文件(不推荐)

代码:

@Controller
@RequestMapping("/user")
public class UserLoginController {

	//生成验证码图片流、并把验证码写到会话中
    @RequestMapping("/loginVerCodeImg")
    public void verifyCodeImage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
        response.setHeader("Pragma", "No-cache"); 
        response.setHeader("Cache-Control", "no-cache"); 
        response.setDateHeader("Expires", 0); 
        response.setContentType("image/jpeg"); 
           
        //生成随机字串 
        String verifyCode = VerifyCodeUtils.generateVerifyCode(4); 

        //存入会话session 
        HttpSession session = request.getSession(true); 
        //删除以前的
        session.removeAttribute("verCode");
        session.setAttribute("verCode", verifyCode); 
        //生成图片 
        int w = 100, h = 30; 
        VerifyCodeUtils.outputImage(w, h, response.getOutputStream(), verifyCode); 
        
        logger.warn("【loginVerCodeImg】: 生成随机验证码:" + verifyCode);
    }
	
	//登录方法
    @RequestMapping("/login/addlogin")
    public ModelAndView addlogin(HttpServletRequest request,HttpServletResponse response,Map<String, Object> map){
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String verifyCode = request.getParameter("verifyCode");
        request.getSession().setAttribute("username", username);
        //读取session中verCode的值
        HttpSession session = request.getSession();
        String verCode2 = session.getAttribute("verCode").toString();
        
        if(username == "" || username == null ) {
        	logger.warn("帐户名为空");
        	map.put("login_msg", "帐户名为空");
        	return new ModelAndView("/login/login",map);
        }else if (password == "" || password == null) {
        	logger.warn("密码为空");
        	map.put("username", username);
        	map.put("login_msg", "密码为空");
        	return new ModelAndView("/login/login",map);
        }else if(!(verifyCode.equals(verCode2) || verifyCode.equals(verCode2.toLowerCase()))) {
        	logger.warn("验证码不正确");
        	map.put("username", username);
        	map.put("password", password);
        	map.put("login_msg", "验证码错误");
    		return new ModelAndView("/login/login",map);
        }
        
        
        logger.warn("【addlogin】:输入验证码:"+ verifyCode + ",session中的验证码:"+ verCode2);
        //第1步. 去和数据库里的数据匹配
        User user = userService.findOneByNameAndPWD(username,password);
        
        if ( user == null){
        	logger.warn("登录失败");
        	map.put("username", username);
        	map.put("login_msg", "登录失败:帐户密码有误或未启用的帐户");
        	return new ModelAndView("/login/login",map);
        }else {
        	
        	//将对象user转成json格式
        	ObjectMapper mapper = new ObjectMapper();
        	String json;
    		try {
    			json = mapper.writeValueAsString(user);
    		} catch (JsonProcessingException e) {
    			json = null;
    			e.printStackTrace();
    		}

    		//第2步. 设置token至redis
    		String token = session.getId();     
    		redisTemplate.opsForValue().set(String.format("token_%s", token), json, ExpireEnum.REDISExpire.getCode(), TimeUnit.SECONDS);
        	
    		//第3步. 设置token至cookie
    		CookieUtil.set(response, "token", token, ExpireEnum.COOKIEExpire.getCode());
    		return new ModelAndView("redirect:" + projectUrlConfig.getSell() + "/userManage/userShow?userid="+user.getUserid()); 	
        }
    }
}

页面:

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<#include "../common/header.ftl">
<body>

<div align="left" style="border:100px solid white">
	<div class="container">
	    <div class="row">
	        <div class="col-md-offset-3 col-md-6">
	            <form class="form-horizontal" action="/user/login/addlogin" name="loginfrom" accept-charset="utf-8" method="post">
	            	<div class="form-group">
	                   	
	                	<span class="heading">用户登录  </span><font color="red">${(login_msg?if_exists)}</font><p>
	                </div>
	                <div class="form-group">
	                	<label class="control-label control-label-normal">用户名</label>
	                    <input type="text" class="form-control" id="username" name="username" placeholder="用户名" value="${username?if_exists}">
	                </div>
	                <div class="form-group">
	                	<label class="control-label control-label-normal">密 码</label>
	                    <input type="password" class="form-control" id="password" name="password" placeholder="密 码" value="${password?if_exists}">
	                </div>
	                <div class="form-group">
	                	<label class="control-label control-label-normal">验证码</label><p>
	                	<img src="/user/loginVerCodeImg" id="verImg" onclick="javascript:changeImg()" />
	                    <input type="text" class="form-control" id="verifyCode" name="verifyCode" placeholder="验证码" />
	                </div>
	                <div class="form-group">
	                    <button type="submit" class="btn btn-default">登录</button>
	                    <a href="/user/register" class="zcxy" target="_blank">注册</a><p>
	                </div>
	            </form>
	        </div>
	    </div>
	</div>
</div>
	
</body>
</html>
<!-- 触发JS刷新-->
 <script type="text/javascript">
    function changeImg(){
        var img = document.getElementById("verImg"); 
        img.src = "/user/loginVerCodeImg?date=" + new Date();;
    }
</script>

  

原文地址:https://www.cnblogs.com/amoyzhu/p/9171714.html