SSM-网站前台博客系统制作（2）---完善版Google的Kaptcha

　　前提：

　　　　在上一篇文章中，可以加入基本的验证码，但是很呆板，验证码也无法传输到Controller进行处理，然后现在改正了一下，可以刷新验证码，然后和登录名，密码一起提交过去，

弄了一下午和晚上，QAQ，我好菜啊，基本完成了。

　　实现效果

　　　　　　  　　

　　　　　　

   　　　

　　　　实现思路：js和controller层绑定实现动态更新验证码(这里由session保存验证码，便于后面的登录验证)，form层里面写验证码然后由js提交到Controller层(login,然后验证刚刚保存

　　的验证码和框中输入的验证码即可)

　　　　实现过程：

　　　　　　思路：

　　　　　　1.动态改变图片

　　　　　　　　js控制部分（关于${ctx}就是${pageContext.request.contextPath}，就是给图片那里添加即可，上篇文章都讲了，这里补充一下）：

　　　　　　　　　　

<script type="text/javascript">
			function changeCaptcha(){
	        	$("#kchange").attr("src","${ctx}/kmycode");
			}
</script>

　　　　　　2.关于验证本验证码:

　　　　　　　　网上都是在上面Controller层里面写了，我个人感觉不太好，因为无法和username,password绑定起来，所以我直接存到了session中，然后在另外一个Controller层里面写登录

　　　　，然后比较即可（本人耗时比较长是因为一些id没对应上，另外用网上的刷新验证码什么的耗太多时间了。）

　　　　　　　用户登录的UserController（放回jsp什么的其实可以不写，就在本网页里面就好了，我懒得改了）：

　　　　　　　　

package org.fkit.hrm.controller;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.fkit.hrm.domain.User;
import org.fkit.hrm.util.common.HrmConstants;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

/**
* @author Empirefree 胡宇乔:
* @version 创建时间：2019年1月23日 下午7:49:06
*/
@Controller
public class UserloginController {

	 @RequestMapping(value="/login")
	 public ModelAndView login(@RequestParam("username") String loginname,
			 @RequestParam("password") String password,
			 @RequestParam("captchaCode") String captchaCode,
			 HttpSession session,
			 ModelAndView mv){
		String capText = session.getAttribute("capText").toString(); 

		System.out.println(captchaCode + "输入验证码\n标准验证码:" + capText);
		mv.addObject("message", "登录名或密码错误!请重新输入");
		return mv;

	}
}

　　　　　　　js绑定登录按钮：

　　　　　　　　　　　　

<script type="text/javascript">

			$(function(){
			    /** 按了回车键 */
			   $(document).keydown(function(event){
				   if(event.keyCode == 13){
					   $("#login-submit-btn").trigger("click");
				   }
			   })

			   /** 给登录按钮绑定点击事件  */
			   $("#login-submit-btn").on("click",function(){
				   /** 校验登录参数 ctrl+K */
				   var loginname = $("#loginname").val();
				   var password = $("#password").val();
				   var captchaCode = $("#captchaCode").val();
				   alert("QAQ,求求您AC把");

				   $("#loginform").submit();

			   })

		   })
	    </script>

　　　　　　　　form表单（没什么重要的，主要是一些id，name名称要对应好，不然js和后台controller层接收不到，蛮耗时间的。）

　　　　　　　　　　

					<form id = "loginform" action="login" method="post">
						<div class="modal-body">
						        <ul>
						            <li class="form-group">
						                <input class="form-control" type="text" style="height: 50px;" id="username" name="username" placeholder="请输入用户名或邮箱" >
						            </li>
						            <li class="form-group">
						                <input class="form-control" type="password" style="height: 50px;" id="password" name="password" placeholder="请输入密码">
						            </li>
						            <li  class="form-group">
						           		<input class="form-control pull-left margin-r-5" type="text" id="captchaCode"  name="captchaCode" style="width: 200px; height: 50px;" name="verificat" placeholder="验证码">
						           		<img class="verificat" src="${ctx }/kmycode" id="kchange" title="看不清，点击换一张" onclick="changeCaptcha()" style="width:80px;height: 50px; border-radius: 10px;" /><a href ="javascript:changeCaptcha()">换一张</a>
						           	</li>
						            <li class="autologin">
						                <input type="checkbox" name="remember-me"> 下次自动登录
						            </li>
						        </ul>
						</div>
						<div class="modal-footer">
							<span>还没有账号？</span><a>立即注册</</a><a>忘记密码?</a><br />
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>
							<button type="button" type ="submit" class="btn btn-primary" id="login-submit-btn" autocomplete="off">
								登录
							</button>
						</div>
					</form>