[img]http://wuxun1997.iteye.com/upload/picture/pic/42727/8948e8b6-7a46-31c2-bd4b-5a8b9838aa03.jpg[/img]
登录界面的设计比较特别,因为按正规程序来走界面是设计出来的,但我无意中在网上找到了上面这张很酷的图 片,找到了之后很想用它,便自己给它实现了一下,所以严格来说这个登录界面不是设计出来的,而是我用一些特别的手段做出来的,而且登录的验证也是很简单的。当然这是我个人的喜好,真正的项目是不可以这样做的,你会发现有很多显示的问题,而且验证也不是这么来走,一般都是采用数据库来实现。
这里我把图片设置为背景图片插入,然后在这个图片的“用户”后面那个小方框那里放上input控件,这样就覆盖了原来的用户输入框,用同样的方法搞定密码输入框和登录按钮。当然这里需要耐心去调input控件的坐标。登录按钮也可以采用该图片的usemap属性来定位,通过map的area属性把原来图片的登录按钮设置成图片热区,再用js把超链接设置成一个提交按钮,不过通过这种方式提交的话按回车键是没有用的,只能用鼠标点,这一点很让人不爽,所以还是建议用input覆盖吧。
接下来的关键问题是怎么进行登录验证?这里不是利用数据库来验证,而是采用了一种比较简单却实现起来不那么顺利的验证:Tomcat安全验证,即把登录Tomcat时的用户名和密码验证搬到了这个登录界面来了。具体怎么做呢?很简单,只要找到Tomcat的conf文件夹下的tomcat-users.xml文件,并修改里面的相关配置就可以,比如:
<?xml version='1.0' encoding='utf-8'?>
<tomcat-users>
<role rolename="admin"/>
<role rolename="tomcat"/>
<role rolename="role5"/>
<user username="jimmy" password="123456" roles="role5"/>
<user username="tomcat" password="tomcat" roles="tomcat"/>
<user username="admin" password="123456" roles="admin"/>
</tomcat-users>
然后在工程的web.xml最后面加上登录配置,这一段配置的格式是固定的,不能改:
<login-config>
<auth-method>FORM</auth-method>
<form-login-config>
<form-login-page>/WEB-INF/views/login.jsp</form-login-page>
<form-error-page>/WEB-INF/views/error.jsp</form-error-page>
</form-login-config>
</login-config>
最后设置login.jsp的表单提交的目标地址,以及用户名和密码的input控件上的名字,都必须按规定来:
<form method="POST" action="/j_security_check">
<input type="text" name="j_username">
<input type="text" name="j_password">
按照常规是这样走,但这时问题来了,点击登录按钮提交表单后它链接到了一个404页面去,提示找不到 /j_security_check这个地址。原因是约束没配,要在web.xml加入资源约束:
<security-constraint>
<web-resource-collection>
<web-resource-name>Protected Area</web-resource-name>
<url-pattern>/resources/*</url-pattern>
<url-pattern>/dic/*</url-pattern>
<url-pattern>/fee/*</url-pattern>
<url-pattern>/register/*</url-pattern>
<url-pattern>/index.jsp</url-pattern>
</web-resource-collection>
<auth-constraint>
<role-name>admin</role-name>
<role-name>role5</role-name>
</auth-constraint>
</security-constraint>
<security-role>
<role-name>role5</role-name>
</security-role>
<security-role>
<role-name>admin</role-name>
</security-role>
404没了,但400却跑出来了,原来使用tomcat的这个安全验证首先必须要先访问一个页面,再使用这个登录机制它才会跳到原来这个页面,比如:首先访问 index.jsp,然后再访问login.jps,这个登录页面在登录成功后才会到index.jsp去,要不然就会有这个错误。也就是说,如果要利用 tomcat来实现验证,可以这样来走:先试着冲进门里面(index.jsp)去,冲不进去后再敲门(login.jsp),得到主人的许可后(验证成功)这一次才能名正言顺的进门,要不然它就不知道该去哪里了(400页面)。
问题是如果我们先进入index.jsp那么我们还要验证干吗?解决方法其实也很简单,利用tomcat自己的机制,把login.jsp放进WEB-INF里面去,因为tomcat不允许直接访问WEB-INF文件夹里面的文件,所以我们首先不会去login.jsp,也就是说会先去访问index页面,因为在tomcat的配置文件里最后面有这样一段话:
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
它把index页面当成了默认的加载页面,那么我们一进入tomcat它就自己把我们带到了index.jsp,相当于我们去冲门了,但是,很重要的一点是,在上面我们已经把index页面放进一个约束里面了,把它关联到登录页面,也就是所在每次访问index.jsp之前必须先访问login.jps,也就是把index.jsp保护起来了,这时它自然会再退出来敲门,而冲门这个动作是瞬间发生的,我们根本无法用肉眼看见,这样就把第一次访问index.jsp隐藏起来了,所以当显示login.jsp来到在我们面前时,index.jsp已经飘然的离开了。
登录流程:index.jsp(默认页面,不显示,被隐藏) -> login.jsp(登录成功) -> index.jsp(显示)
登录界面的设计比较特别,因为按正规程序来走界面是设计出来的,但我无意中在网上找到了上面这张很酷的图 片,找到了之后很想用它,便自己给它实现了一下,所以严格来说这个登录界面不是设计出来的,而是我用一些特别的手段做出来的,而且登录的验证也是很简单的。当然这是我个人的喜好,真正的项目是不可以这样做的,你会发现有很多显示的问题,而且验证也不是这么来走,一般都是采用数据库来实现。
这里我把图片设置为背景图片插入,然后在这个图片的“用户”后面那个小方框那里放上input控件,这样就覆盖了原来的用户输入框,用同样的方法搞定密码输入框和登录按钮。当然这里需要耐心去调input控件的坐标。登录按钮也可以采用该图片的usemap属性来定位,通过map的area属性把原来图片的登录按钮设置成图片热区,再用js把超链接设置成一个提交按钮,不过通过这种方式提交的话按回车键是没有用的,只能用鼠标点,这一点很让人不爽,所以还是建议用input覆盖吧。
接下来的关键问题是怎么进行登录验证?这里不是利用数据库来验证,而是采用了一种比较简单却实现起来不那么顺利的验证:Tomcat安全验证,即把登录Tomcat时的用户名和密码验证搬到了这个登录界面来了。具体怎么做呢?很简单,只要找到Tomcat的conf文件夹下的tomcat-users.xml文件,并修改里面的相关配置就可以,比如:
<?xml version='1.0' encoding='utf-8'?>
<tomcat-users>
<role rolename="admin"/>
<role rolename="tomcat"/>
<role rolename="role5"/>
<user username="jimmy" password="123456" roles="role5"/>
<user username="tomcat" password="tomcat" roles="tomcat"/>
<user username="admin" password="123456" roles="admin"/>
</tomcat-users>
然后在工程的web.xml最后面加上登录配置,这一段配置的格式是固定的,不能改:
<login-config>
<auth-method>FORM</auth-method>
<form-login-config>
<form-login-page>/WEB-INF/views/login.jsp</form-login-page>
<form-error-page>/WEB-INF/views/error.jsp</form-error-page>
</form-login-config>
</login-config>
最后设置login.jsp的表单提交的目标地址,以及用户名和密码的input控件上的名字,都必须按规定来:
<form method="POST" action="/j_security_check">
<input type="text" name="j_username">
<input type="text" name="j_password">
按照常规是这样走,但这时问题来了,点击登录按钮提交表单后它链接到了一个404页面去,提示找不到 /j_security_check这个地址。原因是约束没配,要在web.xml加入资源约束:
<security-constraint>
<web-resource-collection>
<web-resource-name>Protected Area</web-resource-name>
<url-pattern>/resources/*</url-pattern>
<url-pattern>/dic/*</url-pattern>
<url-pattern>/fee/*</url-pattern>
<url-pattern>/register/*</url-pattern>
<url-pattern>/index.jsp</url-pattern>
</web-resource-collection>
<auth-constraint>
<role-name>admin</role-name>
<role-name>role5</role-name>
</auth-constraint>
</security-constraint>
<security-role>
<role-name>role5</role-name>
</security-role>
<security-role>
<role-name>admin</role-name>
</security-role>
404没了,但400却跑出来了,原来使用tomcat的这个安全验证首先必须要先访问一个页面,再使用这个登录机制它才会跳到原来这个页面,比如:首先访问 index.jsp,然后再访问login.jps,这个登录页面在登录成功后才会到index.jsp去,要不然就会有这个错误。也就是说,如果要利用 tomcat来实现验证,可以这样来走:先试着冲进门里面(index.jsp)去,冲不进去后再敲门(login.jsp),得到主人的许可后(验证成功)这一次才能名正言顺的进门,要不然它就不知道该去哪里了(400页面)。
问题是如果我们先进入index.jsp那么我们还要验证干吗?解决方法其实也很简单,利用tomcat自己的机制,把login.jsp放进WEB-INF里面去,因为tomcat不允许直接访问WEB-INF文件夹里面的文件,所以我们首先不会去login.jsp,也就是说会先去访问index页面,因为在tomcat的配置文件里最后面有这样一段话:
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
它把index页面当成了默认的加载页面,那么我们一进入tomcat它就自己把我们带到了index.jsp,相当于我们去冲门了,但是,很重要的一点是,在上面我们已经把index页面放进一个约束里面了,把它关联到登录页面,也就是所在每次访问index.jsp之前必须先访问login.jps,也就是把index.jsp保护起来了,这时它自然会再退出来敲门,而冲门这个动作是瞬间发生的,我们根本无法用肉眼看见,这样就把第一次访问index.jsp隐藏起来了,所以当显示login.jsp来到在我们面前时,index.jsp已经飘然的离开了。
登录流程:index.jsp(默认页面,不显示,被隐藏) -> login.jsp(登录成功) -> index.jsp(显示)