SpringMVC與Easyui(實現了JSON的展示)、FreeMarker的整合

原文轉載:http://blog.csdn.net/congcong68/article/details/43953111


一.簡介

     最近項目一直在用SpringMVC+ Easyui +FreeMarker,最近比較有時間,重新複習一下,整個的搭建的過程,以及使用。

     FreeMarker是模板引擎,是一種基於模板的、用來生成輸出文本的通用工具,是基於Java的開發包和類庫的。FreeMarker被設計用來生成HTML Web頁面,特別是基於MVC(Model View Controller)模式的應用程序,FreeMarker與Web容器無關,即在Web運行時,它並不知道Servlet或HTTP,使用Servlet提供的數據動態地生成 HTML。

      FreeMarker跟JSP相比,JSP運行時,需要在被執行的時候編譯成Servlet, FreeMarker模板技術不存在編譯,所以效率上FreeMarker會比較好,而且Freemarker內置了很多web編程中很常用的方法(日期轉換、數字格式化等)方便開發人員操作。

     Easyui是一種基於jQuery的用戶界面插件集合,提供了大多數UI控件的使用,如:accordion,combobox,menu,dialog,tabs,validatebox,datagrid,window,tree等。


      我們先看一下實現的列表,這樣我們在整合時,就是接下來我們要分析的,這樣思路會比較清晰,如圖所示:

             

         

 


二.FreeMarker、Easyui在SpringMVC整合

   1.SpringMVC配置Easyui的配置文件(spring-mvc.xml)

       
[html] view plaincopy
  1.  <bean  class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">  
  2. <!-- 解決JSON中文亂碼問題 -->  
  3. <property name="messageConverters">     
  4.           <list>  
  5.             <bean class="org.springframework.http.converter.StringHttpMessageConverter">  
  6.             <property name="supportedMediaTypes">  
  7.                 <list>  
  8.                     <value>text/plain;charset=UTF-8</value>  
  9.                     <value>text/html;charset=UTF-8</value>  
  10.                     <value>application/json;charset=UTF-8</value>  
  11.                 </list>  
  12.             </property>  
  13.         </bean>  
  14.         <!-- 該類只有org.springframework.web-3.1.2.RELEASE.jar及以上版本纔有  使用該配置後,纔可以使用JSON相關的一些註解-->  
  15.               <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">  
  16.                 <property name="supportedMediaTypes">  
  17.                 <list>  
  18.                     <value>text/plain;charset=UTF-8</value>  
  19.                     <value>text/html;charset=UTF-8</value>  
  20.                     <value>application/json;charset=UTF-8</value>  
  21.                 </list>  
  22.             </property>  
  23.                   <property name="objectMapper">  
  24.                   <!-- jackson-databind-2.2.2.jar -->  
  25.                     <bean class="com.fasterxml.jackson.databind.ObjectMapper">  
  26.                         <property name="dateFormat">    
  27.                             <bean class="java.text.SimpleDateFormat">    
  28.                                <constructor-arg value="yyyy-MM-dd HH:mm:ss" />    
  29.                             </bean>    
  30.                         </property>    
  31.                     </bean>  
  32.                     </property>  
  33.               </bean>  
  34.           </list>  
  35.       </property>  
  36.    <!-- 啓動Spring MVC的註解功能,完成請求和註解POJO的映射   請求映射-->  
  37.    <property name="webBindingInitializer">    
  38.           <bean class="cn.social.card.util.DateBinding" />    
  39.       </property>    
  40. lt;/bean>  
       說明:
           HandlerAdapter接口是處理請求的映射。
           AnnotationMethodHandlerAdapter類,通過註解,把一個URL映射到Controller類的方法上。這個類有很多個屬性,如源代碼圖所示:
     
         

        1.  messageConverters屬性配置的說明
           1)messageConverters屬性配置可以解決一些亂碼的問題,請求和返回值是字符串類型或者對象類型,可以通過messageConverters進行系列化和反系列化,那AnnotationMethodHandlerAdapter將使用messageConverters查找對應的並將Controller返回值直接輸出到響應體。

          2)messageConverters是一個列表,列表中有StringHttpMessageConverter、MappingJackson2HttpMessageConverter等都指定了supportedMediaTypes所支持的類型,如果請求頭Accept與某個messageConverter的supportedMediaTypes匹配,那麼將使用此messageConverter向響應體輸出內容。

            (1)MappingJackson2HttpMessageConverter:使用 Jackson 的ObjectMapper 讀取/編寫 JSON 數據。它轉換媒體類型爲 application/json 的數據。該類只有org.springframework.web-3.1.2.RELEASE.jar及以上版本纔有使用該配置後,纔可以使用JSON相關的一些註解,並可以配置日期的格式需要引入jackson-databind-2.2.2.jar:如圖所示:

             

              

         2.  webBindingInitializer屬性配置

               1)webBindingInitializer是全局的屬性編輯器,我們配置了日期格式化,有可以配置電話等格式。我們自定義全局的屬性編輯器時,需要實現了WebBindingInitializer接口中的initBinder方法,代碼如下:

               

