给cas自定义login界面

2. 修改jsp登录页面

离线文件准备好后，就可以对CAS的jsp文件下手了。不过这里强烈建议不要在原有的文件上进行修改，最好建立一份新的theme。具体办法如下：

（1）停掉Tomcat服务，进入“%TOMCAT_HOME%\webapps\cas\WEB-INF\view\jsp”文件夹，把default文件夹复制一份在本目录下，取名“custom”。

（2）进入“%TOMCAT_HOME%\webapps\cas\themes”文件夹，将default文件夹复制一份在本目录下，取名“custom”。

（3）进入“%TOMCAT_HOME%\webapps\cas\WEB-INF\classes”文件夹，将“default_views.properties”文件复制一份并重新命名为“custom_views.properties”。

（4）将离线登录页面中做好的“cas.css”文件拷贝到新建的“%TOMCAT_HOME%\webapps\cas\themes\custom”文件夹；将样式文件中用到的图片拷贝到“%TOMCAT_HOME%\webapps\cas\images”文件夹。（注意：css文件中引用图片的相对路径不要搞错。）

（5）接下来是修改“%TOMCAT_HOME%\webapps\cas\WEB-INF\view\jsp\custom\ui”下的casLoginView.jsp文件以及includes文件夹下的“top.jsp”、“bottom.jsp”两个文件了。有了对离线文件的修改经验，对这三个文件改起来要相对容易一些。（注意：不要动任何文件中的程序代码。）

这些文件的修改可根据个人需要进行，不过值得注意的是，在bottom.jsp文件的最下方可以看到jquery文件的引用路径为：

1 2	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>

 

强烈建议改为本地路径。毕竟一旦将CAS放置在内网，将造成jQuery文件异常。

将jQuery脚本文件及其它脚本文件拷贝到“%TOMCAT_HOME%\webapps\cas\js”文件夹下，并将bottom.jsp文件中的引用修改过来。修改后的内容如下：

1 2 3 4 5 6 7 8 9

<script type="text/javascript" src="<c:url value="/js/jquery.min.js" />"></script> <script type="text/javascript" src="<c:url value="/js/jquery-ui.min.js" />"></script> <script type="text/javascript" src="<c:url value="/js/cas.js" />"></script> <script type="text/javascript" src="<c:url value="/js/jquery.watermark.min.js" />"></script> <script language="javascript" type="text/javascript">         $(function () {              $("#username").watermark("\u7528\u6237\u540d\u002f\u90ae\u7bb1\u002f\u624b\u673a\u53f7", "watermark");     }); </script>

 

（6）用管理员身份启动文本编辑器，打开“%TOMCAT_HOME%\webapps\cas\WEB-INF\classes\cas-theme-default.properties”文件，将“standard.custom.css.file”属性指向我们自己的css文件，代码如下：

1	standard.custom.css.file=/themes/custom/cas.css

 

（7）用管理员身份启动文本编辑器，打开“%TOMCAT_HOME%\webapps\cas\WEB-INF\classes\custom_views.properties”文件，将里面所有字符串“/default/”替换成“/custom/”。

（8）用管理员身份启动文本编辑器，打开“%TOMCAT_HOME%\webapps\cas\WEB-INF\cas.properties”文件，把 cas.viewResolver.basename=default_views  修改为 cas.viewResolver.basename=custom_views 。

（9）保存全部修改。启动Tomcat服务，测试下效果。有可能显示原来的界面，可尝试把“%TOMCAT_HOME%\work\Catalina”目录下的文件夹清空掉再试。