Spring MVC 与ExtJS的集成

一、简介

本demon主要是集成了SpringMVC和ExtJS，SpringMVC和ExtJS之间的数据交互方式为JSON，同时还支持controller返回string和页面地址对应关系配置、页面消息动态配置（类似于国际化）、intercepter。

 

 

二、系统集成

 

1、包文件

包文件的重要性就不多说了，建议用maven管理。

但是，为了加深理解，我是直接从官网上下载的包，然后一个个试的，中间遇到了很多问题，包括少包，包冲突等。

 

2、配置文件

先看web.xml。

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee"  
  3.     xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"  
  4.     id="WebApp_ID" version="2.5">  
  5.   
  6.     <display-name>SpringMVCTest</display-name>  
  7.     <!-- The definition of the Root Spring Container shared by all Servlets and Filters -->  
  8.   
  9.   
  10. <!-- 防止资源文件被spring MVC拦截 -->  
  11.     <servlet-mapping>  
  12.         <servlet-name>default</servlet-name>  
  13.         <url-pattern>*.jpg</url-pattern>  
  14.     </servlet-mapping>  
  15.     <servlet-mapping>  
  16.         <servlet-name>default</servlet-name>  
  17.         <url-pattern>*.js</url-pattern>  
  18.     </servlet-mapping>  
  19.     <servlet-mapping>  
  20.         <servlet-name>default</servlet-name>  
  21.         <url-pattern>*.css</url-pattern>  
  22.     </servlet-mapping>  
  23.   
  24.     <context-param>  
  25.         <param-name>contextConfigLocation</param-name>  
  26.         <param-value>/WEB-INF/spring/root-context.xml</param-value>  
  27.     </context-param>  
  28.   
  29.     <!-- Creates the Spring Container shared by all Servlets and Filters -->  
  30.     <listener>  
  31.         <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>  
  32.     </listener>  
  33.   
  34.     <!-- Processes application requests -->  
  35.     <servlet>  
  36.         <servlet-name>appServlet</servlet-name>  
  37.         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>  
  38.         <init-param>  
  39.             <param-name>contextConfigLocation</param-name>  
  40.             <param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>  
  41.         </init-param>  
  42.         <load-on-startup>1</load-on-startup>  
  43.     </servlet>  
  44.   
  45.     <servlet-mapping>  
  46.         <servlet-name>appServlet</servlet-name>  
  47.         <url-pattern>/</url-pattern>  
  48.     </servlet-mapping>  
  49.   
  50. </web-app>  

 

然后是root-context.xml,默认的没有加内容。

 

 

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <beans xmlns="http://www.springframework.org/schema/beans"  
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  4.     xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">  
  5.       
  6.     <!-- Root Context: defines shared resources visible to all other web components -->  
  7.           
  8. </beans>  

 

 

最后是servlet-context.xml

 

 

 

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <beans:beans xmlns="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  3.     xmlns:beans="http://www.springframework.org/schema/beans" xmlns:context="http://www.springframework.org/schema/context"  
  4.     xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd  
  5.         http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd  
  6.         http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">  
  7.   
  8.     <annotation-driven />  
  9.   
  10.     <!--防止css js img 文件被拦截   
  11.     <resources mapping="/images/**" location="/images/" cache-period="31556926" />  
  12.     <resources mapping="/js/**" location="/js/" cache-period="31556926" />  
  13.     <resources mapping="/css/**" location="/css/" cache-period="31556926" /> -->  
  14.       
  15.     <!-- 加入集中消息文件的配置 //也可以用来支持进行国际化-->  
  16.     <beans:bean id="messageSource" class="org.springframework.context.support.ReloadableResourceBundleMessageSource">  
  17.         <beans:property name="basenames" value="/WEB-INF/message/static_message , /WEB-INF/message/dynamic_message" />  
  18.         <beans:property name="cacheSeconds" value="2"></beans:property>  
  19.     </beans:bean>  
  20.   
  21.     <!-- 能够让controller返回json格式的配置   //当然也可以自己手动拼json或者用工具类生成json 将拼好的json串写到页面上  然后再返回页面-->  
  22.     <beans:bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">  
  23.         <beans:property name="messageConverters">  
  24.             <beans:list>  
  25.                 <beans:ref bean="mappingJacksonHttpMessageConverter" />  
  26.             </beans:list>  
  27.         </beans:property>  
  28.     </beans:bean>  
  29.   
  30.     <beans:bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">  
  31.         <beans:property name="supportedMediaTypes">  
  32.             <beans:list>  
  33.                 <beans:value>application/json;charset=UTF-8</beans:value>  
  34.             </beans:list>  
  35.         </beans:property>  
  36.     </beans:bean>  
  37.   
  38.     <!-- 加入能够进行前端文件访问的配置  不适用默认的视图解释类-->  
  39.     <beans:bean id="tilesViewResolver" class="org.springframework.web.servlet.view.UrlBasedViewResolver">  
  40.         <beans:property name="viewClass" value="org.springframework.web.servlet.view.tiles2.TilesView" />  
  41.     </beans:bean>  
  42.   
  43.     <beans:bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles2.TilesConfigurer">  
  44.         <beans:property name="definitions">  
  45.             <beans:list>  
  46.                 <beans:value>/WEB-INF/tiles-defs/templates.xml</beans:value>  
  47.             </beans:list>  
  48.         </beans:property>  
  49.     </beans:bean>  
  50.   
  51.   
  52.     <!-- 加入interceptor -->  
  53.     <interceptors>  
  54.         <interceptor>  
  55.             <mapping path="/extjspie" />  
  56.             <beans:bean id="MeasurementInterceptor" class="com.util.MeasurementInterceptor">  
  57.                 <!-- <beans:property name="paramName" value="theme" /> -->  
  58.             </beans:bean>  
  59.         </interceptor>  
  60.     </interceptors>  
  61.   
  62.     <context:component-scan base-package="com.controller" />  
  63.   
  64.   
  65.   
  66. </beans:beans>  

 

 

