Spring MVC 项目搭建 -4- spring security-添加自定义登录页面

修改配置文件

<!--spring-sample-security.xml-->

<!-- 去除不需要拦截的url -->
<http pattern="/libs/**" security="none"/>
<http pattern="/login.html" security="none" />
<http pattern="/resources/**" security="none" />
<!-- 配置一层拦截，需要输入正确用户名密码才能访问网站 -->
<http auto-config="true" >
    <!-- 拦截不是ROLE_USER的请求 -->
    <intercept-url pattern="/*" access="ROLE_USER" />
    <!-- 登录配置 -->
    <form-login login-page="/login.html"
        default-target-url="/test/mytest/loginSuccess"
        authentication-failure-url="/test/mytest/loginFaild"/>
    <!--退出登录配置-->
    <logout invalidate-session="true"
        logout-success-url="/"
        logout-url="/j_spring_security_logout"/>
</http>

添加登录成功失败处理器

//TestController

/**
 * 登录成功处理器
 * @return
 */
@RequestMapping(value="/loginSuccess",method=RequestMethod.GET)
public @ResponseBody boolean loginSuccess(){
    return true;
}
/**
 * 登录失败处理器
 * @return
 */
@RequestMapping(value="/loginFaild",method=RequestMethod.GET)
public @ResponseBody boolean loginFaild(){
    return false;
}

添加页面

login.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="author" content="0o晓月メ">
    <title>login</title>
    <!-- bootstrap -->
    <link href="libs/bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="libs/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="libs/bootstrap-3.3.5/dist/js/bootstrap.js"></script>
    <!-- less  -->
    <link href="resources/less/main.less" rel="stylesheet/less" type="text/css">
    <script src="libs/less/less.min.js" type="text/javascript"></script>
    <script src="resources/js/login.js" type="text/javascript"></script>
  </head>
  <body class="main-body">
    <div class ="main-container">
        <div class="panel panel-info login-container">
          <div class="panel-heading" style="text-align: left;">登录</div>
          <div class="panel-body">
            <form class="form-horizontal">
              <div class="form-group">
                <label for="userName" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="userName" placeholder="UserName">
                </div>
              </div>
              <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                  <input type="password" class="form-control" id="password" placeholder="Password">
                </div>
              </div>
              <button type="button" class="btn btn-info" id="loginBtn">登 录</button>
              <button type="button" class="btn btn-info" id = "resetBtn">重 置</button>
            </form>
        </div>
    </div>
  </body>
</html>

login.js

$(function(){
    // username field event
    $('#userName')
    .change(function(){
        $('#password').val('');
    })
    .keydown(function(event){
        if (event.keyCode == 13){
            $('#password').focus();
        }
    });

    // btn event
    $('#loginBtn').click(function(event){
        login();
    });

    $('#resetBtn').click(function(event){
        $('#userName').val('').focus();
        $('#password').val('');
    });

});

function login(){
    var userName = $('#userName').val(),
        password = $('#password').val();
    userName = $.trim(userName);
    var loginBtn = $('#loginBtn');
    loginBtn.attr("disabled", true);

    $.ajax({
        type : "POST",
        dataType : 'json',
        data : {
            j_username: userName,
            j_password: password
        },
        url : "j_spring_security_check",
        success : function(result){
            if(result)  {
                window.location.href = "main.html";
            }else {
                $('#username').focus();
                loginBtn.removeAttr("disabled");
                alert('failed');
            }
        },
        error: function(err){
            loginBtn.removeAttr("disabled");
        }
    });
};

main.html

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="0o晓月メ">
    <title>main</title>
    <script type="text/javascript" src="libs/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">

        $(function(){
            $('#btn-logout').click(function(event){
                logout();
            });
        });

        function logout(){
            $.ajax({
                type : "POST",
                url : "./j_spring_security_logout",
                success : function(result){
                    window.location.href = 'login.html'
                },
                error: function(){
                }
            });
        };
    </script>
  </head>
  <body >
      <button type="button"  id = "btn-logout">logout</button>
  </body>
</html>

