一、登录页面替换

替换页面：**casLoginView.jsp**

  1. <!DOCTYPE html>
  2. <%@ page session="true" %>
  3. <%@ page pageEncoding="UTF-8" %>
  4. <%@ page contentType="text/html; charset=UTF-8" %>
  5. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  6. <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
  7. <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
  8. <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
  9. <html lang="en">
  10. <head>
  11.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  12.   <meta charset="utf-8">
  13.   <!-- Title and other stuffs -->
  14.   <title>单点登录</title>
  15.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  16.   <meta name="author" content="">
  17.   <link href="res/style.css" rel="stylesheet">
  18.   <link href="res/layui/css/layui.css" rel="stylesheet" >
  19.   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  20.   <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/3.2.1/css/font-awesome.min.css">
  21.   <!-- JS -->
  22.   <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
  23.   <!-- HTML5 Support for IE -->
  24.   <!--[if lt IE 9]>
  25.   <script src="https://cdn.staticfile.org/html5shiv/3.7.3/html5shiv.min.js"></script>
  26.   <![endif]-->
  27.   <script src="res/layui/layui.js" charset="utf-8"></script>
  28.   <script src="res/check.js" charset="utf-8"></script>
  29. </head>
  31. <body>
  33. <!-- Form area -->
  34. <div class="admin-form">
  36.     <div class="row">
  37.       <div class="col-md-12">
  38.         <!-- Widget starts -->
  39.         <div class="widget worange">
  40.           <!-- Widget head -->
  41.           <div class="widget-head">
  42.             <i class="icon-lock"></i> 登陆
  43.           </div>
  45.           <div class="widget-content">
  46.             <div class="padd">
  47.               <!-- Login form -->
  48.               <form:form method="post" id="fm1" cssClass="form-horizontal" commandName="${commandName}"  htmlEscape="true">
  49.                 <!-- Username -->
  50.                 <div class="form-group">
  51.                   <label class="control-label col-lg-3" for="username">账户</label>
  52.                   <div class="col-lg-9">
  53.                     <input type="text" class="form-control" id="username" name="username" value="${username}" 
  54.                            placeholder="用户名/邮箱/手机号">
  55.                   </div>
  56.                 </div>
  57.                 <!-- Password -->
  58.                 <div class="form-group">
  59.                   <label class="control-label col-lg-3" for="password">密码</label>
  60.                   <div class="col-lg-9">
  61.                     <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码">
  62.                   </div>
  63.                 </div>
  65.                 <div class="form-group">
  66.                   <div class="col-lg-9 col-lg-offset-2">
  67.                     <div class="checkbox">
  68.                       <label>
  69.                         <input type="checkbox"> 记住密码
  70.                       </label>
  71.                       <label style="color: #d9534f;">${msg}</label>
  72.                     </div>
  73.                   </div>
  74.                 </div>
  75.                 <input type="hidden" name="isNeedValid" value="true" />
  76.                 <input type="hidden" name="lt" value="${loginTicket}" />
  77.                 <input type="hidden" name="execution" value="${flowExecutionKey}" />
  78.                 <input type="hidden" name="_eventId" value="submit" />
  79.                 <div class="col-lg-9 col-lg-offset-2">
  80.                   <button type="submit" onclick="return check(this.form);"  class="btn btn-danger">登陆</button>
  81.                   <button type="reset"  class="btn btn-default" >重置</button>
  82.                 </div>
  83.                 <br />
  84.               </form:form>
  86.             </div>
  87.           </div>
  89.           <div class="widget-foot">
  90.             没有账号? <a href="#">立即注册</a>
  91.           </div>
  92.         </div>
  93.       </div>
  94.     </div>
  96. </div>
  97. </body>
  98. </html>

前端验证JS：check.js

layui.use('layer', function(){
  var layer = layui.layer;
});
//用户登录时的校验
function check(form){

    if(form.username.value==''){
        layer.tips("请输入用户名","#username");
        location.href="#username";
        return false;
    }
    if(form.password.value==''){
        layer.tips("请输入密码","#password");
        location.href="#password";
        return false;
    }
    return true;

}

页面效果：

image.png

二、多页面

2.1、关键配置解读

login-webflow.xml —登录流程表单，注意：**casLoginView**

<view-state id="viewLoginForm" view="casLoginView" model="credential">
        <binder>
            <binding property="username" />
            <binding property="password" />
        </binder>
        <on-entry>
            <set name="viewScope.commandName" value="'credential'" />
        </on-entry>
        <transition on="submit" bind="true" validate="true" to="realSubmit">
            <evaluate expression="authenticationViaFormAction.doBind(flowRequestContext, flowScope.credential)" />
        </transition>
    </view-state>

