cas4.2.7学习（四）cas server 修改登陆页面样式

1、在项目WEB-INF下创建一个新的文件夹 名字随便起，例如：view-newlogin

2、将target\m2e-wtp\overlays\cas-server-webapp-4.2.7.war\WEB-INF\view\下的jsp文件夹拷贝到新建的文件夹view-newlogin中

3、如上图将 target\m2e-wtp\overlays\cas-server-webapp-4.2.7.war 下对应的 css、images、js、themes 文件夹也拷贝上来到 webapp下，最终拷贝好的目录如下：

4、修改cas.properties中视图路径指向：

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

打开注释，并修改为：

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

5、修改样式，这个就看个人本地需要修改成什么样子了，这里只列出其中不能动的部分，其余的可以随意改

主要需要修改的文件有三个 view-newlogin/jsp/default/ui/casLoginView.jsp、view-newlogin/jsp/default/ui/includes/下的top.jsp和bottom.jsp

5.1、如果不要头和脚，将 casLoginView.jsp中的 <jsp:directive.include file="includes/top.jsp" />

或者 <jsp:directive.include file="includes/bottom.jsp" />删掉即可。

自己用的一些js脚本 、css样式等文件 在casLoginView.jsp中做引入

5.2、如果需要头，则将自己用的一些js脚本 、css样式等文件 在top.jsp中做引入，例如：

声明上下文：

引入自定义脚本、样式文件：

头部的html部分的主要代码在<header></heard>中，我们完全可以删掉里边原来的标签，并加入自己的代码，例如：

<header>
    <div class="header">
		<div class="header-box">
			<div class="logo-new">
				<a href="javasrcipt:;"><Img style="width:210px" src="<%=webpath%>/images/logo8.png"></a>
			</div>
			<h4>这是我自定义样式的头部</h4>
		</div>
	</div>
  </header>

5.3 修改主体部分casLoginView.jsp

a、我们的表单必须用

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

包含起来。

b、里边的用户名、密码标签的 id、name 属性不能变：

<input id="username" name="username" type="text"  class="pp_od" />

<input id="password" name="password" type="password" placeholder="请输入密码" class="pp_od" />

c、登陆按钮模块里边的

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

不能变，

d、登陆和清空按钮可以改变样式，和里边的value，但是不能将其标签也改掉，例如改成<a>标签，是不行的

除了以上这四点之外，其余的都可删掉，或者修改

给出一个样例：

<%@ page pageEncoding="UTF-8" %>
<jsp:directive.include file="includes/top.jsp" />

<div class="login-wrap">
	<div class="wrap_inner">
		<img src="<%=webpath%>/images/coe.png" class="bis" /> 
		<img src="<%=webpath%>/images/dian2.png" class="bit-3" /> 
		<img src="<%=webpath%>/images/dian1.png" class="bit-1" /> 
		<img src="<%=webpath%>/images/dian2.png" class="bit-2">
		<div class="white">
			<div class="wenben">
				<p>欢迎登录系统！</p>
				<span>请登录</span>
			</div>
			<div class="biaodan">
				<form:form method="post" id="fm1" commandName="${commandName}" htmlEscape="true">
					<div class="yonhu">
						<img src="<%=webpath%>/images/urser.png" class="people">
						<input id="username" name="username" type="text" style="width:100%;border:none;"
							placeholder="请输入用户名" class="pp_od" autocomplete="off"
							onblur='queryLoginUserJob(this)'>
					</div>
					<div class="yonhu" id="selJobTR" style="display: none; margin-bottom: 18px;">

					</div>
					<div class="yonhu" style="margin-bottom: 10px;">
						<img src="<%=webpath%>/images/password.png" class="people">
						<input id="password" name="password" type="password"
							placeholder="请输入密码" class="pp_od" style="width:100%;border:none;" autocomplete="off" >
					</div>
					<div class="forget">
						<div id="loginErrorMsgTR" style="display:none;float:left;">
							<div class="kuang select"></div>
							<span class="red12" id="loginErrorMsg"></span>
						</div>
						<a href="javascript:;" class="mima" onclick="wangjimima()">忘记密码</a>
					</div>
					<div id="validateButton" class="sure">
					 	<input type="hidden" name="execution" value="${flowExecutionKey}" />
            			<input type="hidden" name="_eventId" value="submit" />
            			<input type="hidden" id="sys_url" name="sys_url" value="http://127.0.0.1:8081/prdicman" />
            			<input class="sure" name="submit" accesskey="l" value="登 陆" tabindex="6" type="submit" />
					</div>
				</form:form>
			</div>
		</div>
	</div>
</div>
<!-- 下边这几个div是补充top.jsp中没有结束的标签，这样页面结构才算完整，避免在低版本IE中出现兼容问题 -->
</div>
</div>
</body>
</html>

 

页脚部分就不赘述了，随便改就行