cas4.2.7定制登录页面样式(并且让页面默认使用中文提示)

目     录

1、让cas服务端的页面默认使用中文

2、定制我们自己想要的登录页面

      2.1 修改cas.properties配置文件

      2.2创建view-cj目录

      2.3 修改view-cj目录下的登录相关的文件

                2.3.1 top.jsp的修改

                2.3.2 bottom.jsp的修改

                2.3.3 casLoginView.jsp的修改

3其他说明

 

1、让cas服务端的页面默认使用中文

          cas4.2.7服务端的所有页面默认是英文的,如果不修改配置文件而要在页面上使用中文提示,需要在访问的每个URL后面使用参数locale=zh_CN指明我们要使用中文。例如登录页面的原始地址是https://127.0.0.1:8090/cas/login

如果我们要让登录页面上提示中文,需要将URL修改为https://127.0.0.1:8090/cas/login?locale=zh_CN

 

           访问每个页面都要指定语言种类,太不科学了,直接修改cas.properties文件,可以让默认语言由英文变成中文(如果你问我cas.properties请先跳到本文的第3章节,看了那两篇文章你就知道在哪里找了)

 在该文件中增加下面的配置项并且重启web容器(此处使用的是tomcat):

 

#默认使用中文

locale.default=zh_CN

 

如图:

 

     在未增加该配置前,登录页面是这样的

如图:

 

    

      增加该配置后,登录页面上是中文提示了

如图:


2、定制我们自己想要的登录页面

           光是把默认语言设置为中文的登录页面显然也不是我们想要的,在cas4.2.7服务端中要定制自己的登录页面样式也很容易。请看下面的步骤。

2.1、修改cas.properties配置文件

      

    在cas.properties中增加配置项:


#cas使用我们想要的页面

cas.themeResolver.pathprefix=/WEB-INF/view-cj/jsp/  

 

如图:

 

  说明:view-cj这个是我们要创建的目录,这个名字可以随便起的,往下看。

2.2、创建view-cj目录

      将WEB-INF目录下的view文件夹复制一份,取名为view-cj

如图:

  

 

2.3、修改view-cj目录下的登录相关的文件

修改3 个文件

\WEB-IN\view-cj\jsp\default\ui\includes\top.jsp

\WEB-IN\view-cj\jsp\default\ui\includes\bottom.jsp

\WEB-IN\view-cj\jsp\default\ui\ casLoginView.jsp

 

       这三个文件中top.jsp是我们看到的登录页面的header部分,bottom.jspfooter部分,casLoginView.jsp是中间部分,你想要长什么样子的登录页面,取决于你怎么修改这3个文件。

例如我想要这样的效果

如图:


 

     下面的内容是我对这三个文件的修改。

2.3.1 top.jsp的修改

     路径是: \WEB-IN\view-cj\jsp\default\ui\includes\top.jsp

     特别说明,由于csdn博客编辑器的问题,会把<%@taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>中的小写java弄成大写的,导致你复制粘贴会出错,你复制粘贴时候请将这个大写的Java修改为小写java即可):

        内容是:


<!DOCTYPEhtml>

 

<%@page  pageEncoding="UTF-8"%>

<%@page  contentType="text/html;charset=UTF-8"%>

<%@taglib  prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>

<%@taglib  prefix="spring"  uri="http://www.springframework.org/tags"%>

<%@taglib  prefix="form"  uri="http://www.springframework.org/tags/form"%>

<%@taglib  prefix="fn"  uri="http://java.sun.com/jsp/jstl/functions"%>

 

<html lang="zh_CN">

<head>

 <meta charset="UTF-8"/>

   <meta name="viewport" content="width=device-width,initial-scale=1"/>

 

   <title>认证系统-登录中心</title>

 

   <meta name="_csrf"  content="${_csrf.token}"/>

   <meta name="_csrf_header" content="${_csrf.headerName}"/>

 

 

   <spring:theme code="standard.custom.css.file" var="customCssFile"/>

   <link  rel="stylesheet"  href="<c:url  value="${customCssFile}"/>"/>

   <link  rel="icon"  href="<c:url value="/favicon.ico"/>"  type="image/x-icon"/>

 

</head>

<body id="cas">

 

<div id="container" >

  <div  style="margin-top:120px;"/>&nbsp;</div>

 <div id="content"  style="width:250px;margin-left:auto;margin-right:auto;">

 

2.3.2 bottom.jsp的修改

    路径是:\WEB-IN\view-cj\jsp\default\ui\includes\bottom.jsp

   内容是:

 

<%@taglibprefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>

 

</div><!-- END #content -->

 

 

 

</div><!-- END #container -->

 