3、页面配置文件

templates.xml，用来配置前段页面和后台返回的字符串之间的关系。

 

 

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="ISO-8859-1" ?>  
  2. <!DOCTYPE tiles-definitions PUBLIC  
  3.        "-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"  
  4.        "http://tiles.apache.org/dtds/tiles-config_2_0.dtd">  
  5.   
  6. <tiles-definitions>  
  7.   
  8.     <definition name="extjspie" template="/WEB-INF/chart/pie1.jsp"></definition>  
  9.     <definition name="jquerypie" template="/WEB-INF/chart/pie.jsp"></definition>  
  10.       
  11.   
  12. </tiles-definitions>  



 

 

4、消息文件

dynamic_message.properties

 

[html] view plaincopyprint?
  1. title = Title : {0}  

 

 

static_message.properties

 

[html] view plaincopyprint?
  1. check_download = Would you like to download the chart as an image?  

 

5、页面文件

 

pie1.jsp（路径/extjspie会跳转到这个文件）

<spring:messagecode='title' arguments='pie'/>

这个会使用message里的消息，可以对消息进行动态修改而不用重启服务器，一般用于用户消息或系统配置。

[html] view plaincopyprint?
  1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
  6. <title>Insert title here</title>  
  7. </head>  
  8. <script src="js/extjs/ext-all.js"></script>  
  9. <link rel="stylesheet" href="js/extjs/resources/css/ext-all.css">  
  10.   
  11. <%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>  
  12.   
  13. <script>  
  14.     Ext.Loader.setConfig({  
  15.         enabled : true  
  16.     });  
  17.     Ext.require('Ext.chart.*');  
  18.     Ext.require([ 'Ext.layout.container.Fit', 'Ext.window.MessageBox', 'Ext.grid.*', 'Ext.util.*' ]);  
  19.   
  20.     Ext.onReady(function() {  
  21.   
  22.         //effort  
  23.         var store = Ext.create('Ext.data.JsonStore', {  
  24.             fields : [ 'id', 'name', 'data1' ],  
  25.             proxy : {  
  26.                 type : 'ajax',  
  27.                 url : 'pieData',  
  28.                 reader : {  
  29.                     type : 'json'  
  30.                 }  
  31.             }  
  32.         });  
  33.         store.load({  
  34.             callback : function(records, operation, success) {  
  35.                 console.log(records);  
  36.             }  
  37.         });  
  38.   
  39.         var donut = false, chart = Ext.create('Ext.chart.Chart', {  
  40.             xtype : 'chart',  
  41.             animate : true,  
  42.             store : store,  
  43.             shadow : true,  
  44.             legend : {  
  45.                 position : 'right'  
  46.             },  
  47.             insetPadding : 60,  
  48.             theme : 'Base:gradients',  
  49.             series : [ {  
  50.                 type : 'pie',  
  51.                 field : 'data1',  
  52.                 showInLegend : true,  
  53.                 donut : donut,  
  54.                 tips : {  
  55.                     trackMouse : true,  
  56.                     width : 140,  
  57.                     height : 28,  
  58.                     renderer : function(storeItem, item) {  
  59.                         //calculate percentage.  
  60.                         var total = 0;  
  61.                         store.each(function(rec) {  
  62.                             total += rec.get('data1');  
  63.                         });  
  64.                         this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100)  
  65.                                 + '%');  
  66.                     }  
  67.                 },  
  68.                 highlight : {  
  69.                     segment : {  
  70.                         margin : 20  
  71.                     }  
  72.                 },  
  73.                 label : {  
  74.                     field : 'name',  
  75.                     display : 'rotate',  
  76.                     contrast : true,  
  77.                     font : '18px Arial'  
  78.                 }  
  79.             } ]  
  80.         });  
  81.   
  82.         Ext.create('widget.panel', {  
  83.             width : 800,  
  84.             height : 600,  
  85.             title : "<spring:message code='title' arguments='pie'/>",  
  86.             renderTo : "chart",  
  87.             layout : 'fit',  
  88.             tbar : [  
  89.                     {  
  90.                         text : 'Save Chart',  
  91.                         handler : function() {  
  92.                             Ext.MessageBox.confirm('Confirm Download', "<spring:message code='check_download' />",  
  93.                                 function(choice) {  
  94.                                         if (choice == 'yes') {  
  95.                                             chart.save({  
  96.                                                 type : 'image/png'  
  97.                                             });  
  98.                                         }  
  99.                                     });  
  100.                         }  
  101.                     }, {  
  102.                         text : 'Reload Data',  
  103.                         handler : function() {  
  104.                             // Add a short delay to prevent fast sequential clicks  
  105.                             window.loadTask.delay(100, function() {  
  106.                                 store1.loadData(generateData(6, 20));  
  107.                             });  
  108.                         }  
  109.                     }, {  
  110.                         enableToggle : true,  
  111.                         pressed : false,  
  112.                         text : 'Donut',  
  113.                         toggleHandler : function(btn, pressed) {  
  114.                             chart.series.first().donut = pressed ? 35 : false;  
  115.                             chart.refresh();  
  116.                         }  
  117.                     } ],  
  118.             items : chart  
  119.         });  
  120.   
  121.     });  
  122. </script>  
  123.   
  124.   
  125.   
  126. <body>  
  127.     <div id="chart"></div>  
  128. </body>  
  129. </html>  

 

