SpringMVC + Freemarker 模版的使用。

soゝso 2016-08-22 18:24:36 4597
分享到:

最近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专讲。


关于作者
目前就职于国内某电商平台公司打杂。。
相关文章
Shiro教程(八)Shiro Freemarker标签的使用
Freemarker静态化加载板的三种方式
Javascript块化编程,本站使用 require.js 优化JS加载, require.js下载
Java生成验证码合集(一)简单
多说迁移,Java开发仿自主实现评论(一)
Freemarker Macro Demo
Elasticsearch教程(三),IK分词器安装 (极速
Java 解析JSON,JSON-LIB jar包下载和使用
Freemarker教程,Freemarker 自定义方法 【含源码】
Shiro + EHCache 缓存的使用
最新文章
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 39212
SOJSON 使用又拍云 CDN 整体架构,解决百度 SEO 方案 33
又拍云(Upyun)刷新CDN,云存储缓存 —JavaAPI 20
JS解密,JavaScript 解密,任何JS加密都能100%解密,以及JS 加密讲解 87
阿里云DNS 解析讲解,SEO配置搜索引擎线路解析 45
百度秒收录教程,怎么做到百度秒收入你的页面,SEO 教程 102
CDN 请求返回 connection reset by peer,被拦截请求解决方案 37
Google AdSense 申请技巧,谷歌广告申请通不过教程 75
Mac 安装 JMeter,JMeter 下载,JMeter Http 压力测试【图解】 51
Java 随机从 List 随机获取多个不重复对象,Mysql 随机10条数据 75
最热文章
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 39214
Elasticsearch教程(四) elasticsearch head 插件安装和使用 109192
Elasticsearch教程(六) elasticsearch Client创建 73333
Elasticsearch教程(八) elasticsearch delete 删除数据(Java) 70770
Elasticsearch教程(二),IK分词器安装 67527
Elasticsearch教程(三),IK分词器安装 (极速版) 54098
Elasticsearch教程(五) elasticsearch Mapping的创建 51659
Elasticsearch教程(一),全程直播(小白级别) 51448
Elasticsearch教程(七) elasticsearch Insert 插入数据(Java) 47798
Elasticsearch权威指南-中文.pdf,Elasticsearch 中文文档下载 40972

骚码加入我们 / 千人QQ群:259217951

入群需要5元,如果没有QQ钱包,可以先Alipay、微信,赞助然后加群主拉进。

二维码生成 来自 >> 二维码生成器

支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

正在加载... ...