Spring MVC 项目搭建 -4- spring security-添加自定义登录页面的更多相关文章

  1. Spring MVC 项目搭建 -6- spring security 使用自定义Filter实现验证扩展资源验证，使用数据库进行配置

    Spring MVC 项目搭建 -6- spring security使用自定义Filter实现验证扩展url验证,使用数据库进行配置 实现的主要流程 1.创建一个Filter 继承 Abstract ...

  2. Spring MVC 项目搭建 -5- spring security 使用数据库进行验证

    Spring MVC 项目搭建 -5- spring security 使用数据库进行验证 1.创建数据表格(这里使用的是mysql) CREATE TABLE security_role ( id ...

  3. Spring MVC 项目搭建 -3- 快速 添加 spring security

    Spring MVC 项目搭建 -3- 快速 添加 spring security 1.添加 spring-sample-security.xml <!-- 简单的安全检验实现 --> & ...

  4. Spring MVC 项目搭建 -2- 添加service ,dao,junit

    Spring MVC 项目搭建 -2- 添加service ,dao,junit 1.dao public class Hero { private String name; public Strin ...

  5. Spring MVC 项目搭建 -1- 创建项目

    Spring MVC 项目搭建 -1- 创建项目 1.创建 Dynamic Web project (SpringDemo),添加相关jar包 2.创建一个简单的controller类 package ...

  6. IDEA 创建Spring MVC项目搭建

    概述 IntelliJ IDEA是一款更加集成智能的开发工具,相对Myeclipse开发而言,使用起来相对更加的方便:初步手动使用IDEA搭建Spring MVC项目,现将操作流程整理记录如下. 环境 ...

  7. 简单Spring MVC项目搭建

    1.新建Project 开发环境我使用的是IDEA,其实使用什么都是大同小异的,关键是自己用的顺手. 首先,左上角File→New→Project.在Project页面选择Maven,然后勾上图中所示 ...

  8. Java Spring MVC项目搭建（二）——项目配置

    1.站点配置文件web.xml 每一个Spring MVC 项目都必须有一个站点配置文件web.xml,他的主要功能吗....有一位大哥已经整理的很好,我借来了,大家看看: 引用博客地址: http: ...

  9. Java Spring MVC项目搭建（一）——Spring MVC框架集成

    1.Java JDK及Tomcat安装 我这里安装的是JDK 1.8 及 Tomcat 8,安装步骤详见:http://www.cnblogs.com/eczhou/p/6285248.html 2. ...

随机推荐

  1. OpenCV探索之路（十一）：轮廓查找和多边形包围轮廓

    Canny一类的边缘检测算法可以根据像素之间的差异,检测出轮廓边界的像素,但它没有将轮廓作为一个整体.所以要将轮廓提起出来,就必须将这些边缘像素组装成轮廓. OpenCV中有一个很强大的函数,它可以从 ...

  2. 2017年最好的6个WEB前端开发手册下载

    php中文网为你推荐6个web前端开发相关手册下载,适合web开发人员和php web开发人员进行下载参考学习! 一. html5中文手册 通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精 ...

  3. URL的标准格式

    URL的标准格式 scheme://host:port/path?query#fragment 1.  scheme:协议 2. host:主机 3. port:端口 4. path:路径 5. qu ...

  4. SparkR安装部署及数据分析实例

    1. SparkR的安装配置 1.1.       R与Rstudio的安装 1.1.1.           R的安装 我们的工作环境都是在Ubuntu下操作的,所以只介绍Ubuntu下安装R的方法 ...

  5. javascript基础-HTML5

    跨文档消息(Web Messaging cross-document messaging) 原理 往有关联(同一框架/弹出)的文档传递数据. Message Channel在javascript基础- ...

  6. 学习笔记TF020:序列标注、手写小写字母OCR数据集、双向RNN

    序列标注(sequence labelling),输入序列每一帧预测一个类别.OCR(Optical Character Recognition 光学字符识别). MIT口语系统研究组Rob Kass ...

  7. js 排序：sort()方法、冒泡排序、二分法排序。

    js中的排序,这里介绍三种,sort()方法.冒泡排序.二分法排序. 1.sort方法 写法:  数组.sort(); 返回排好序的数组,如果数组里是数字,则由小到大,如果是字符串,就按照第一个字符的 ...

  8. Thinkphp 3.0-3.1版代码执行漏洞

    近日360库带计划中播报的ThinkPHP扩展类库的漏洞已经查明原因:系官方扩展模式中的Lite精简模式中存在可能的漏洞(原先核心更新安全的时候 并没有更新模式扩展部分,现已更新).对于使用标准模式或 ...

  9. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

  10. 排序算法 - 选择排序(selection sort)

    选择排序(Selection sort)跟插入排序一样,也是O(n^2)的复杂度,这个排序方式也可以用我们的扑克牌来解释. 概念 桌面上有一堆牌,也是杂乱无章的,现在我们想将牌由小到大排序,如果使用选 ...