pie.jsp(/jquerypie会跳转到这个界面,主要用来集成jquery)

 

 

[html] view plaincopyprint?
  1. <%@ page language="java" contentType="text/html; charset=ISO-8859-1"  
  2.     pageEncoding="ISO-8859-1"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
  7. <title>Insert title here</title>  
  8. </head>  
  9.   
  10.     <link rel="stylesheet" href="js/jquery/themes/base/jquery.ui.all.css">  
  11.     <script src="js/jquery/jquery-1.9.1.js"></script>  
  12.     <script src="js/jquery/ui/jquery.ui.core.js"></script>  
  13.     <script src="js/jquery/ui/jquery-ui.js"></script>  
  14.   
  15. <script>  
  16.   
  17. $(document).ready(function(){  
  18.     $.get("pieData", function(data) {  
  19.         $.each(data,function(InfoIndex,Info){  
  20.             alert(InfoIndex);  
  21.             alert(Info["name"]);  
  22.         });  
  23.     });  
  24.       
  25. });  
  26. </script>  
  27.   
  28.   
  29.   
  30. <body>  
  31.   
  32.   
  33. this is pie.jsp!!  
  34. </body>  
  35. </html>  



 

 

6、后台文件

ChartController.java（Controller方法）

[java] view plaincopyprint?
  1. package com.controller;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import org.slf4j.Logger;  
  7. import org.slf4j.LoggerFactory;  
  8. import org.springframework.stereotype.Controller;  
  9. import org.springframework.ui.Model;  
  10. import org.springframework.web.bind.annotation.RequestMapping;  
  11. import org.springframework.web.bind.annotation.RequestMethod;  
  12. import org.springframework.web.bind.annotation.ResponseBody;  
  13.   
  14. import com.model.Employee;  
  15.   
  16. @Controller  
  17. public class ChartController {  
  18.   
  19.     private static final Logger logger = LoggerFactory.getLogger(ChartController.class);  
  20.   
  21.     /** 
  22.      * method description goes here 
  23.      *  
  24.      * @param args 
  25.      */  
  26.     @RequestMapping(value = "/jquerypie", method = RequestMethod.GET)  
  27.     public String pie(Model model) {  
  28.         // TODO Auto-generated method stub  
  29.         return "jquerypie";  
  30.   
  31.     }  
  32.   
  33.     @RequestMapping(value = "/extjspie", method = RequestMethod.GET)  
  34.     public String pie1(Model model) {  
  35.         // TODO Auto-generated method stub  
  36.         return "extjspie";  
  37.   
  38.     }  
  39.   
  40.     @RequestMapping(value = "/pieData", method = RequestMethod.GET)  
  41.     @ResponseBody  
  42.     public Object pieData(Model model) {  
  43.         // TODO Auto-generated method stub  
  44.         List<Employee> empList = new ArrayList<Employee>();  
  45.   
  46.         Employee emp1 = new Employee();  
  47.         emp1.setId(1);  
  48.         emp1.setName("steven");  
  49.         emp1.setData1(10);  
  50.         empList.add(emp1);  
  51.   
  52.         Employee emp2 = new Employee();  
  53.         emp2.setId(2);  
  54.         emp2.setName("daniel");  
  55.         emp2.setData1(25);  
  56.         empList.add(emp2);  
  57.   
  58.         Employee emp3 = new Employee();  
  59.         emp3.setId(3);  
  60.         emp3.setName("emily");  
  61.         emp3.setData1(7);  
  62.         empList.add(emp3);  
  63.   
  64.         Employee emp4 = new Employee();  
  65.         emp4.setId(4);  
  66.         emp4.setName("heather");  
  67.         emp4.setData1(4);  
  68.         empList.add(emp4);  
  69.   
  70.         //return json data  
  71.         return empList;  
  72.     }  
  73.   
  74. }  



 