default_views.properties —视图具体配置及对应页面，注意：**casLoginView.jsp**

casLoginView.(class)=org.springframework.web.servlet.view.JstlView
casLoginView.url=/WEB-INF/view/jsp/default/ui/casLoginView.jsp

cas.properties —视图解析配置文件引入，注意：**default_views**

cas.viewResolver.basename=default_views

cas-servlet.xml —视图解析器，注意：**${cas.viewResolver.basename}**

<!-- View Resolver -->
  <bean id="viewResolver" class="org.springframework.web.servlet.view.ResourceBundleViewResolver"
        p:order="0">
    <property name="basenames">
      <util:list>
        <value>${cas.viewResolver.basename}</value>
        <value>protocol_views</value>
      </util:list>
    </property>
  </bean>

总结： 也就是通过登录流程上配置视图对象，来控制页面指向它想要的登录页面casLoginView.jsp 若要实现多页面动态可变： 1、增加对应的登录页面，并注册到视图解析器中 2、动态改变登录流程上-视图对象的值 3、如何区分去跳到不同页面：根据登录地址上layout的值区分

2.2、具体实现

a、添加页面

WEB-INF/view/jsp/custom(custom为新建文件夹)目录下： 分别建两个登录页面custom1.jsp、custom2.jsp 注意两个页面要与之前页面要明显区分，不然看不出效果

b、增加视图配置

resources目录下： 建一个我们自定义的配置文件：custom_views.properties 参考default_views.properties增加两组视图配置

### Login view (/login)
#注意不要和其他视图重复:layout+CasLoginView的命名方式
#自定义登录页面1
custom1CasLoginView.(class)=org.springframework.web.servlet.view.JstlView
custom1CasLoginView.url=/WEB-INF/view/jsp/custom/custom1.jsp
#自定义登录页面1
custom2CasLoginView.(class)=org.springframework.web.servlet.view.JstlView
custom2CasLoginView.url=/WEB-INF/view/jsp/custom/custom2.jsp

c、视图解析器新增自定义配置文件

cas-servlet.xml

<!-- View Resolver -->
  <bean id="viewResolver" class="org.springframework.web.servlet.view.ResourceBundleViewResolver"
        p:order="0">
    <property name="basenames">
      <util:list>
        <value>${cas.viewResolver.basename}</value>
        <value>custom_views</value><!--我们自己的配置文件-->
        <value>protocol_views</value>
      </util:list>
    </property>
  </bean>

d、增加视图转换控制方法

cas-servlet.xml

<bean id="switchLoginViewAction" class="com.mac.sso.flow.SwitchLoginViewAction"/>

代码实现

package com.mac.sso.flow;

import org.springframework.webflow.core.collection.ParameterMap;
import org.springframework.webflow.execution.RequestContext;
/**
 * 根据请求参数自动更换登录页面
 * layout=?
 */
public class SwitchLoginViewAction {

    String defultview="casLoginView";

    public final String checkLoginView(RequestContext context) {
        ParameterMap requestParameters = context.getRequestParameters();
        String layout = requestParameters.get("layout");
        System.out.println("layout="+layout);
        if(layout==null||"".equals(layout)){
            return defultview;
        }
        //规则暂定这样
        return layout+"CasLoginView";
    }
}

e、登录表单的视图参数动态获取

login-webflow.xml —登录流程表单 注意：**#{switchLoginViewAction.checkLoginView(flowRequestContext)} **

<!--casLoginView改为动态获取-->
<view-state id="viewLoginForm" view="#{switchLoginViewAction.checkLoginView(flowRequestContext)}" model="credential">
    <binder>
      <binding property="username" />
      <binding property="password" />
    </binder>
    <on-entry>
      <set name="viewScope.commandName" value="'credential'" />
    </on-entry>
    <transition on="submit" bind="true" validate="true" to="realSubmit">
      <evaluate expression="authenticationViaFormAction.doBind(flowRequestContext, flowScope.credential)" />
    </transition>
</view-state>

大功告成！运行测试

2.3、演示效果

三个登录地址登录页面分别为三个页面 http://localhost:8080/login http://localhost:8080/login?layout=custom1 http://localhost:8080/login?layout=custom2

image.png

2.4、新增页面规则

**

custom_views.properties下新增：

custom2CasLoginView.(class)=org.springframework.web.servlet.view.JstlView
custom2CasLoginView.url=/WEB-INF/view/jsp/custom/custom2.jsp

WEB-INF/view/jsp/custom/目录下新增： custom2.jsp登录页面

下一篇：登录验证码