前提:

    在上一篇文章中,可以加入基本的验证码,但是很呆板,验证码也无法传输到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>

  

SSM-网站前台博客系统制作(2)---完善版Google的Kaptcha的更多相关文章

  1. SSM-网站前台博客系统制作(1)---前台+Google的Kaptcha

    前提: 1天半时间简单自己手写了一下前端布局和后台验证码的基本工作,简要说明一下遇到的问题和收获吧. 这次基本就是前台设计(首页)+Kaptcha图片验证码(之前弄了一个reCaptcha验证码 但是 ...

  2. Java基于SSM的个人博客系统(源码 包含前后台)

    @ 目录 系统简介 系统运行截图 核心代码 写在最后 系统简介 技术点:Java.JSP.SSM框架,实现了个人博客系统 用户角色分为:普通用户.管理员.系统管理员 功能:发博客.博客分类.博客删除. ...

  3. 利用Sails.js+MongoDB开发博客系统

    http://yoyoyohamapi.me/categories/利用Sails-js-MongoDB开发博客系统/ 利用Sails.js+MongoDB开发博客系统 Apr 14, 2016 利用 ...

  4. 基于开源博客系统(mblog)搭建网站

    基于开源博客系统(mblog)搭建网站 上一章讲了基于jpress部署的博客系统,这一章了解一下 mblog这个开源的基于springboot的博客系统,相比与jpress 的热度fork数量要少一些 ...

  5. 基于开源博客系统(jpress)搭建网站

    基于开源博客系统(jpress)搭建网站 JPress 使用 Java8 开发,基于流行的JFinal和Jboot框架. 目前JPress已经内置的文章和页面其实是两个模块,可以移除和新增其他模块,因 ...

  6. 基于SAE+CodeIgniter3.0+管理端angularjs+前台amazeui的多用户博客系统V1.0--系统设计(一)

    开发环境: 服务器系统:CentOS-6.x web服务器:Apache-2.2.x php版本:PHP-5.3.x 开发工具:sublime text 3 ,谷歌浏览器 数据库查询工具:phpmya ...

  7. Java程序员博客系统推荐!我调研了100来个 Java 开源博客系统,发现这 5 个最好用!

    大家好!我是 Guide 哥,Java 后端开发.一个会一点前端,喜欢烹饪的自由少年. 最近想倒腾一下博客,看了很多现成的比较成熟的开源博客系统,自己也简单从下面几个维度总结对比了一下: star数量 ...

  8. 从零开始,搭建博客系统MVC5+EF6搭建框架(4)下,前后台布局实现、发布博客以及展示。

    一.博客系统进度回顾 目前已经完成了,前台展示,以及后台发布的功能,最近都在做这个,其实我在国庆的时候就可以弄完的,但是每天自己弄,突然最后国庆2天,连电脑都不想碰,所以就一直拖着,上一篇写了前端实现 ...

  9. Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦

    个人博客 对于技术人员来说,拥有自己的个人博客应该是一件令人向往的事情,可以记录和分享自己的观点,想到这件事就觉得有意思,但是刚开始写博客的时候脑海中是没有搭建个人博客这一想法的,因为刚起步的时候连我 ...

随机推荐

  1. 单片机stm32小白入门级学习路线“图”

     学习stm32的是真的越来越多了,当然我也是其中语言,所以对于stm32的学习路线非常的感兴趣,所以我也分享一下  虽然是盗图吧  不过也算是分享 ,下边有觉得不错的视频资料  也奉上   (stm ...

  2. MGR

    单主模式 参数修改 server_id=1 gtid_mode=ON enforce_gtid_consistency=ON binlog_checksum=NONE log_bin=binlog l ...

  3. Spring Boot Thmeleaf的语法 day04

    一.Thmeleaf语法的使用 html格式的页面放在classpath:/templates/就会自动渲染. 1.在pom.xml导入 <dependency> <groupId& ...

  4. datetime 计算时间差

    计算时间差: .date()       # 格式化 .timedelta()         # 时间差 import datetime # 今天 today = datetime.datetime ...

  5. ACC(Attribute Component Capability) 即特质,组件,能力

    这是一种测试计划的替代方法. ACC的指导原则如下: 1. 避免散漫的文字,推荐使用简明的列表.并不是所有的测试人员都想当小说家,也不具备将一个产品的目标或测试需求表达成散文的技能. 2.不必推销.测 ...

  6. Install Superset from Python3.6

    本文安装Superset大致分为以下部分: 在操作系统中安装相关依赖,我所用的操作系统为Centos6.5 安装Python3.6.6 安装Superset 详细步骤如下: 相关依赖的安装 yum i ...

  7. 20175211 2018-2019-2 《Java程序设计》第六周学习总结

    目录 教材学习内容总结 第七章 内部类与异常类 第十章 输入.输出流 教材学习中的问题和解决过程 代码托管 学习进度条 参考资料 教材学习内容总结 第七章 内部类与异常类 第十章 输入.输出流 教材学 ...

  8. Google搜索中的突变XSS-JavaScript Library Introduced XSS Flaw in Google Search

    前言2018年9月26日,开源Closure库(最初由谷歌创建并用于谷歌搜索)的一名开发人员创建了一个提交,删除了部分输入过滤.据推测,这是因为开发人员在用户界面设计方面出现了问题.但此次提交的开发人 ...

  9. Check SQL Server Deadlock

    Sometimes a script keeps running for a long time and can't stop, then a db blocking is occurring. We ...

  10. 设置和获取cookie

    通过make_response(“响应体”)创建response响应对象. 然后返回. 与直接return “响应体” 是一样的. 但是这里我们需要用到response响应对象,去设置cookie @ ...