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. jQuery选择器的的优点

    jQuery选择器的的优点 选择器想必大家都不陌生,今天呢,我就给大家介绍一下jQuery选择器的优点: jQuery选择器更简洁的写法: jQuery完善的处理机制: jQuery选择器判断dom节 ...

  2. nodejs6下使用koa2

    koa2里面使用ES7的语法,如async.await所以需要运行在node7.6之后:但在node7.6之前也可以利用babel是的koa2可以运行. 首先项目中安装babel,和babel的几个模 ...

  3. DB太大？一键帮你收缩所有DB文件大小（Shrink Files for All Databases in SQL Server）

    本文介绍一个简单的SQL脚本,实现收缩整个Microsoft SQL Server实例所有非系统DB文件大小的功能. 作为一个与SQL天天打交道的程序猿,经常会遇到DB文件太大,把空间占满的情况: 而 ...

  4. 树莓派安装FLASK服务；并在端网页读取 GPIO状态和系统时间

    做过一些物联网的作品:因为不想一直做APP来控制,因为不能每个人都去下载你自己做的APP,浏览器大家都是有的:那么每个人通过浏览器WEB来访问我们服务器,岂不是很简单和方便,采用flask+pytho ...

  5. java虚拟机学习-JVM调优总结-垃圾回收面临的问题（8）

    如何区分垃圾 上面说到的“引用计数”法,通过统计控制生成对象和删除对象时的引用数来判断.垃圾回收程序收集计数为0的对象即可.但是这种方法无法解决循环引用.所以,后来实现的垃圾判断算法中,都是从程序运行 ...

  6. jQuery中易混淆知识点总结（持续更新）

    find()与children() <body> <ul class="level-1"> <li class="item-i"& ...

  7. JS 浏览器cookie的设置，读取，删除

    JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的. 而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一 ...

  8. 《算法4》2.1 - 选择排序算法(Selection Sort), Python实现

    选择排序算法(Selection Sort)是排序算法的一种初级算法.虽然比较简单,但是基础,理解了有助于后面学习更高深算法,勿以勿小而不为. 排序算法的语言描述: 给定一组物体,根据他们的某种可量化 ...

  9. 我做的第一个程序（菜鸟的java课堂笔记）

    内存: 堆区,栈区,常量区,计数区,代码区: 数据类型: 基本数据类型:整形,浮点型,布尔型 boolean 只能返回真假值,字符型: 引用数据类型:类,数组: 基本数据类型-->直接存放到栈区 ...

  10. 在Intellij Idea中使用JSTL标签库

    习惯了eclipse和myeclipse开发的我们总是依赖于系统的插件,而当我想当然的以为IntelliJ IDEA 的jstl 的使用应该和myeclispe一样,当时使用起来却到处碰壁,完全找不到 ...