SpringMVC + Freemarker 模版的使用。

JSON 2016-08-22 18:24:36 18217

最近2年，接触的公司， Java 的View层，大多都是在使用模版语言，更多的在使用 Freemarker 。更多 Freemarker 信息请点击： Freemarker 。

后面我会介绍 Freemarker 更多的东西。更多我亲身体验的东西。今天就说下 Freemarker 做模版怎么使用。

以前我们用Ajax有2种方式：

通过 Ajax 从后台获取数据，返回前端页面，然后循环拼接字符串。
通过 Ajax 请求后台，后台拼接字符串成Html代码，返回前端直接展示。

无外乎这2中做法。那么有什么缺点呢？

用 Javascript 写一堆Html拼接。杂、乱、尤其是 Javascript 功底不好的同学，N多错误，代码不讲究的同学，写完后别人看见就想吐。
Java 代码拼接Html代码一直是广大优质 Java 程序员所唾弃的，当然，JSP里写 Java 代码也是要被鄙视的。

进入主题，我们今天要使用Freemarker这个模版语言来返回Html代码，前端Ajax请求后直接显示。

Freemarker模版文件代码：

<ul class="cf">
	<#if list?exists && list?size gt 0>
		<#list list as it>
			<li>
				<a class="pic fancybox" href="${it.url}" title="${it.fileName}">
					<img src="${it.url}" />
				a>
				<span class="myCouse_inf">
					<h2><a href="javascript:void(0);">${it.fileName}a>h2>
					<h3>
						<a class="toux_sw" href="/member.html">
							<img src="${it.userPic}" />${it.userName}
						</a>
						<a style="margin-left: 15px;" class=" icon_lev fancybox icon_lev2" 
						title="${it.fileName}" href="${it.url}">预览</a>
					</h3>
				</span>
				</a>
			</li>
		</#list>
		
	<#else>
		<li style="width: 100%;">
			<p style="display: block; text-align: center; font-size: 3em;
				 height: 80px; line-height: 80px;">
				你没有分享任何信息，赶快分享你的作品吧。
			</p>
		</li>
	</#if>
	
<#if pageHtml?exists>
	<div class="pages">
		${pageHtml}
	</div>
</#if>

下面是`Controller`代码，使用的是 SpringMVC ：

/**
	 * 加载评论
	 * @param key
	 * @param pageNo
	 * @param pageSize
	 * @return
	 */
	@RequestMapping(value="comment/loadMessage",method=RequestMethod.POST)
	@ResponseBody
	public void loadMessage(String targetKey,Integer pageNo,Integer pageSize,
			HttpServletResponse response){
		Pagination<MessageComment> page = 
			commentMessageService.findCommentByKey(targetKey, pageNo, pageSize);
		resultMap.put("list", page.getList());
		resultMap.put("targetKey", targetKey);
		String ftl = "message/comment/comment_template.ftl";
		FreemarkerOutHTMLUtils.outHtml(response,ftl , resultMap);
	}

下面是工具类代码：

public class FreemarkerOutHTMLUtils {
	static Configuration cfg = Ferrmarker.cfg;
	
	static {
		// 初始化FreeMarker配置
		// 创建一个Configuration实例
		//cfg = new Configuration();
		// 设置FreeMarker的模版文件位置WEB-INF/templates
	}

	public static void outHtml(HttpServletResponse response,String path,
                    Map<String,Object> parament) {
		try {
			// 取得模版文件
			Template t = cfg.getTemplate(path);
			// 开始准备生成输出
			// - 使用模版文件的charset作为本页面的charset
			// - 使用text/html MIME-type
			response.setContentType("text/html; charset=" + t.getEncoding());// + 
			Writer out = response.getWriter();
			parament.putAll(Ferrmarker.initMap);//加载配置
			// 合并数据模型和模版，并将结果输出到out中
			t.process(parament, out);
		} catch (Exception e) {
			LoggerUtils.fmtError(FreemarkerOutHTMLUtils.class,e,"处理模版中出现错误");
		}
	}
}

还有关键的一步，`Freemarker`配置设置，这里有很多种方式实现：

public static Map<String,Object> initMap = new LinkedHashMap<String,Object>() ;
	
	static {
		/**Freemarker Config*/
		//1、创建Cfg
		cfg = new Configuration();
		//2、设置编码
		cfg.setLocale(Locale.getDefault()) ;
		cfg.setEncoding(Locale.getDefault(),"UTF-8") ;
		
		/**添加自定义标签*/
		APITemplateModel api = SpringContextUtil.getBean("api",APITemplateModel.class);
		cfg.setSharedVariable("api", api);
		
		FreeMarkerConfigExtend ext = 
                    SpringContextUtil.getBean("freemarkerConfig",FreeMarkerConfigExtend.class);
		
		Configuration vcfg = ext.getConfiguration();
		Set<String> keys = vcfg.getSharedVariableNames();
		for (String key : keys) {
			TemplateModel value = vcfg.getSharedVariable(key);
			cfg.setSharedVariable(key, value); 
		}
		try {
			FreeMarkerConfigExtend.putInitShared(cfg);
		} catch (TemplateModelException e) {
			logger.error("添加Freemarker自定义方法失败;" ,e);
		}
		try {
			cfg.setDirectoryForTemplateLoading(new File(freemarkerPath));
		} catch (IOException e) {
			LoggerUtils.fmtError(Ferrmarker.class,e, "加载Freemarker 目录失败%s", freemarkerPath);
		}
		IUser token = TokenManager.getToken();
		initMap.put("token", token);
		initMap.put("_time", new Date().getTime());
		initMap.put("NOW_YEAY", Constant.NOW_YEAY);
		
		initMap.put("_v", Constant.VERSION);//版本号，重启的时间
		initMap.put("domain_static", Constant.DOMAIN_STATIC);//后台域名
	}

前端代码呢？

var data = {"userId":"${token.id}",pageNo:"${pageNo?default(1)}"};
$.post("/ishare/loadShare.shtml",data,function(html){
	$("#outHtml").html(html);
});

ps：这就解决了，有疑问的联系我，知无不答，后面我有时间，开一个Freemarker专讲。