[java] view plaincopy
  1. public class DateBinding implements WebBindingInitializer {  
  2.     /** 
  3.      * 表單數據(全部是字符串)通過WebDataBinder進行綁定到命令對象,內部通過PropertyEditor實現 
  4.      */  
  5.     public void initBinder(WebDataBinder binder, WebRequest request) {  
  6.         //使用spring自帶的CustomDateEditor  
  7.         //註冊自定義的屬性編輯器(日期)  
  8.         SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");  
  9.         binder.registerCustomEditor(Date.classnew CustomDateEditor(dateFormat, true));  
  10.     }  
  11.   
  12. }  
        日期格式化全局實現好了,我們把這個類AnnotationMethodHandlerAdapter屬性配置對應的,就OK了

    2)也可以定義爲局部的屬性編輯器,只在對應的controller類裏有效的

                 @InitBinder

                public void initBinder(WebDataBinder binder)                            

 2.SpringMVC配置FreeMarker的配置文件(spring-mvc.xml)

          
[html] view plaincopy
  1. <!-- 設置freeMarker的配置文件路徑 -->  
  2. <bean id="freemarkerConfiguration" class="org.springframework.beans.factory.config.PropertiesFactoryBean">  
  3.     <property name="location" value="classpath:freemarker.properties" />  
  4. </bean>  
  5. <bean id="xmlEscape" class="freemarker.template.utility.XmlEscape" />  
  6. <!-- freeMarker的模板配置 -->  
  7. <bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">  
  8.     <!--視圖解析器會在/WEB-INF/template/路徑下查找-->  
  9.     <property name="templateLoaderPath">  
  10.         <value>/WEB-INF/template/</value>  
  11.     </property>  
  12.     <property name="freemarkerVariables">  
  13.         <map>  
  14.             <entry key="xml_escape" value-ref="xmlEscape" />  
  15.         </map>  
  16.     </property>  
  17.     <property name="freemarkerSettings" ref="freemarkerConfiguration" />  
  18. </bean>  
  19.   
  20. <!-- 配置freeMarker視圖解析器 -->  
  21. <bean id="viewResolver" class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">  
  22.     <property name="viewClass" value="org.springframework.web.servlet.view.freemarker.FreeMarkerView" />  
  23.     <!--查找對應下所有以ftl結尾的文件-->  
  24.     <property name="viewNames" value="*.ftl" />  
  25.     <property name="contentType" value="text/html; charset=utf-8" />  
  26.     <property name="cache" value="true" />  
  27.     <property name="prefix" value="" />  
  28.     <property name="suffix" value="" />  
  29.     <property name="order" value="1"></property>  
  30.     <property name="requestContextAttribute" value="rc" />  
  31. </bean>  

       freemarker.properties   (freemarker一些轉換配置)
[html] view plaincopy
  1. tag_syntax=auto_detect  
  2. template_update_delay=2  
  3. default_encoding=UTF-8  
  4. output_encoding=UTF-8  
  5. locale=zh_CN  
  6. date_format=yyyy-MM-dd  
  7. time_format=HH:mm:ss  
  8. datetime_format=yyyy-MM-dd HH\:mm\:ss  
  9. number_format=#  

 說明:
       1)通過prefix屬性指定一個指定的前綴,通過suffix屬性指定一個指定的後綴,然後把返回的邏輯視圖名稱加上指定的前綴和後綴就是指定的視圖URL了。
        2)<property name="order"value="1">  value="0"代表了第一個匹配的是freemarker的視圖解析器,如果匹配不成功,則自動選擇order="1"的其他解析器,目前的通用解析器可以解析.ftl的視圖,如果需要其他視圖的解析器,可以在添加新的解析器value值對應的跟現在不一樣
    

三.SpringMVC的Controller代碼的實現

        剛纔我們介紹了Spring的配置文件,現在我們介紹代碼的實現,@Controller @RequestMapping  @ResponseBody這些註解就不在介紹一下,網上資料很多,代碼如下:
          
    