Employee.java

[java] view plaincopyprint?
  1. package com.model;  
  2.   
  3. public class Employee {  
  4.   
  5.     private int id;  
  6.     private String name;  
  7.     private int data1;  
  8.       
  9.     /** 
  10.      * @return the id 
  11.      */  
  12.     public int getId() {  
  13.         return id;  
  14.     }  
  15.     /** 
  16.      * @param id the id to set 
  17.      */  
  18.     public void setId(int id) {  
  19.         this.id = id;  
  20.     }  
  21.     /** 
  22.      * @return the name 
  23.      */  
  24.     public String getName() {  
  25.         return name;  
  26.     }  
  27.     /** 
  28.      * @param name the name to set 
  29.      */  
  30.     public void setName(String name) {  
  31.         this.name = name;  
  32.     }  
  33.     /** 
  34.      * @return the data1 
  35.      */  
  36.     public int getData1() {  
  37.         return data1;  
  38.     }  
  39.     /** 
  40.      * @param data1 the data1 to set 
  41.      */  
  42.     public void setData1(int data1) {  
  43.         this.data1 = data1;  
  44.     }  
  45.       
  46.       
  47.   
  48.   
  49. }  

 

MeasurementInterceptor.java(inteceptor方法)

 

 

[java] view plaincopyprint?
  1. package com.util;  
  2.   
  3. import javax.servlet.http.HttpServletRequest;  
  4. import javax.servlet.http.HttpServletResponse;  
  5.   
  6. import org.springframework.web.servlet.ModelAndView;  
  7. import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;  
  8.   
  9. public class MeasurementInterceptor extends HandlerInterceptorAdapter {  
  10.   
  11.     public boolean preHandle(HttpServletRequest request,    
  12.         HttpServletResponse response,Object handler)throws Exception{    
  13.         long startTime = System.currentTimeMillis();    
  14.         request.setAttribute("startTime",startTime);    
  15.         return true;  
  16.     }      
  17.           
  18.     public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,  
  19.         ModelAndView modelAndView) throws Exception {  
  20.         long startTime = (Long) request.getAttribute("startTime");  
  21.         request.removeAttribute("startTime");  
  22.         long endTime = System.currentTimeMillis();  
  23.         //modelAndView.addObject("handlingTime", endTime - startTime);  
  24.           
  25.         System.out.println("______________enter interceptor . use time:" + (endTime - startTime));  
  26.     }  
  27.   
  28. }  


具体效果见下图：

   

 

转自：http://blog.csdn.net/q262800095/article/details/12021191

posted @ 2014-08-26 15:50  freeair  阅读(518)  评论(0)    收藏  举报