<script  src="https://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>

<spring:theme  code="cas.javascript.file"  var="casJavascriptFile"  text=""/>

<script  type="text/javascript"  src="<c:url  value="${casJavascriptFile}"/>"></script>

 

</body>

</html>

 

 

2.3.3 casLoginView.jsp的修改


     路径是:\WEB-IN\view-cj\jsp\default\ui\ casLoginView.jsp

    内容是:

<jsp:directive.include  file="includes/top.jsp"/>

 

 

 

<div id="cookiesDisabled"  class="errors"  style="display:none;">

   <h2><spring:message code="screen.cookies.disabled.title"/></h2>

   <p><spring:message  code="screen.cookies.disabled.message"/></p>

</div>

 

 

<c:if  test="${not empty registeredService}">

   <c:set var="registeredServiceLogo" value="images/webapp.png"/>

   <c:set var="registeredServiceName" value="${registeredService.name}"/>

   <c:set var="registeredServiceDescription" value="${registeredService.description}"/>

 

   <c:choose>

        <c:when test="${not empty mduiContext}">

            <c:if  test="${not empty mduiContext.logoUrl}">

                <c:set  var="registeredServiceLogo" value="${mduiContext.logoUrl}"/>

            </c:if>

            <c:set var="registeredServiceName" value="${mduiContext.displayName}"/>

            <c:set var="registeredServiceDescription" value="${mduiContext.description}"/>

        </c:when>

        <c:when test="${not empty registeredService.logo}">

            <c:set var="registeredServiceLogo" value="${registeredService.logo}"/>

        </c:when>

   </c:choose>

 

 

   <p/>

</c:if>

 

<div class="box" id="login">

   <form:form  method="post" id="fm1"  commandName="${commandName}"  htmlEscape="true">

 

        <form:errors path="*"  id="msg"  cssClass="errors"  element="div"  htmlEscape="false"/>

 

        <h2><spring:message code="screen.welcome.instructions"/></h2>

 

        <section class="row">

            <label for="username"><spring:message code="screen.welcome.label.netid"/></label>

            <c:choose>

                <c:when  test="${not empty sessionScope.openIdLocalId}">

                    <strong><c:out value="${sessionScope.openIdLocalId}"/></strong>

                    <input  type="hidden" id="username"  name="username"  value="<c:out  value="${sessionScope.openIdLocalId}"/>"/>

                </c:when>

                <c:otherwise>

                    <spring:message  code="screen.welcome.label.netid.accesskey"  var="userNameAccessKey"/>

                    <form:input cssClass="required"   cssErrorClass="error" id="username"  size="25"  tabindex="1"  accesskey="${userNameAccessKey}"   path="username"   autocomplete="off"  htmlEscape="true"/>

                </c:otherwise>

            </c:choose>

        </section>

 

        <section  class="row">

            <label for="password"><spring:message  code="screen.welcome.label.password"/></label>

              

            <spring:message  code="screen.welcome.label.password.accesskey"  var="passwordAccessKey"/>

            <form:password cssClass="required"  cssErrorClass="error"  id="password" size="25"  tabindex="2" path="password"  accesskey="${passwordAccessKey}"  htmlEscape="true" autocomplete="off"/>

            <span  id="capslock-on"  style="display:none;"><p><img src="images/warning.png"  valign="top"><spring:message code="screen.capslock.on"/></p></span>

        </section>

 

      

 

        <section class="rowbtn-row">

          

          <input type="hidden" name="execution"  value="${flowExecutionKey}"/>

            <input  type="hidden"  name="_eventId"  value="submit"/>

 

            <input class="btn-submit"  name="submit"  accesskey="l"  value="<spring:message  code="screen.welcome.button.login"/>"   tabindex="6"    type="submit"/>

            <input class="btn-reset"  name="reset"  accesskey="c"  value="<spring:message code="screen.welcome.button.clear"/>"  tabindex="7"   type="reset"/>

        </section>

   </form:form>

</div>

 

<jsp:directive.include  file="includes/bottom.jsp"/>

 

3、其他说明

           关于如何使用eclipse构建cas服务端的war部署包请看

http://blog.csdn.net/pucao_cug/article/details/68945379

 

       关于如何部署打好的4.2.7版本的war包请看

http://blog.csdn.net/pucao_cug/article/details/68942734

 

       注意:关于部署的这边文章虽然用的是4.1.3版本的war包讲的,但是不影响的,war包的部署方法是一样的,只是要修改配置时候4.1系列和4.2系列还是有比较多的不同之处,具体步骤照着文章来吧。

 

发布了54 篇原创文章 · 获赞 174 · 访问量 82万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章