[java] view plaincopy
  1. @Controller  
  2. @RequestMapping(value="/admin/user")  
  3. public class UserController {  
  4.       
  5.     @Autowired  
  6.     private UserService userService;  
  7.       
  8.     /** 
  9.      * 用戶信息首頁 
  10.      * @param session 
  11.      * @param request 
  12.      * @param map 
  13.      * @return 
  14.      */  
  15.     @RequestMapping(value="/index")  
  16.     public String showRootLayer(HttpSession session, HttpServletRequest request, ModelMap map) {  
  17.         String contextPath = request.getContextPath();  
  18.         User user=(User) session.getAttribute("user");  
  19.         map.put("contextPath", contextPath);  
  20.         map.put("user", user);  
  21.         return "/user/index.ftl";  
  22.     }  
  23.       
  24.     /** 
  25.      * 獲取用戶信息列表 
  26.      * @param session 
  27.      * @param page 
  28.      * @param rows 
  29.      * @return 
  30.      */  
  31.     @ResponseBody  
  32.     @RequestMapping(value="/listData", method=RequestMethod.POST)  
  33.     public EUDGPagination detailDataList(HttpSession session, @RequestParam(value="page"int page, @RequestParam(value="rows"int rows, @RequestParam(value="yhm",required=false) String yhm, @RequestParam(value="rymc",required=false) String rymc, @RequestParam(value="rybh",required=false) String rybh) {  
  34.         if(page<=0) page=1;  
  35.         if(yhm!=null){yhm=yhm.trim();}  
  36.         if(rymc!=null){rymc=rymc.trim();}  
  37.         if(rybh!=null){rybh=rybh.trim();}  
  38.         Map<String, Object> params = new HashMap<String, Object>();  
  39.         params.put("yhm", yhm);  
  40.         params.put("rymc", rymc);  
  41.         params.put("rybh", rybh);  
  42.         User user=(User) session.getAttribute("user");  
  43.         params.put("user",user);  
  44.         EUDGPagination pagination = userService.findUserPagination(page, rows, params);  
  45.         return pagination;  
  46.     }  
  47.       
  48.     /** 
  49. <span style="white-space:pre">    </span> * 詳情頁面 
  50. <span style="white-space:pre">    </span> * @param session 
  51. <span style="white-space:pre">    </span> * @param id 
  52. <span style="white-space:pre">    </span> * @param request 
  53. <span style="white-space:pre">    </span> * @param map 
  54. <span style="white-space:pre">    </span> * @return 
  55. <span style="white-space:pre">    </span> */  
  56.     @RequestMapping(value="/detail")  
  57.     public String detail(HttpSession session,@RequestParam(value="id") Long id, HttpServletRequest request, ModelMap map) {  
  58.         String contextPath = request.getContextPath();  
  59.         User user=userService.findUserById(id);  
  60.         map.put("contextPath", contextPath);  
  61.         User userSession=(User) session.getAttribute("user");  
  62.         map.put("user", user);  
  63.         map.put("userSession", userSession);  
  64.         return "/user/detail.ftl";  
  65.     }  
  66.       
  67. }  

   四.Easyui列表的實現

      
[java] view plaincopy
  1. <!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http:/www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>請假管理</title>  
  6. <link rel="stylesheet" type="text/css" href="${contextPath}/css/main_new.css" />  
  7. <link rel="stylesheet" type="text/css" href="${contextPath}/css/easyui.css">  
  8. <link rel="stylesheet" type="text/css" href="${contextPath}/css/icon.css">  
  9. <link rel="stylesheet" type="text/css" href="${contextPath}/css/demo.css">  
  10. <script type="text/javascript" src="${contextPath}/js/formatDate.js"></script>  
  11. <script type="text/javascript" src="${contextPath}/js/jquery-1.8.0.min.js"></script>  
  12. <script type="text/javascript" src="${contextPath}/js/jquery.easyui.min.js"></script>  
  13. <script type="text/javascript" src="${contextPath}/js/locale/easyui-lang-zh_CN.js"></script>  
  14. </head>  
  15. <body class="easyui-layout">  
  16. <div id="careRoadContentDiv" region="center" title=" 請假管理" border="false" style="overflow:hidden;">  
  17.     <table id="list"></table>  
  18. </div>  
  19.   
  20. <div id="jqueryToolbar" style="padding:5px;height:auto">  
  21.     <div style="margin-top:5px; padding-bottom:8px; border-bottom:1px solid #ccc;">  
  22.         人員名稱:<input type="text" id="rymc" style="width:120px" />  
  23.         人員編號:<input type="text" id="rybh" style="width:120px" />  
  24.         <a href="#" class="easyui-linkbutton" iconCls="icon-search" οnclick="searchData()">查詢</a>  
  25.         <a href="#" class="easyui-linkbutton" iconCls="icon-reload" οnclick="resetCondition()">重置</a>  
  26.     </div>  
  27.     <div style="margin-top:5px;">  
  28.         <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="create()">新增</a>   
  29.     </div>  
  30. </div>  
  31.   
  32. <script type="text/javascript">  
  33.     $(function(){  
  34.         $('#list').datagrid({  
  35.             width:600,  
  36.             height:600,  
  37.             nowrap: false,  
  38.             striped: true,  
  39.             fit: true,  
  40.             idField:'id',  
  41.             url:'${contextPath}/admin/user/listData.json',  
  42.             columns:[[   
  43.                 {field:'id',title:'',hidden:true},                 
  44.                 {field:'rybh',title:'人員編號', align:'center',width:150},  
  45.                 {field:'rymc',title:'人員名稱', align:'center',width:100},  
  46.                 {field:'rylx',title:'人員類型', align:'center',width:100},  
  47.                 {field:'sszhmc',title:'所屬部門名稱', align:'center',width:200},  
  48.                 {field:'sqrybh',title:'授權人員編號', align:'center',width:150},  
  49.                 {field:'czry',title:'操作人員', align:'center',width:120},  
  50.                 {field:'czsj',title:'操作時間', align:'center',width:130},  
  51.                 {field:'opt', title:'操作', width:160, align:'center', formatter:function(value, rec, index){  
  52.                     var e ='';  
  53.                     var d ='';  
  54.                         e='<a href="###" οnclick="editRow('+rec.id+')">編輯</a>';  
  55.                         e += ' | ';  
  56.                         d='<a href="###" οnclick="deleteRow('+rec.id+')">刪除</a>';  
  57.                         d += ' | ';  
  58.                     var f = '<a href="###" οnclick="showRow('+ rec.id +')">詳情</a>';                   
  59.                     return e+d+f;  
  60.                 }},                
  61.             ]],  
  62.             toolbar:'#jqueryToolbar',  
  63.             pagination:true,  
  64.            queryParams:{},  
  65.             onLoadSuccess:function(data){  
  66.                 $('#list').datagrid('clearSelections'); //清除掉列表選中記錄  
  67.                 if(data.total==0){                    
  68.                     $('.datagrid-body-inner').eq(0).addClass("l_elist");                      
  69.                     $('.datagrid-body').eq(1).append('<div class="r_elist">無數據</div>');                   
  70.                 }else{  
  71.                     $('.datagrid-body-inner').eq(0).removeClass("l_elist");  
  72.                 }  
  73.             }  
  74.         });  
  75.           
  76.         //設置分頁控件  
  77.         var p = $('#list').datagrid('getPager');  
  78.         $(p).pagination({  
  79.             pageSize: 10,//每頁顯示的記錄條數,默認爲  
  80.             pageList: [10,20,30,40,50],//可以設置每頁記錄條數的列表  
  81.             beforePageText: '第',//頁數文本框前顯示的漢字  
  82.             afterPageText: '頁    共 {pages} 頁',  
  83.             displayMsg: '當前顯示第 {from} 到 {to} 條記錄   共 {total} 條記錄'/*, 
  84.             onBeforeRefresh:function(){ 
  85.                 $(this).pagination('loading'); 
  86.                 alert('before refresh'); 
  87.                 $(this).pagination('loaded'); 
  88.             }*/  
  89.         });  
  90.           
  91.       
  92.     })  
  93.       
  94.     function searchData() {       
  95.         var a = new Array();  
  96.         var yhm = $("#yhm").val();  
  97.         if(yhm!=null && yhm!="") a["yhm"]=yhm;  
  98.         var rymc = $("#rymc").val();  
  99.         if(rymc!=null && rymc!="") a["rymc"]=rymc;  
  100.         var rybh = $("#rybh").val();  
  101.         if(rybh!=null && rybh!="") a["rybh"]=rybh;  
  102.         doSearch(a);  
  103.     }  
  104.       
  105.     function doSearch(queryParams){  
  106.         $('#list').datagrid('clearSelections');  
  107.         $("#list").datagrid('options').queryParams=queryParams;  
  108.         $("#list").datagrid('load');  
  109.     }  
  110.       
  111.     function resetCondition(){  
  112.         $("#yhm").val("");  
  113.         $("#rymc").val("");  
  114.         $("#rybh").val("");  
  115.     }  
  116.       
  117.     function create() {  
  118.        var url = '${contextPath}/admin/user/create.jhtml';  
  119.        showMaxJqueryWindow("新增用戶信息", url);        
  120.     }  
  121.       
  122.     function editRow(id) {        
  123.         var url = '${contextPath}/admin/user/edit.jhtml?id='+id;  
  124.         showMaxJqueryWindow("編輯用戶信息", url);        
  125.     }  
  126.       
  127.     function showRow(id) {        
  128.         var url = '${contextPath}/admin/user/detail.jhtml?id='+id;  
  129.         showMaxJqueryWindow("用戶詳情", url);         
  130.     }     
  131.       
  132. </script>  
  133. </body>  
  134. </html>  
  說明:
       1)field中的值要跟實體的屬性名稱一樣,不然就獲取不到
        2)SpringMVC的Controller中方法要註解爲@ResponseBody,返回的是JSON格式如下所示:
               
