JSON在线解析

SpringMVC + Freemarker 模版的使用。

信息发布:soゝso 发布日期:2016-08-22 18:24 热度:2262 分享到:

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

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

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

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

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

  1. Javascript  写一堆Html拼接。杂、乱、尤其是 Javascript  功底不好的同学,N多错误,代码不讲究的同学,写完后别人看见就想吐。
  2. 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专讲。


本文主题

如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。

¥我需要走的更远,点击我 赞助。 如果还有疑问,点击我加群,为你提供最好的解答。


工具导航地图