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. kotlin 语言入门指南一

    基于官网的Getting Start部分,翻译如下: 基础语法 定义一个包 包的声明必须放在文件头部: package my.demo import java.util.* // ... 不需要加上p ...

  2. PHP中的运算符

    一.算术运算符   运算符 名称 描述 实例 结果 x + y 加 x 和 y 的和 2 + 2 4 x - y 减 x 和 y 的差 5 - 2 3 x * y 乘 x 和 y 的积 5 * 2 1 ...

  3. java模拟报文

    为了以后节约时间,记录下模拟报文的实现 模拟报文思路:就是后台把接口数据先写在文档里面写死,接口地址不变,在每个接口里面控制是访问的模拟报文还是数据库里面的数据, 对于前端来说所有都是不变的,就是说我 ...

  4. hdu3715

    hdu3715 题意 给出一个递归的伪代码,当 x[a[dep]] + x[b[dep]] != c[dep],就向下递归,给出a,b,c数组的值 问 dep 最大多少.其中 0 <= c[i] ...

  5. pc网页到移动端怎么自动加载适应移动端的css。

    1.通过link标签判断加入 以前听说过在link标签中加media = "handheld",但这个用到安卓或苹果都不管用,后来尝试以下方法,是管用的. <link hre ...

  6. python基础操作_集合_三元运算

    #使用操作文件的时候,可以使用with函数#with open('E:\info.txt','a+') as fr#fr这个值可以是任意值# :#for line in fr:'''with open ...

  7. Python 操作 Azure Blob Storage

    笔者在<Azure 基础:Blob Storage>一文中介绍了 Azure Blob Storage 的基本概念,并通过 C# 代码展示了如何进行基本的操作.最近笔者需要在 Linux ...

  8. javascript痛点之三闭包

    先来看看第一节的例子 'use strict'; function num(){ //用var声明一个变量num1 var num1 = 15; } alert(num1);//num1 is not ...

  9. colinux

    Colinux是什么?2004年,由一名21岁的以色列学生与几名日本的自由程序员合作开发出了一个名为“Cooperative Linux”即“CoLinux”的Linux程序,该程 序可使Linux的 ...

  10. JavaScript中for循环的使用详解

    or循环是循环最紧凑的形式,并包含有以下三个重要部分组成: 循环初始化计数器的初始值.初始化语句执行循环开始之前. 测试语句,将测试如果给定的条件是真还是假.如果条件为真,那么将要执行的循环中给定的代 ...