[html] view plaincopy
  1. {"total":4,"rows":[{"id":6,"sszhmc":"5301d","mm":"1","rybh":"test3","sqrybh":"1","rymc":"1                   ","rylx":"1","czry":"admin","czsj":"2014-12-27 14:02:31","role":null},{"id":5,"sszhmc":"52k                 ","mm":"1","rybh":"test2","sqrybh":"1","rymc":"1","rylx":"1 ","czry":"admin","czsj":"2014-12-27 14:02:14","role":null},{"id":4,"sszhmc":"51h","mm":"1","rybh":"test","sqrybh":"1","rymc":"1                   ","rylx":"1","czry":"admin ","czsj":"2014-12-27 13:39:25 ","role":null},{"id":3,"sszhmc":"50鄭                ","mm":"123456","rybh":"admin","sqrybh":"","rymc":"","rylx":"","czry":"","czsj":"","role":null}],"footer":null}  

 


五.FreeMarker的實現

     而且Freemarker內置了很多web編程中很常用的方法(日期轉換、數字格式化等)方便開發人員操作
        
     插值:即${...}或#{...}格式的部分,將使用數據模型中的部分替代輸出 
[java] view plaincopy
  1. <body>  
  2.     <div id="infoTabs" class="easyui-tabs" fit="true" border="false" style="margin: 0; height:530px;">  
  3.         <div title="用戶信息" id="editInfo" style="margin:0">  
  4.             <form id="tableForm" name="tableForm" action="${contextPath}/admin/base/report.jhtml" method="post">  
  5.                 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="border-t">  
  6.                     <tr class="item">  
  7.                         <td class="itemtit"> 人員編號</td>  
  8.                         <td class="border_b" colspan="3">   
  9.                             ${user.rybh!''}  
  10.                         </td>  
  11.                     </tr>  
  12.                       
  13.                     <tr class="item">  
  14.                          
  15.                         <td class="itemtit"> 密碼</td>  
  16.                         <td class="border_b" colspan="3">   
  17.                           ${user.mm!''}  
  18.                         </td>  
  19.                           
  20.                     </tr>  
  21.                       
  22.                     
  23.                       
  24.                     <tr class="item">   
  25.                         <td class="itemtit"> 授權人員編號</td>  
  26.                         <td class="border_b" colspan="3">   
  27.                            ${user.sqrybh!''}  
  28.                         </td>  
  29.                     </tr>  
  30.                       
  31.                      <tr class="item">      
  32.                         <td class="itemtit"> 人員名稱</td>  
  33.                         <td class="border_b" colspan="3">   
  34.                           ${user.rymc!''}  
  35.                         </td>  
  36.                     </tr>  
  37.                       <tr class="item">     
  38.                         <td class="itemtit"> 人員類型</td>  
  39.                         <td class="border_b" colspan="3">   
  40.                           ${user.rylx!''}  
  41.                         </td>  
  42.                     </tr>  
  43.                      <tr class="item">      
  44.                         <td class="itemtit"> 所屬部門名稱</td>  
  45.                         <td class="border_b" colspan="3">   
  46.                           ${user.sszhmc!''}  
  47.                         </td>  
  48.                     </tr>  
  49.                       <tr class="item">     
  50.                         <td class="itemtit"> 操作人員</td>  
  51.                         <td class="border_b" colspan="3">   
  52.                           ${user.czry!''}  
  53.                         </td>  
  54.                     </tr>  
  55.                 <tr class="item">   
  56.                         <td class="itemtit"> 操作人員</td>  
  57.                         <td class="border_b" colspan="3">   
  58.                           ${user.czsj!''}  
  59.                         </td>  
  60.                     </tr>  
  61.                 </table>  
  62.             </form>  
  63.         </div>  
  64.           
  65.     </div>  

   頁面如圖所示:
       
          
    

發佈了18 篇原創文章 · 獲贊 26 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章