原文轉載: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)
-
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
-
-
<property name="messageConverters">
-
<list>
-
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
-
<property name="supportedMediaTypes">
-
<list>
-
<value>text/plain;charset=UTF-8</value>
-
<value>text/html;charset=UTF-8</value>
-
<value>application/json;charset=UTF-8</value>
-
</list>
-
</property>
-
</bean>
-
-
<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
-
<property name="supportedMediaTypes">
-
<list>
-
<value>text/plain;charset=UTF-8</value>
-
<value>text/html;charset=UTF-8</value>
-
<value>application/json;charset=UTF-8</value>
-
</list>
-
</property>
-
<property name="objectMapper">
-
-
<bean class="com.fasterxml.jackson.databind.ObjectMapper">
-
<property name="dateFormat">
-
<bean class="java.text.SimpleDateFormat">
-
<constructor-arg value="yyyy-MM-dd HH:mm:ss" />
-
</bean>
-
</property>
-
</bean>
-
</property>
-
</bean>
-
</list>
-
</property>
-
-
<property name="webBindingInitializer">
-
<bean class="cn.social.card.util.DateBinding" />
-
</property>
-
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方法,代碼如下:
-
public class DateBinding implements WebBindingInitializer {
-
-
-
-
public void initBinder(WebDataBinder binder, WebRequest request) {
-
-
-
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
-
binder.registerCustomEditor(Date.class, new CustomDateEditor(dateFormat, true));
-
}
-
-
}
日期格式化全局實現好了,我們把這個類
AnnotationMethodHandlerAdapter屬性配置對應的,就OK了
2)也可以定義爲局部的屬性編輯器,只在對應的controller類裏有效的
@InitBinder
public void initBinder(WebDataBinder binder)
2.SpringMVC配置FreeMarker的配置文件(spring-mvc.xml)
-
-
<bean id="freemarkerConfiguration" class="org.springframework.beans.factory.config.PropertiesFactoryBean">
-
<property name="location" value="classpath:freemarker.properties" />
-
</bean>
-
<bean id="xmlEscape" class="freemarker.template.utility.XmlEscape" />
-
-
<bean id="freemarkerConfig" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
-
-
<property name="templateLoaderPath">
-
<value>/WEB-INF/template/</value>
-
</property>
-
<property name="freemarkerVariables">
-
<map>
-
<entry key="xml_escape" value-ref="xmlEscape" />
-
</map>
-
</property>
-
<property name="freemarkerSettings" ref="freemarkerConfiguration" />
-
</bean>
-
-
-
<bean id="viewResolver" class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">
-
<property name="viewClass" value="org.springframework.web.servlet.view.freemarker.FreeMarkerView" />
-
-
<property name="viewNames" value="*.ftl" />
-
<property name="contentType" value="text/html; charset=utf-8" />
-
<property name="cache" value="true" />
-
<property name="prefix" value="" />
-
<property name="suffix" value="" />
-
<property name="order" value="1"></property>
-
<property name="requestContextAttribute" value="rc" />
-
</bean>
freemarker.properties (freemarker一些轉換配置)
-
tag_syntax=auto_detect
-
template_update_delay=2
-
default_encoding=UTF-8
-
output_encoding=UTF-8
-
locale=zh_CN
-
date_format=yyyy-MM-dd
-
time_format=HH:mm:ss
-
datetime_format=yyyy-MM-dd HH\:mm\:ss
-
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這些註解就不在介紹一下,網上資料很多,代碼如下:
-
@Controller
-
@RequestMapping(value="/admin/user")
-
public class UserController {
-
-
@Autowired
-
private UserService userService;
-
-
-
-
-
-
-
-
-
@RequestMapping(value="/index")
-
public String showRootLayer(HttpSession session, HttpServletRequest request, ModelMap map) {
-
String contextPath = request.getContextPath();
-
User user=(User) session.getAttribute("user");
-
map.put("contextPath", contextPath);
-
map.put("user", user);
-
return "/user/index.ftl";
-
}
-
-
-
-
-
-
-
-
-
@ResponseBody
-
@RequestMapping(value="/listData", method=RequestMethod.POST)
-
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) {
-
if(page<=0) page=1;
-
if(yhm!=null){yhm=yhm.trim();}
-
if(rymc!=null){rymc=rymc.trim();}
-
if(rybh!=null){rybh=rybh.trim();}
-
Map<String, Object> params = new HashMap<String, Object>();
-
params.put("yhm", yhm);
-
params.put("rymc", rymc);
-
params.put("rybh", rybh);
-
User user=(User) session.getAttribute("user");
-
params.put("user",user);
-
EUDGPagination pagination = userService.findUserPagination(page, rows, params);
-
return pagination;
-
}
-
-
-
-
-
-
-
-
-
-
@RequestMapping(value="/detail")
-
public String detail(HttpSession session,@RequestParam(value="id") Long id, HttpServletRequest request, ModelMap map) {
-
String contextPath = request.getContextPath();
-
User user=userService.findUserById(id);
-
map.put("contextPath", contextPath);
-
User userSession=(User) session.getAttribute("user");
-
map.put("user", user);
-
map.put("userSession", userSession);
-
return "/user/detail.ftl";
-
}
-
-
}
四.Easyui列表的實現
-
<!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/html; charset=utf-8" />
-
<title>請假管理</title>
-
<link rel="stylesheet" type="text/css" href="${contextPath}/css/main_new.css" />
-
<link rel="stylesheet" type="text/css" href="${contextPath}/css/easyui.css">
-
<link rel="stylesheet" type="text/css" href="${contextPath}/css/icon.css">
-
<link rel="stylesheet" type="text/css" href="${contextPath}/css/demo.css">
-
<script type="text/javascript" src="${contextPath}/js/formatDate.js"></script>
-
<script type="text/javascript" src="${contextPath}/js/jquery-1.8.0.min.js"></script>
-
<script type="text/javascript" src="${contextPath}/js/jquery.easyui.min.js"></script>
-
<script type="text/javascript" src="${contextPath}/js/locale/easyui-lang-zh_CN.js"></script>
-
</head>
-
<body class="easyui-layout">
-
<div id="careRoadContentDiv" region="center" title=" 請假管理" border="false" style="overflow:hidden;">
-
<table id="list"></table>
-
</div>
-
-
<div id="jqueryToolbar" style="padding:5px;height:auto">
-
<div style="margin-top:5px; padding-bottom:8px; border-bottom:1px solid #ccc;">
-
人員名稱:<input type="text" id="rymc" style="width:120px" />
-
人員編號:<input type="text" id="rybh" style="width:120px" />
-
<a href="#" class="easyui-linkbutton" iconCls="icon-search" οnclick="searchData()">查詢</a>
-
<a href="#" class="easyui-linkbutton" iconCls="icon-reload" οnclick="resetCondition()">重置</a>
-
</div>
-
<div style="margin-top:5px;">
-
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="create()">新增</a>
-
</div>
-
</div>
-
-
<script type="text/javascript">
-
$(function(){
-
$('#list').datagrid({
-
width:600,
-
height:600,
-
nowrap: false,
-
striped: true,
-
fit: true,
-
idField:'id',
-
url:'${contextPath}/admin/user/listData.json',
-
columns:[[
-
{field:'id',title:'',hidden:true},
-
{field:'rybh',title:'人員編號', align:'center',width:150},
-
{field:'rymc',title:'人員名稱', align:'center',width:100},
-
{field:'rylx',title:'人員類型', align:'center',width:100},
-
{field:'sszhmc',title:'所屬部門名稱', align:'center',width:200},
-
{field:'sqrybh',title:'授權人員編號', align:'center',width:150},
-
{field:'czry',title:'操作人員', align:'center',width:120},
-
{field:'czsj',title:'操作時間', align:'center',width:130},
-
{field:'opt', title:'操作', width:160, align:'center', formatter:function(value, rec, index){
-
var e ='';
-
var d ='';
-
e='<a href="###" οnclick="editRow('+rec.id+')">編輯</a>';
-
e += ' | ';
-
d='<a href="###" οnclick="deleteRow('+rec.id+')">刪除</a>';
-
d += ' | ';
-
var f = '<a href="###" οnclick="showRow('+ rec.id +')">詳情</a>';
-
return e+d+f;
-
}},
-
]],
-
toolbar:'#jqueryToolbar',
-
pagination:true,
-
queryParams:{},
-
onLoadSuccess:function(data){
-
$('#list').datagrid('clearSelections');
-
if(data.total==0){
-
$('.datagrid-body-inner').eq(0).addClass("l_elist");
-
$('.datagrid-body').eq(1).append('<div class="r_elist">無數據</div>');
-
}else{
-
$('.datagrid-body-inner').eq(0).removeClass("l_elist");
-
}
-
}
-
});
-
-
-
var p = $('#list').datagrid('getPager');
-
$(p).pagination({
-
pageSize: 10,
-
pageList: [10,20,30,40,50],
-
beforePageText: '第',
-
afterPageText: '頁 共 {pages} 頁',
-
displayMsg: '當前顯示第 {from} 到 {to} 條記錄 共 {total} 條記錄'
-
-
-
-
-
-
});
-
-
-
})
-
-
function searchData() {
-
var a = new Array();
-
var yhm = $("#yhm").val();
-
if(yhm!=null && yhm!="") a["yhm"]=yhm;
-
var rymc = $("#rymc").val();
-
if(rymc!=null && rymc!="") a["rymc"]=rymc;
-
var rybh = $("#rybh").val();
-
if(rybh!=null && rybh!="") a["rybh"]=rybh;
-
doSearch(a);
-
}
-
-
function doSearch(queryParams){
-
$('#list').datagrid('clearSelections');
-
$("#list").datagrid('options').queryParams=queryParams;
-
$("#list").datagrid('load');
-
}
-
-
function resetCondition(){
-
$("#yhm").val("");
-
$("#rymc").val("");
-
$("#rybh").val("");
-
}
-
-
function create() {
-
var url = '${contextPath}/admin/user/create.jhtml';
-
showMaxJqueryWindow("新增用戶信息", url);
-
}
-
-
function editRow(id) {
-
var url = '${contextPath}/admin/user/edit.jhtml?id='+id;
-
showMaxJqueryWindow("編輯用戶信息", url);
-
}
-
-
function showRow(id) {
-
var url = '${contextPath}/admin/user/detail.jhtml?id='+id;
-
showMaxJqueryWindow("用戶詳情", url);
-
}
-
-
</script>
-
</body>
-
</html>
說明:
1)field中的值要跟實體的屬性名稱一樣,不然就獲取不到
2)SpringMVC的Controller中方法要註解爲@ResponseBody,返回的是JSON格式如下所示:
-
{"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編程中很常用的方法(日期轉換、數字格式化等)方便開發人員操作
插值:即${...}或#{...}格式的部分,將使用數據模型中的部分替代輸出
-
<body>
-
<div id="infoTabs" class="easyui-tabs" fit="true" border="false" style="margin: 0; height:530px;">
-
<div title="用戶信息" id="editInfo" style="margin:0">
-
<form id="tableForm" name="tableForm" action="${contextPath}/admin/base/report.jhtml" method="post">
-
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="border-t">
-
<tr class="item">
-
<td class="itemtit"> 人員編號</td>
-
<td class="border_b" colspan="3">
-
${user.rybh!''}
-
</td>
-
</tr>
-
-
<tr class="item">
-
-
<td class="itemtit"> 密碼</td>
-
<td class="border_b" colspan="3">
-
${user.mm!''}
-
</td>
-
-
</tr>
-
-
-
-
<tr class="item">
-
<td class="itemtit"> 授權人員編號</td>
-
<td class="border_b" colspan="3">
-
${user.sqrybh!''}
-
</td>
-
</tr>
-
-
<tr class="item">
-
<td class="itemtit"> 人員名稱</td>
-
<td class="border_b" colspan="3">
-
${user.rymc!''}
-
</td>
-
</tr>
-
<tr class="item">
-
<td class="itemtit"> 人員類型</td>
-
<td class="border_b" colspan="3">
-
${user.rylx!''}
-
</td>
-
</tr>
-
<tr class="item">
-
<td class="itemtit"> 所屬部門名稱</td>
-
<td class="border_b" colspan="3">
-
${user.sszhmc!''}
-
</td>
-
</tr>
-
<tr class="item">
-
<td class="itemtit"> 操作人員</td>
-
<td class="border_b" colspan="3">
-
${user.czry!''}
-
</td>
-
</tr>
-
<tr class="item">
-
<td class="itemtit"> 操作人員</td>
-
<td class="border_b" colspan="3">
-
${user.czsj!''}
-
</td>
-
</tr>
-
</table>
-
</form>
-
</div>
-
-
</div>
頁面如圖所示: