Java Spring MVC进阶（1）--Spring MVC+H5+AJAX

       springMVC与jsp整合的例子和项目比较多，但是与html5整合的资料较少，对jsp不太熟，准备用springMVC +html5，想用html作视图，springMVC做后端接口，AJAX与后端交互，经过资料检索和整合，实践成功，下面附一下有用的 配置。

      首先是web.xml的配置：

1、静态资源不过滤

     如果只配置拦截类似于*.do格式的url，则对静态资源的访问是没有问题的，但是如果配置拦截了所有的请求（如我们上面配置的“/”），就会造成js文件、css文件、图片文件等静态资源无法访问。
    一般实现拦截器主要是为了权限管理，主要是拦截一些url请求，所以不对静态资源进行拦截。要过滤掉静态资源一般有两种方式，
    第一种是采用<mvc:default-servlet-handler />，（一般Web应用服务器默认的Servlet名称是"default"，所以这里我们激活Tomcat的defaultServlet来处理静态文件，在web.xml里配置如下代码即可：）

[html] view plain copy

1. <!--　该servlet为tomcat,jetty等容器提供,将静态资源映射从/改为/static/目录，如原来访问　http://localhost/foo.css　,现在http://localhost/static/foo.css　-->  
2. <!-- 不拦截静态文件 -->  
3. <servlet-mapping>  
4.     <servlet-name>default</servlet-name>  
5.     <url-pattern>/js/*</url-pattern>  
6.     <url-pattern>/css/*</url-pattern>  
7.     <url-pattern>/images/*</url-pattern>  
8.     <url-pattern>/fonts/*</url-pattern>  
9. </servlet-mapping>  

         Tomcat, Jetty, JBoss, and GlassFish  默认 Servlet的名字 -- "default"
        Resin 默认 Servlet的名字 -- "resin-file"
        WebLogic 默认 Servlet的名字  -- "FileServlet"
        WebSphere  默认 Servlet的名字 -- "SimpleFileServlet"
        
       如果你所有的Web应用服务器的默认Servlet名称不是"default"，则需要通过default-servlet-name属性显示指定：

[html] view plain copy

1. <mvc:default-servlet-handler default-servlet-name="所使用的Web服务器默认使用的Servlet名称" />  

     第二种是采用<mvc:resources />，在springmvc的配置文件中加入以下代码：

[html] view plain copy

1. <mvc:resources mapping="/js/**" location="/static_resources/javascript/"/>    
2. <mvc:resources mapping="/styles/**" location="/static_resources/css/"/>    
3. <mvc:resources mapping="/images/**" location="/static_resources/images/"/>  

2、自定义拦截器

    SpringMVC的拦截器HandlerInterceptorAdapter对应提供了三个preHandle，postHandle，afterCompletion方法。preHandle在业务处理器处理请求之前被调用，
    postHandle在业务处理器处理请求执行完成后,生成视图之前执行，afterCompletion在DispatcherServlet完全处理完请求后被调用,可用于清理资源等 。所以要想实现自己的权限管理逻辑，需要继承HandlerInterceptorAdapter并重写其三个方法。
    首先在springmvc.xml中加入自己定义的拦截器我的实现逻辑CommonInterceptor，

[html] view plain copy

1. <!--配置拦截器, 多个拦截器,顺序执行 -->  
2. <mvc:interceptors>    
3.     <mvc:interceptor>    
4.         <!-- 匹配的是url路径， 如果不配置或/**,将拦截所有的Controller -->  
5.         <mvc:mapping path="/" />  
6.         <mvc:mapping path="/user/**" />  
7.         <mvc:mapping path="/test/**" />  
8.         <bean class="com.alibaba.interceptor.CommonInterceptor"></bean>    
9.     </mvc:interceptor>  
10.     <!-- 当设置多个拦截器时，先按顺序调用preHandle方法，然后逆序调用每个拦截器的postHandle和afterCompletion方法 -->  
11. </mvc:interceptors>  

    我的拦截逻辑是“在未登录前，任何访问url都跳转到login页面；登录成功后跳转至先前的url”，具体代码如下：

[java] view plain copy

1. /** 
2.  *  
3.  */  
4. package com.alibaba.interceptor;  
5.   
6. import javax.servlet.http.HttpServletRequest;  
7. import javax.servlet.http.HttpServletResponse;  
8.   
9. import org.slf4j.Logger;  
10. import org.slf4j.LoggerFactory;  
11. import org.springframework.web.servlet.ModelAndView;  
12. import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;  
13.   
14. import com.alibaba.util.RequestUtil;  
15.   
16.   
17. /** 
18.  * @author tfj 
19.  * 2014-8-1 
20.  */  
21. public class CommonInterceptor extends HandlerInterceptorAdapter{  
22.     private final Logger log = LoggerFactory.getLogger(CommonInterceptor.class);  
23.     public static final String LAST_PAGE = "com.alibaba.lastPage";  
24.     /* 
25.      * 利用正则映射到需要拦截的路径     
26.       
27.     private String mappingURL; 
28.      
29.     public void setMappingURL(String mappingURL) {     
30.                this.mappingURL = mappingURL;     
31.     }    
32.   */  
33.     /**  
34.      * 在业务处理器处理请求之前被调用  
35.      * 如果返回false  
36.      *     从当前的拦截器往回执行所有拦截器的afterCompletion(),再退出拦截器链 
37.      * 如果返回true  
38.      *    执行下一个拦截器,直到所有的拦截器都执行完毕  
39.      *    再执行被拦截的Controller  
40.      *    然后进入拦截器链,  
41.      *    从最后一个拦截器往回执行所有的postHandle()  
42.      *    接着再从最后一个拦截器往回执行所有的afterCompletion()  
43.      */    
44.     @Override    
45.     public boolean preHandle(HttpServletRequest request,    
46.             HttpServletResponse response, Object handler) throws Exception {    
47.         if ("GET".equalsIgnoreCase(request.getMethod())) {  
48.             RequestUtil.saveRequest();  
49.         }  
50.         log.info("==============执行顺序: 1、preHandle================");    
51.         String requestUri = request.getRequestURI();  
52.         String contextPath = request.getContextPath();  
53.         String url = requestUri.substring(contextPath.length());  
54.         
55.         log.info("requestUri:"+requestUri);    
56.         log.info("contextPath:"+contextPath);    
57.         log.info("url:"+url);    
58.           
59.         String username =  (String)request.getSession().getAttribute("user");   
60.         if(username == null){  
61.             log.info("Interceptor：跳转到login页面！");  
62.             request.getRequestDispatcher("/WEB-INF/jsp/login.jsp").forward(request, response);  
63.             return false;  
64.         }else  
65.             return true;     
66.     }    
67.     
68.     /** 
69.      * 在业务处理器处理请求执行完成后,生成视图之前执行的动作    
70.      * 可在modelAndView中加入数据，比如当前时间 
71.      */  
72.     @Override    
73.     public void postHandle(HttpServletRequest request,    
74.             HttpServletResponse response, Object handler,    
75.             ModelAndView modelAndView) throws Exception {     
76.         log.info("==============执行顺序: 2、postHandle================");    
77.         if(modelAndView != null){  //加入当前时间    
78.             modelAndView.addObject("var", "测试postHandle");    
79.         }    
80.     }    
81.     
82.     /**  
83.      * 在DispatcherServlet完全处理完请求后被调用,可用于清理资源等   
84.      *   
85.      * 当有拦截器抛出异常时,会从当前拦截器往回执行所有的拦截器的afterCompletion()  
86.      */    
87.     @Override    
88.     public void afterCompletion(HttpServletRequest request,    
89.             HttpServletResponse response, Object handler, Exception ex)    
90.             throws Exception {    
91.         log.info("==============执行顺序: 3、afterCompletion================");    
92.     }    
93.   
94. }    

    注：上述代码里我写了一个RequestUtil,主要实现获取当前Request、Session对象，保存和加密页面，取出等功能。

至此，拦截器已经实现了，效果如图：

我直接访问/test/hello，会被拦截

登录成功后会跳转至/test/hello对应的页面

 

3、配置html视图

接下来是springMVC-servlet文件：

 

[html] view plain copy

print?

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <beans xmlns="http://www.springframework.org/schema/beans"  
3.  xmlns:context="http://www.springframework.org/schema/context"  
4.  xmlns:p="http://www.springframework.org/schema/p"  
5.  xmlns:mvc="http://www.springframework.org/schema/mvc"  
6.  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
7.  xmlns:task="http://www.springframework.org/schema/task"  
8.  xsi:schemaLocation="http://www.springframework.org/schema/beans  
9.       http://www.springframework.org/schema/beans/spring-beans-3.0.xsd  
10.       http://www.springframework.org/schema/context  
11.       http://www.springframework.org/schema/context/spring-context.xsd  
12.       http://www.springframework.org/schema/mvc  
13.       http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd  
14.       http://www.springframework.org/schema/task   
15.       http://www.springframework.org/schema/task/spring-task.xsd">  
16.         
17.      <!--<task:executor id="executor" pool-size="5" />    
18.       <task:scheduler id="scheduler" pool-size="10" />    
19.       <task:annotation-driven executor="executor" scheduler="scheduler" />   
20.        -->  
21.         
22.      <context:component-scan base-package="com.qingshuang.circ"/>  
23.         
24.       <!-- 对模型视图名称的解析，在请求时模型视图名称添加前后缀  
25.       <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
26.         <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>  
27.         <property name="prefix" value="/"/>  
28.         <property name="suffix" value=".jsp"/>  
29.       </bean>  
30.        -->  
31.        <bean  class="org.springframework.web.servlet.view.InternalResourceViewResolver">  
32.         <property name="order" value="10"></property>  
33.         <property name="prefix" value="/"></property>  
34.         <property name="contentType" value="text/html"></property>  
35.     </bean>  
36. </beans>  

<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:context="http://www.springframework.org/schema/context" xmlns:p="http://www.springframework.org/schema/p" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:task="http://www.springframework.org/schema/task" xsi:schemaLocation="http://www.springframework.org/schema/beans      http://www.springframework.org/schema/beans/spring-beans-3.0.xsd      http://www.springframework.org/schema/context      http://www.springframework.org/schema/context/spring-context.xsd      http://www.springframework.org/schema/mvc      http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd      http://www.springframework.org/schema/task       http://www.springframework.org/schema/task/spring-task.xsd">           <!--<task:executor id="executor" pool-size="5" />        <task:scheduler id="scheduler" pool-size="10" />        <task:annotation-driven executor="executor" scheduler="scheduler" />        -->           <context:component-scan base-package="com.qingshuang.circ"/>            <!-- 对模型视图名称的解析，在请求时模型视图名称添加前后缀      <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">     <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>     <property name="prefix" value="/"/>    <property name="suffix" value=".jsp"/>      </bean>       -->       <bean  class="org.springframework.web.servlet.view.InternalResourceViewResolver">  <property name="order" value="10"></property>  <property name="prefix" value="/"></property>  <property name="contentType" value="text/html"></property>  </bean></beans>

当然springMVC也支持多视图，比如json、pdf、jsp等等，具体配置大家可以看一下这篇文章：http://loushi135.iteye.com/blog/1676280

以下是控制器代码：

[java] view plain copy

print?

1. @Controller  
2. @RequestMapping(value="/test")  
3. public class TestController {  
4.       
5.     /** 
6.      * 测试请求是否成功 
7.      * @author           
8.      * @version          
9.      * @since   V0.1 
10.      */  
11.     @RequestMapping(value="{testAdmin}", method=RequestMethod.GET)  
12.     public String testRequest(){  
13.         System.out.println("----------------请求成功----------------");  
14.         return "admin/login.<span style="font-family:Helvetica, Tahoma, Arial, sans-serif;">html</span>";  
15.     }  
16.       
17. }  

