前提:

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

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

  实现效果

          

      SSM-网站前台博客系统制作(2)---完善版Google的Kaptcha-LMLPHP

      
    实现思路: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>

  

01-24 03:31