springmvc用bootstrap实现登陆+拦截器的使用

总结：springmvc拦截器的配置使用

                      bootsrap拦截器的配置使用

知识点：class="form-control required"表明可以为input元素添加CSS定制样式。

 

第一步：在index页面中跳转登录方法

<script language="JavaScript">
 window.location.href = "ExamBookInfoQcController/login.do";
</script>

第二步：提交给拦截器进行判断

public class LoginIntercept implements HandlerInterceptor{ 

public boolean preHandle(HttpServletRequest request, HttpServletResponse response, 
            Object handler) throws Exception { 
       // 获取请求的URL 
        String url = request.getRequestURI(); 
       // URL:login.jsp是公开的;这个demo是除了login.jsp是可以公开访问的，其它的URL都进行拦截控制 
        if(url.indexOf("login.do")>=0){ 
            return true; 
        } 
        //获取Session 
     
        HttpSession session = request.getSession(); 
        String username = (String)session.getAttribute("username"); 
         
        if(username != null){ 
            return true; 
        } 
        //不符合条件的，跳转到登录界面 
        request.getRequestDispatcher("/WEB-INF/jsp/login.jsp").forward(request, response); 

          
        return false; 
    }

第三步：提交给服务器进行登陆 ，调用用户表进行判断

@Controller
@Scope("prototype")
@RequestMapping("ExamBookInfoQcController/")
public class LoginCotroller {

  /**
     * 登录
     * @param session
     *          HttpSession
     * @param username
     *          用户名
     * @param password
     *          密码
     * @return
     */ 
    @RequestMapping(value="login") 
    public String login(HttpSession session,String username,String password) throws Exception{       
        //在Session里保存信息 
        session.setAttribute("username", username); 
        //重定向 
        return "redirect:ExamBookInfoQcInfo.do";  
    } 

第四步：springmvc拦截器的配置

spring-mvc.xml

<!--拦截器 -->

         <mvc:interceptors>

                  

                  

                   <mvc:interceptor>

                            <!--/**可以拦截路径不管多少层 -->

                            <mvc:mappingpath="/**" />

                            <beanclass="trainexam.bookmanage.exambookinfoqc.intercept.LoginIntercept"></bean>

                   </mvc:interceptor>

         </mvc:interceptors>

第五步：利用bootstrap展示login.jsp页面

<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> 
        <!--font-awesome 核心我CSS 文件--> 
        <link href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> 
        <!-- 在bootstrap.min.js 之前引入 --> 
        <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> 
        <!-- Bootstrap 核心 JavaScript 文件 --> 
        <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<style type="text/css"> 
            body{background-color:#3399CC;background-size:cover;font-size: 16px;} 
            .form{background: rgba(255,255,255,0.2);width:400px;margin:100px auto;} 
            #login_form{display: block;} 
            #register_form{display: none;} 
            .fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;} 
            input[type="text"],input[type="password"]{padding-left:26px;} 
            .checkbox{padding-left:21px;} 
        </style>
        <script type="text/javascript">
         function login() {
             
                   if ($("input[name='username']").val() == "" || $("input[name='password']").val() == "") {
                          $("#showMsg").html("用户名或密码为空，请输入");
                     
                      } else {
                       
                       //ajax异步提交
                          $.ajax({
                              type: "POST",   //post提交方式默认是get
                              url: "/test01/ExamBookInfoQcController/login.do",
                              data: $("#login_form").serialize(),   //序列化
                              error: function (request) {      // 设置表单提交出错
                                  $("#showMsg").html(request);  //登录错误提示信息
                              },
                            
                              success: function (data) {
                                document.location = "ExamBookInfoQcController/ExamBookInfoQcInfo.do";
                              }
                          });
                      }
                 
         }
        </script>
    </head> 
    <body>    
            <div class="container"> 
        <div class="form row"> 
            <form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="login_form"> 
                 
                <div class="col-sm-9 col-md-9"> 
                    <div class="form-group"> 
                        <i class="fa fa-user fa-lg"></i> 
                        <input class="form-control required" type="text"  name="username" autofocus="autofocus" maxlength="20"/> 
                    </div> 
                    <div class="form-group"> 
                            <i class="fa fa-lock fa-lg"></i> 
                            <input class="form-control required" type="password"  name="password" maxlength="8"/> 
                    </div> 
                    <div class="form-group"> 
                        <label class="checkbox"> 
                            <input type="checkbox" name="remember" value="1"/> 记住密码 
                        </label> 
                        <hr /> 
                        <a href="javascript:;" id="register_btn" class="">注册</a> 
                    </div> 
                    <div class="form-group"> 
                        <input type="submit" class="btn btn-success pull-right" value="登陆 " οnclick="login()"/>    
                    </div> 
                </div> 
            </form> 
        </div> 
 
      
        </div> 
   
    </body>