@Controller@RequestMapping(value="/test")public class TestController {/** * 测试请求是否成功 * @author           * @version          * @since V0.1 */@RequestMapping(value="{testAdmin}", method=RequestMethod.GET)public String testRequest(){System.out.println("----------------请求成功----------------");return "admin/login.<span style="font-family:Helvetica, Tahoma, Arial, sans-serif;">html</span>";}}

html目录:

4、通过@ResponseBody 配置后端接口

• @ResponseBody 将内容或对象作为 HTTP 响应正文返回，并调用适合HttpMessageConverter的Adapter转换对象，写入输出流。
• 通过此注解可以将后端接口的返回数据作为http响应返回到前端。
• Spring默认的json协议解析由Jackson完成。 
  
  servlet.xml配置 
  
  Spring的配置文件，简洁到了极致，对于当前这个需求只需要三行核心配置： 
  
  Xml代码  

  1. <context:component-scan base-package="org.zlex.json.controller" />  
  2. <context:annotation-config />  
  3. <mvc:annotation-driven />  
  
  
  pom.xml配置或依赖包 
  
  先说依赖配置，这里以Json+Spring为参考： 
  pom.xml 
  
  Xml代码  

  1. <dependency>  
  2.         <groupId>org.springframework</groupId>  
  3.         <artifactId>spring-webmvc</artifactId>  
  4.         <version>3.1.2.RELEASE</version>  
  5.         <type>jar</type>  
  6.         <scope>compile</scope>  
  7.     </dependency>  
  8.     <dependency>  
  9.         <groupId>org.codehaus.jackson</groupId>  
  10.         <artifactId>jackson-mapper-asl</artifactId>  
  11.         <version>1.9.8</version>  
  12.         <type>jar</type>  
  13.         <scope>compile</scope>  
  14.     </dependency>  
  15.     <dependency>  
  16.         <groupId>log4j</groupId>  
  17.         <artifactId>log4j</artifactId>  
  18.         <version>1.2.17</version>  
  19.         <scope>compile</scope>  
  20.     </dependency>  
  
  主要需要spring-webmvc、jackson-mapper-asl两个包，其余依赖包Maven会帮你完成。至于log4j，我还是需要看日志嘛。 
  包依赖图： 
  
  
  

5、前后端及ajax整合

页面

<h2>1、生成随机字符串长度</h2><input  id="a" placeholder="请输入长度" type="text" ></input><button id=abc class="btn1"  >生成</button><p id=result></p>

js

$(".btn1").click(function(){//alert("a");var length= $("#a").val();$.ajax({    type: "POST",            url: "/SpringDemo/getMixstr.do?",async:false,data:"length="+length,         //dataType: "text",            success: function(msg) {    //数据提交成功时返回数据            //alert(msg);            //$(this).parent.append("<div id='result'>"+data+"<div>");    $("#result").html(msg);               }});});

后端

@Controllerpublic class strCtrol {@RequestMapping(value="/getMixstr",method=RequestMethod.POST)   //此处控制浏览器里访问路径 具体为：/SpringDemo/helloworldpublic @ResponseBody String getMixstr(HttpServletRequest request ,HttpServletResponse response) throws IOException{String length=request.getParameter("length");String str=RandomUtil.genMixStr(Integer.valueOf(length));return str;}@RequestMapping(value="/genTimeStr",method=RequestMethod.POST,produces="application/json")   //此处控制浏览器里访问路径 具体为：/SpringDemo/helloworldpublic @ResponseBody long genTimeStr(HttpServletRequest request ,HttpServletResponse response) throws IOException{String length=request.getParameter("length");long str=RandomUtil.genTimeStr(Integer.valueOf(length));return str;}

效果图