利用jquery写的左右轮播图特效
字体：[ ] 类型：转载 时间：
一个利用jquery写的左右轮播图，将jquery框架的链接跟图片替换就可以看到效果了,需要的朋友可以参考下
最近不是很忙，练习写了一个轮播图效果，虽然效果跟功能上貌似是没问题，但是我认为在许多东西上面都有待改进，在前端这个职位上我还有很远的路要走，当然要学的东西还有很多，这里仅仅对自己最近研究js的一个记录，我相信以后能写出更好的 将jquery框架的链接跟图片替换就可以看到效果了 源代码如下：
代码如下: &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="http://www.w3.org/1999/xhtml"& &head& &meta http-equiv="Content-Type" content="text/ charset=utf-8" /& &title&轮播图&/title& &style& *{margin:0; padding:0;} body{min-width:320 font-size:12} h1{font-size:18} h2{font-size:14px} h4{font-size:12} p{ word-break:break- line-height:24} ul,ul li,ol,ol li{list-style:} a{text-decoration:} .clear{clear:} .clearfix:after{ display: clear: content:"."; visibility: height:0} #pic_carousel{position:width:1000height:350overflow:margin: 0text-align:} .lunbo_pic{ position: left:0; top:0; overflow: text-align:} .lunbo_pic li{ float: overflow:} .lunbo_pic li a img{ width:1000 display:vertical-align: border:} .lunbo_curso{ position: left:50%; width:125 margin-left:-64 bottom:0; } .lunbo_curso a{ background:url(../images/will_yuan.png) no- float: color:#00F; width:25 cursor:height:25 line-height:25 display: text-align:} .lunbo_curso .small_xz{ color:#F0F;} .arr{ position: top:50%; margin-top:-25 width:30 height:50} #arr_l{ left:0; background:#CCC;} #arr_r{ right:0; background:#CCC;} .tc_kuan{ position: top:50%; left:50%; margin-top:-25 margin-left:-100 width:200 height:50 line-height:50 background:#CCC; color:#000;} &/style& &script type="text/javascript" src="jquery/jquery-1.8.3.min.js"&&/script& &/head& &body& &div id="pic_carousel"& &ul id="lunbo_pic" class="clearfix lunbo_pic"& &li&&a href="#"&&img src="images/insco_p1.jpg" /&&/a&&/li& &li&&a href="#"&&img src="images/insco_p2.jpg" /&&/a&&/li& &li&&a href="#"&&img src="images/insco_p3.jpg" /&&/a&&/li& &li&&a href="#"&&img src="images/insco_p1.jpg" /&&/a&&/li& &li&&a href="#"&&img src="images/insco_p2.jpg" /&&/a&&/li& &/ul& &div id="lunbo_curso" class="lunbo_curso"& &a href="#" class="small_xz"&1&/a& &a href="#"&2&/a& &a href="#"&3&/a& &a href="#"&4&/a& &a href="#"&5&/a& &/div& &span id="arr_l" class="arr"&&/span& &span id="arr_r" class="arr"&&/span& &/div& &script& var b_width = 1000; // 大图的宽度 var speed = 500; // 图片向左移动速度 var s_time = 3000 //图片自动滚动速度 var pic_li = $("#lunbo_pic").children("li"); $(document).ready(function(e) { var $ul_width= pic_li.width() * pic_li. //轮播图的宽度 $("#lunbo_pic").width($ul_width); var small_width = $(".lunbo_curso&a").width() * $(".lunbo_curso&a"). $(".lunbo_curso").width(small_width); $(".lunbo_curso").css("margin-left",-small_width/2); }); $(document).live("click",function(e){ $target = $(e.target); var id = $target.attr('id'); if($target.is("a") && $target.parent($("#lunbo_curso")) ){ $target.addClass("small_xz").siblings().removeClass('small_xz'); var mar_lf = parseInt($target.index() * b_width); $("#lunbo_pic").animate({ left : -mar_lf },speed); } if(id == "arr_l"){ prePage(); } if(id == "arr_r"){ nextPage(); } }); //上一个 function prePage(){ if($(".small_xz").index() == 0){ $("#lunbo_pic").css("left",-4000); $("#lunbo_pic").animate({ "left": -parseInt(pic_li.length *b_width - b_width) },speed); $("#lunbo_curso&a").eq(pic_li.length - 1).addClass("small_xz").siblings().removeClass("small_xz"); $(".small_xz").index() == pic_li.length - 1; }else{ $("#lunbo_curso&a").eq($(".small_xz").index()-1).addClass("small_xz").siblings().removeClass("small_xz"); var mar_lf2 = parseInt($("#lunbo_pic").css("left")) + b_ $("#lunbo_pic").animate({ "left": mar_lf2 },speed); } } //下一个 function nextPage(){ if($(".small_xz").index() == pic_li.length -1){ $("#lunbo_pic").css("left",0); /*$("#lunbo_pic").animate({ "left": 0 },speed);*/ $("#lunbo_curso&a").eq(0).addClass("small_xz").siblings().removeClass("small_xz"); $(".small_xz").index() == 0; }else{ $("#lunbo_curso&a").eq($(".small_xz").index() + 1).addClass("small_xz").siblings().removeClass("small_xz"); var mar_lf2 = parseInt($("#lunbo_pic").css("left")) - b_ $("#lunbo_pic").animate({ "left": mar_lf2 },speed); } } function picRun(){ nextPage(); } intervalTime = setInterval(picRun,s_time); $("#pic_carousel").on("mouseover",function(){ clearInterval(intervalTime); }); $("#pic_carousel").on("mouseout",function(){ intervalTime = setInterval(picRun,s_time);; }); &/script& &/body& &/html&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具java笔试考题_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
java笔试考题
上传于||文档简介
&&j​a​v​a​笔​试​考​题
大小：19.25KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢Java（51）
前端技术（8）
Author: Kagula
&[1]Spring 3.1.2
&[2]Tomcat 7.x
&&& 在《Spring Security学习一》的基础上完善自定义Login界面，并增加了Login方法的自定义。
&&& 这里仅列出源码。
[1]能否把密码明文转成密文,MD5加密。pass.
[2]能否同Spring MVC兼容。pass.
[3]自定义login方法。pass.
[4]个性化提示用户没有权限。pass.
[5]排除对jpg等图片的权限检查。pass.
[6]增加一组URL的权限检查。pass.
[7]自定义404错误。pass.
第一部份配置文件
文档结构如图
&project xmlns=&http://maven.apache.org/POM/4.0.0& xmlns:xsi=&http://www.w3.org/2001/XMLSchema-instance&
xsi:schemaLocation=&http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd&&
&modelVersion&4.0.0&/modelVersion&
&groupId&com.nuoke&/groupId&
&artifactId&testSpringSecurity2&/artifactId&
&packaging&war&/packaging&
&version&0.0.1-SNAPSHOT&/version&
&name&testSpringSecurity2 Maven Webapp&/name&
&url&http://maven.apache.org&/url&
&properties&
&project.build.sourceEncoding&UTF-8&/project.build.sourceEncoding&
&project.reporting.outputEncoding&UTF-8&/project.reporting.outputEncoding&
&spring.version&3.1.2.RELEASE&/spring.version&
&/properties&
&dependencies&
&dependency&
&groupId&org.springframework&/groupId&
&artifactId&spring-core&/artifactId&
&version&${spring.version}&/version&
&!-- &exclusions& &exclusion& &groupId&commons-logging&/groupId& &artifactId&commons-logging&/artifactId&
&/exclusion& &/exclusions& --&
&/dependency&
&dependency&
&groupId&org.springframework&/groupId&
&artifactId&spring-beans&/artifactId&
&version&${spring.version}&/version&
&/dependency&
&dependency&
&groupId&org.springframework&/groupId&
&artifactId&spring-webmvc&/artifactId&
&version&${spring.version}&/version&
&/dependency&
&dependency&
&groupId&org.springframework.security&/groupId&
&artifactId&spring-security-core&/artifactId&
&version&${spring.version}&/version&
&/dependency&
&dependency&
&groupId&org.springframework.security&/groupId&
&artifactId&spring-security-web&/artifactId&
&version&${spring.version}&/version&
&/dependency&
&dependency&
&groupId&org.springframework.security&/groupId&
&artifactId&spring-security-config&/artifactId&
&version&${spring.version}&/version&
&/dependency&
&dependency&
&groupId&org.springframework.security&/groupId&
&artifactId&spring-security-taglibs&/artifactId&
&version&${spring.version}&/version&
&/dependency&
&dependency&
&groupId&jstl&/groupId&
&artifactId&jstl&/artifactId&
&version&1.2&/version&
&/dependency&
&/dependencies&
&finalName&testSpringSecurity2&/finalName&
为了解决“Dynamic Web Module 3.0 requires Java 1.6 or newer.”错误需要下面的plugin --&
&groupId&org.apache.maven.plugins&/groupId&
&artifactId&maven-compiler-plugin&/artifactId&
&version&3.0&/version&
&configuration&
&source&1.7&/source&
&target&1.7&/target&
&/configuration&
&/plugins&
&/project&
&?xml version=&1.0& encoding=&UTF-8&?&
&web-app xmlns:xsi=&http://www.w3.org/2001/XMLSchema-instance&
xmlns=&/xml/ns/javaee&
xsi:schemaLocation=&/xml/ns/javaee /xml/ns/javaee/web-app_3_0.xsd&
id=&schedule-console& version=&3.0&&
&display-name&Archetype Created Web Application&/display-name&
&!-- 配置字符集过滤器 --&
&!-- 必须配置在所有过滤器的前面 --&
&filter-name&encodingFilter&/filter-name&
&filter-class&org.springframework.web.filter.CharacterEncodingFilter&/filter-class&
&init-param&
&param-name&encoding&/param-name&
&param-value&UTF-8&/param-value&
&/init-param&
&!-- 配置项目的编码mapping --&
&filter-mapping&
&filter-name&encodingFilter&/filter-name&
&url-pattern&/*&/url-pattern&
&/filter-mapping&
&!-- 如果同一个bean被定义两次，后面一个优先 --&
&context-param&
&param-name&contextConfigLocation&/param-name&
&param-value&/WEB-INF/spring-servlet.xml,/WEB-INF/spring-security.xml&/param-value&
&/context-param&
&!-- 启动spring容器用，容器用于管理Bean --&
&listener&
&listener-class&org.springframework.web.context.ContextLoaderListener&/listener-class&
&/listener&
&!-- Spring Security会话控制 --&
&listener&
&listener-class&org.springframework.security.web.session.HttpSessionEventPublisher&/listener-class&
&/listener&
&!-- Spring security Filter --&
&filter-name&springSecurityFilterChain&/filter-name&
&filter-class&org.springframework.web.filter.DelegatingFilterProxy&/filter-class&
&filter-mapping&
&filter-name&springSecurityFilterChain&/filter-name&
&url-pattern&/*&/url-pattern&
&/filter-mapping&
&!-- DispatcherServlet 针对MVC上下文加载，即拦截请求，分发请求给Controller --&
&!-- 《ContextLoaderListener初始化的前后文和DispatcherServlet初始化的上下文关系》
/wenda/356953.html --&
&servlet-name&spring&/servlet-name&
&servlet-class&org.springframework.web.servlet.DispatcherServlet&/servlet-class&
&load-on-startup&1&/load-on-startup&
&/servlet&
&!-- url-pattern配置为/，不带文件后缀，会造成其它静态文件(js，css等)不能访问。如配为*.do，则不影响静态文件的访问 --&
&servlet-mapping&
&servlet-name&spring&/servlet-name&
&url-pattern&*.do&/url-pattern&
&/servlet-mapping&
&welcome-file-list&
&welcome-file&index.jsp&/welcome-file&
&/welcome-file-list&
&error-page&
&error-code&404&/error-code&
&location&/My404.jsp&/location&
&/error-page&
&error-page&
&exception-type&java.lang.Exception&/exception-type&
&location&/MyEception.jsp&/location&
&/error-page&
&/web-app&
spring-servlet.xml
&?xml version=&1.0& encoding=&UTF-8&?&
&beans xmlns=&http://www.springframework.org/schema/beans&
xmlns:xsi=&http://www.w3.org/2001/XMLSchema-instance&
xmlns:context=&http://www.springframework.org/schema/context&
xmlns:mvc=&http://www.springframework.org/schema/mvc&
xmlns:tx=&http://www.springframework.org/schema/tx&
xmlns:aop=&http://www.springframework.org/schema/aop&
xsi:schemaLocation=&http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.1.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.1.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-3.1.xsd&&
&!-- Scan Controller Range --&
&context:component-scan base-package=&com.nuoke.controller& /&
&!-- HandlerMapping --&
class=&org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping& /&
&!-- HandlerAdapter --&
class=&org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter& /&
&!-- enable spring mvc annotation driven--&
&mvc:annotation-driven/&
&bean id=&jspViewResolver&
class=&org.springframework.web.servlet.view.InternalResourceViewResolver&&
&property name=&prefix& value=&/WEB-INF/view/& /&
&property name=&suffix& value=&.jsp& /&
&!--定义异常处理页面--&
&!-- 具体哪个页面在web.xml中设置 --&
&bean id=&exceptionResolver& class=&org.springframework.web.servlet.handler.SimpleMappingExceptionResolver&&
&property name=&exceptionMappings&&
&prop key=&java.sql.SQLException&&outException&/prop&
&prop key=&java.io.IOException&&outException&/prop&
&/property&
spring-security.xml
&?xml version=&1.0& encoding=&UTF-8&?&
&b:beans xmlns=&http://www.springframework.org/schema/security&
xmlns:b=&http://www.springframework.org/schema/beans&
xmlns:xsi=&http://www.w3.org/2001/XMLSchema-instance&
xsi:schemaLocation=&http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/security http://www.springframework.org/schema/security/spring-security-3.1.xsd&&
&!--此页面不过滤 --&
&!--仅自定义登录页面的示例 --&
&http pattern=&/main/login.do& security=&none& /&
&!--自定义登录方法的示例 --&
&http pattern=&/main/customLogin.do& security=&none& /&
&!-- 此目录下不过滤 --&
&!-- example http://localhost:8080/testSpringSecurity2/download/c.png --&
&http pattern=&/download/**& security=&none& /&
&!-- 从来没见过auto jump into accessDenied.jsp --&
&http access-denied-page=&/accessDenied.jsp&&
login-page:默认指定的登录页面.
authentication-failure-url:出错后跳转页面.
default-target-url:成功登陆后跳转页面 默认登录保护url
&!-- 示例 一：自定义登录页面 --&
&form-login login-page=&/main/login.do&
default-target-url=&/main/welcome.do&
authentication-failure-url=&/main/login.do?error&
login-processing-url=&/j_spring_security_check&
username-parameter=&username&
password-parameter=&password& /&
&!-- 示例二：自定义登录方法
&!-- 示例二是在示例一Controller的基础上增加一个handler --&
&!-- view目录下增加了customLogin.jsp、customLoginResponse.jsp两个jsp，组成。 --&
&form-login login-page=&/main/customLogin.do&
default-target-url=&/main/welcome.do&/&
&!-- logout-success-url:成功注销后跳转到的页面; --&
&!-- 示例一和示例二的代码可以同时运行 --&
&logout logout-url=&/j_spring_security_logout&
logout-success-url=&/main/login.do&
invalidate-session=&true& /&
&!--访问资源必须有ROLE_ADMIN的权限 --&
&intercept-url pattern=&/main/welcome.do& access=&ROLE_ADMIN& /&
&!--访问/**资源的用户必须具有ROLE_USER的权限 --&
&!-- &intercept-url pattern=&/**& access=&ROLE_USER& /& --&
&!-- 奇怪下面的intercept-url设定对chrome不起作用，但是对IE和Eclipse中的Web Browser起作用。
&!-- 发现，是因为有一次重启session还是有效造成的 --&
&!-- pattern=&/*.do&的设定是不起作用的 --&
&!-- pattern=&/main/*.do&的设定有效的 --&
&!-- &intercept-url pattern=&/main/**& access=&ROLE_USER,ROLE_ADMIN& /& --&
&session-management invalid-session-url=&/sessionexpired.jsp&&
&!-- 必须要有invalid-session-url属性，否则不会踢掉原来的登录
&!-- 被踢掉的用户再发出请求会转到/sessionexpired.jsp页面
&concurrency-control max-sessions=&1&
error-if-maximum-exceeded=&false&/&
&!-- error-if-maximum-exceeded属性为false的话，踢掉原来的登录， max-sessions默认为1 --&
&!-- expired-url=&/kickout.jsp& 不设置的话会提示This session has been expired (possibly due to multiple concurrent logins being attempted as the same user). --&
&!-- 然后再刷新的话，转到/sessionexpired.jsp --&
&!-- expired-url=&/kickout.jsp& 设置的话会转到/sessionexpired.jsp--&
&!-- error-if-maximum-exceeded属性为true的话，如果帐号已经登录，在其它地方这个帐号就登录不了了 --&
&/session-management&
&custom-filter ref=&myFilter& before=&FILTER_SECURITY_INTERCEPTOR& /&
&!--一个自定义的filter，必须包含 authenticationManager,accessDecisionManager,securityMetadataSource三个属性，
我们的所有控制将在这三个类中实现，解释详见具体配置 --&
&b:bean id=&myFilter&
class=&com.nuoke.MyFilterSecurityInterceptor&&
&b:property name=&authenticationManager& ref=&authenticationManager& /&
&b:property name=&accessDecisionManager& ref=&myAccessDecisionManagerBean& /&
&b:property name=&securityMetadataSource& ref=&securityMetadataSource& /&
&!--验证配置，认证管理器，实现用户认证的入口，主要实现UserDetailsService接口即可 --&
&authentication-manager alias=&authenticationManager&&
&authentication-provider user-service-ref=&myUserDetailService&&
&!--如果用户的密码采用加密的话
&password-encoder hash=&md5&/&
&/authentication-provider&
&/authentication-manager&
&!--在这个类中，你就可以从数据库中读入用户的密码，角色信息，是否锁定，账号是否过期等 --&
&b:bean id=&myUserDetailService& class=&com.nuoke.MyUserDetailService& /&
&!--访问决策器，决定某个用户具有的角色，是否有足够的权限去访问某个资源 --&
&b:bean id=&myAccessDecisionManagerBean&
class=&com.nuoke.MyAccessDecisionManager&&
&!--资源数据定义，将所有的资源和权限对应关系建立起来，即定义某一资源可以被哪些角色访问 --&
&b:bean id=&securityMetadataSource&
class=&com.nuoke.MyInvocationSecurityMetadataSource& /&
&/b:beans&
第二部份java源文件
共有7个class文件，这里只列出《学习一》内容不同或没有的java源文件
MyUserDetailService.java
package com.
import java.util.ArrayL
import java.util.C
import org.springframework.dao.DataAccessE
import org.springframework.security.core.GrantedA
import org.springframework.security.core.authority.SimpleGrantedA
import org.springframework.security.core.userdetails.U
import org.springframework.security.core.userdetails.UserD
import org.springframework.security.core.userdetails.UserDetailsS
import org.springframework.security.core.userdetails.UsernameNotFoundE
public class MyUserDetailService implements UserDetailsService {
//登陆验证时，通过username获取用户的所有权限信息，
//并返回User放到spring的全局缓存SecurityContextHolder中，以供授权器使用
public UserDetails loadUserByUsername(String username)
throws UsernameNotFoundException, DataAccessException {
Collection&GrantedAuthority& auths=new ArrayList&GrantedAuthority&();
SimpleGrantedAuthority auth2 = new SimpleGrantedAuthority(&ROLE_ADMIN&);
SimpleGrantedAuthority auth1 = new SimpleGrantedAuthority(&ROLE_USER&);
if(username.equals(&admin&)){
auths=new ArrayList&GrantedAuthority&();
auths.add(auth1);
auths.add(auth2);
//第二个参数是密码。是123的md5码。
User user = new User(username, &202cb962ac152d234b70&, true, true, true, true, auths);
//以后还可以new a class derived from User class，为user存放更多有关这个user的信息。
//参考下文User定义，可以存放用户的更多属性。
//http://blog.csdn.net/ydj7501603/article/details/9049663
MyController.java
package com.nuoke.
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpS
import org.springframework.beans.factory.annotation.A
import org.springframework.security.authentication.AuthenticationM
import org.springframework.security.authentication.UsernamePasswordAuthenticationT
import org.springframework.security.core.A
import org.springframework.security.core.AuthenticationE
import org.springframework.security.core.context.SecurityContextH
import org.springframework.security.core.userdetails.U
import org.springframework.stereotype.C
import org.springframework.web.bind.annotation.RequestM
import org.springframework.web.bind.annotation.RequestP
import org.springframework.web.bind.annotation.ResponseB
import org.springframework.web.servlet.ModelAndV
@Controller
@RequestMapping(value = &/main&)
public class MyController {
@RequestMapping(value = &/admin.do&)
public ModelAndView adminPage() {
ModelAndView model = new ModelAndView();
model.addObject(&title&, &Spring Security Hello World&);
model.addObject(&message&, &这是一个安全被保护的页面!&);
//在MyInvocationSecurityMetadataSource类中指定了保护。
model.setViewName(&admin&);
@RequestMapping(value = &/welcome.do&)
public ModelAndView WelcomeAction() {
ModelAndView model = new ModelAndView();
model.addObject(&title&, &Spring Security Hello World&);
model.addObject(&message&, &这是一个欢迎页面!&);
model.setViewName(&welcome&);
* 仅自定义login页面
* 测试url:
* http://localhost:8080/testSpringSecurity2/main/login.do
@RequestMapping(value = &/login.do&)
public ModelAndView LoginAction(
@RequestParam(value = &error&, required = false) String error,
@RequestParam(value = &logout&, required = false) String logout) {
ModelAndView model = new ModelAndView();
if (error != null) {
model.addObject(&error&, &用户名或密码不正确!&);
if (logout != null) {
model.addObject(&msg&, &您已成功注销系统.&);
model.setViewName(&login&);
//自定义Login方法示例
* 测试Url:
* http://localhost:8080/testSpringSecurity2/main/customLogin.do
* 补充参考资料：
* 《在spring security手动 自定义 用户认证 SecurityContextHolder》
* https://my.oschina.net/lemonzone2010/blog/268452#OSC_h2_1
* /java-api-examples/index.php?api=org.springframework.security.core.context.SecurityContext
@Autowired
private AuthenticationManager authenticationM
@RequestMapping(value=&/customLogin.do&)
public ModelAndView customLoginAction(@RequestParam(defaultValue=&&) String username,
@RequestParam(defaultValue=&&) String password,
HttpServletRequest request){
username = username.trim();
//返回登录页面
ModelAndView model = new ModelAndView();
model.setViewName(&customLogin&);
if(username==null||username.isEmpty()||
password==null||password.isEmpty())
//向AJAX请求返回消息提醒(json字符串)
model.setViewName(&customLoginResponse&);
UsernamePasswordAuthenticationToken authRequest =
new UsernamePasswordAuthenticationToken(username, password);
Authentication authentication = authenticationManager.authenticate(authRequest);
SecurityContextHolder.getContext().setAuthentication(authentication);
HttpSession session = request.getSession();
session.setAttribute(&SPRING_SECURITY_CONTEXT&, SecurityContextHolder.getContext()); // 这个非常重要，否则验证后将无法登陆
model.addObject(&message&,&登录用户：&+authentication.getName());
model.addObject(&ok&,1);//这样view/customLogin.jsp得到成功标记后可以做url跳转。
} catch (AuthenticationException ex) {
model.addObject(&message&,&用户名或密码错误&);
model.addObject(&ok&,0);//为了view/customLogin.jsp得到失败标记后可以提醒用户重新输入用户名、密码。
}//end catch
}//end handler
}//end class
第三部份jsp源文件
参考图一共有十个jsp文件，这里只列出比较重要的几个jsp。
MyException.jsp
&%@ page contentType=&text/charset=UTF-8& language=&java& %&
&title&异常处理页面&/title&
&% Exception ex = (Exception) request.getAttribute(&Exception&);%&
&H2&Exception:&%=ex.getMessage()%&
&%@ page language=&java& contentType=&text/ charset=UTF-8& pageEncoding=&UTF-8&%&
&%@ taglib prefix=&c& uri=&/jsp/jstl/core&%&
&%@ taglib prefix=&fmt& uri=&/jsp/jstl/fmt&%&
&!DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&title&示例一：自定义登录界面&/title&
padding: 15
margin-bottom: 20
border-radius: 4
color: #a94442;
background-color: #f2
border-color: #ebccd1;
padding: 15
margin-bottom: 20
border-radius: 4
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
#login-box {
width: 300
padding: 20
margin: 100
background: #
-webkit-border-radius: 2
-moz-border-radius: 2
border: 1px solid #000;
&body onload='document.loginForm.username.focus();'&
&div id=&login-box&&
&h2&请输入您的用户名与密码&/h2&
&c:if test=&${not empty error}&&
&div class=&error&&${error}&/div&
&c:if test=&${not empty msg}&&
&div class=&msg&&${msg}&/div&
&form name='loginForm'
action=&&c:url value='/j_spring_security_check' /&& method='POST'&
&td&用户:&/td&
&td&&input type='text' name='username' value=''&&/td&
&td&密码:&/td&
&td&&input type='password' name='password' /&&/td&
&td colspan='2'&&input name=&submit& type=&submit&
value=&登录& /&&/td&
&!-- 猜测_csrf是给不支持Cookie的Web Browser准备的。 --&
&!-- &input type=&hidden& name=&${_csrf.parameterName}& value=&${_csrf.token}& /& --&
welcome.jsp
&%@ page language=&java& import=&java.util.*,java.text.*& contentType=&text/ charset=UTF-8& pageEncoding=&UTF-8&%&
&%@ taglib prefix=&c& uri=&/jsp/jstl/core&%&
&%@page session=&false&%&
&h1&标题 : ${title}&/h1&
&h1&消息 : ${message}&/h1&
Date date = new Date();
SimpleDateFormat t = new SimpleDateFormat(&yyyy-MM-dd HH:mm:ss&);
String time = t.format(date);
当前时间：&%= time %&
&%@page language=&java& contentType=&text/ charset=UTF-8& pageEncoding=&UTF-8&%&
&%@taglib prefix=&c& uri=&/jsp/jstl/core&%&
&%@page session=&true&%&
&h1&标题 : ${title}&/h1&
&h1&消息 : ${message}&/h1&
&c:url value=&/j_spring_security_logout&
var=&logoutUrl& /&
&form action=&${logoutUrl}& method=&post& id=&logoutForm&&
&!-- csrf for log out--&
&!-- 猜测_csrf是给不支持Cookie的Web Browser准备的。 --&
&!-- &input type=&hidden&
name=&${_csrf.parameterName}& value=&${_csrf.token}& /& --&
function formSubmit() {
document.getElementById(&logoutForm&).submit();
&c:if test=&${pageContext.request.userPrincipal.name != null}&&
欢迎 : ${pageContext.request.userPrincipal.name} 登录本系统 | &a
href=&javascript:formSubmit()&& 注销&/a&
customLogin.jsp
&%@ page language=&java& contentType=&text/ charset=UTF-8& pageEncoding=&UTF-8&%&
&%@ taglib prefix=&c& uri=&/jsp/jstl/core&%&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&title&自定义登录控制&/title&
&link href=&../common/bootstrap/css/bootstrap.min.css&
rel=&stylesheet&&
&link href=&../common/bootstrap/css/bootstrap-theme.min.css& rel=&stylesheet&&
&script type=&text/javascript&
src=&../common/bootstrap/js/bootstrap.min.js&&&/script&
&script type=&text/javascript&
src=&../common/jquery/jquery-2.1.1.min.js&&&/script&
&div class=&container&&
&div id=&container_demo&&
&div id=&wrapper&&
&div id=&login& class=&animate form&&
&h1&示例二 自定义login方法&/h1&
&form id='loginForm' method=&POST&&
&label for=&& class=&uname& data-icon=&u&& 用户名 &/label&
&input id=&username& name=&username& required=&required& type=&text& placeholder=&myusername or &&
&label for=&& class=&youpasswd& data-icon=&p&& 密码 &/label&
&input id=&password& name=&password& required=&required& type=&password& placeholder=&eg. X8df!90EO&&
&p class=&login button&&
&input type=&submit& id=&submitId& value=&登录&&
&script type=&text/javascript&&
$(function(){
/////////////////登录提交////////////////////////////
$(&#loginForm&).submit(function() {
var username=$(&#username&).val();
var password=$(&#password&).val();
var data={username:username,password:password};
var url=&/testSpringSecurity2/main/customLogin.do&;
type: &POST&,
data: data,
// contentType: &application/json&,
dataType: &json&,
success:function (result) {
if(result.ok){
location.href=&/testSpringSecurity2/main/admin.do&;
$(&.error&).remove();
$(&#loginForm&).prepend(&&div class='error'&&font color='red'&&+result.msg+&&/font&&/div&&);
error:function(XMLHttpRequest, textStatus, errorThrown){
alert('读取超时，请检查网络连接...');
customLoginResponse.jsp
&%@ page language=&java& import=&java.util.*,java.text.*& contentType=&text/ charset=UTF-8& pageEncoding=&UTF-8&%&
&%@ taglib prefix=&c& uri=&/jsp/jstl/core&%&
&%@page session=&false&%&
{&ok&:${ok},&msg&:&${message}&}
登录的时候，如何知道帐户已经在其它地方登录？
[1]《Spring Security》
[2]《intercept-url配置》
参考这篇文章可以限定用户只能使用https协议访问服务
[3]《Spring Security 3.1.2 + Spring Framework 3.1.2+使用Annotation实战指南》
[4]《Spring Security 3.1 自定义实例之登陆》
使用AJAX来验证登录
使用了spring自带的login方法来验证登录
[5]《Spring Security 3.1.2.RELEASE API》
[6]《spring security Controller用户角色的判断》
[7]《How to manually log out a user with spring security?》
[8]《Spring and Angular JS: A Secure Single Page Application》
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：658729次
积分：9508
积分：9508
排名：第1284名
原创：289篇
转载：34篇
评论：148条
(5)(5)(1)(2)(1)(2)(9)(3)(5)(3)(3)(8)(6)(3)(5)(8)(5)(12)(6)(3)(5)(13)(11)(12)(8)(10)(6)(4)(3)(2)(3)(1)(3)(3)(3)(2)(1)(1)(2)(2)(1)(3)(3)(4)(1)(1)(1)(5)(2)(2)(5)(5)(6)(3)(3)(4)(1)(2)(2)(5)(2)(1)(2)(2)(2)(1)(2)(3)(2)(7)(2)(3)(1)(1)(3)(2)(1)(8)(1)(3)(3)(3)(1)(1)(3)(1)(3)(1)(6)(4)(2)