SpringMVC + Freemarker 模版的使用

最近2年，接触的公司， Java  的View层，大多都是在使用模版语言，更多的在使用 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模版文件代码：

1. <ul class="cf">
2. <#if list?exists && list?size gt 0>
3. <#list list as it>
4. <li>
5. <a class="pic fancybox" href="${it.url}" title="${it.fileName}">
6. <img src="${it.url}" />
7. a>
8. <span class="myCouse_inf">
9. <h2><a href="javascript:void(0);">${it.fileName}a>h2>
10. <h3>
11. <a class="toux_sw" href="/member.html">
12. <img src="${it.userPic}" />${it.userName}
13. </a>
14. <a style="margin-left: 15px;" class=" icon_lev fancybox icon_lev2"
15. title="${it.fileName}" href="${it.url}">预览</a>
16. </h3>
17. </span>
18. </a>
19. </li>
20. </#list>
21.  
22. <#else>
23. <li style="width: 100%;">
24. <p style="display: block; text-align: center; font-size: 3em;
25. height: 80px; line-height: 80px;">
26. 你没有分享任何信息，赶快分享你的作品吧。
27. </p>
28. </li>
29. </#if>
30.  
31. <#if pageHtml?exists>
32. <div class="pages">
33. ${pageHtml}
34. </div>
35. </#if>

 

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

1. /**
2. * 加载评论
3. * @param key
4. * @param pageNo
5. * @param pageSize
6. * @return
7. */
8. @RequestMapping(value="comment/loadMessage",method=RequestMethod.POST)
9. @ResponseBody
10. public void loadMessage(String targetKey,Integer pageNo,Integer pageSize,
11. HttpServletResponse response){
12. Pagination<MessageComment> page =
13. commentMessageService.findCommentByKey(targetKey, pageNo, pageSize);
14. resultMap.put("list", page.getList());
15. resultMap.put("targetKey", targetKey);
16. String ftl = "message/comment/comment_template.ftl";
17. FreemarkerOutHTMLUtils.outHtml(response,ftl , resultMap);
18. }

 

下面是工具类代码：

1. public class FreemarkerOutHTMLUtils {
2. static Configuration cfg = Ferrmarker.cfg;
3.  
4. static {
5. // 初始化FreeMarker配置
6. // 创建一个Configuration实例
7. //cfg = new Configuration();
8. // 设置FreeMarker的模版文件位置WEB-INF/templates
9. }
10.  
11. public static void outHtml(HttpServletResponse response,String path,
                    Map<String,Object> parament) {
12. try {
13. // 取得模版文件
14. Template t = cfg.getTemplate(path);
15. // 开始准备生成输出
16. // - 使用模版文件的charset作为本页面的charset
17. // - 使用text/html MIME-type
18. response.setContentType("text/html; charset=" + t.getEncoding());// +
19. Writer out = response.getWriter();
20. parament.putAll(Ferrmarker.initMap);//加载配置
21. // 合并数据模型和模版，并将结果输出到out中
22. t.process(parament, out);
23. } catch (Exception e) {
24. LoggerUtils.fmtError(FreemarkerOutHTMLUtils.class,e,"处理模版中出现错误");
25. }
26. }
27. }

 

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

1. public static Map<String,Object> initMap = new LinkedHashMap<String,Object>() ;
2.  
3. static {
4. /**Freemarker Config*/
5. //1、创建Cfg
6. cfg = new Configuration();
7. //2、设置编码
8. cfg.setLocale(Locale.getDefault()) ;
9. cfg.setEncoding(Locale.getDefault(),"UTF-8") ;
10.  
11. /**添加自定义标签*/
12. APITemplateModel api = SpringContextUtil.getBean("api",APITemplateModel.class);
13. cfg.setSharedVariable("api", api);
14.  
15. FreeMarkerConfigExtend ext =
                    SpringContextUtil.getBean("freemarkerConfig",FreeMarkerConfigExtend.class);
16.  
17. Configuration vcfg = ext.getConfiguration();
18. Set<String> keys = vcfg.getSharedVariableNames();
19. for (String key : keys) {
20. TemplateModel value = vcfg.getSharedVariable(key);
21. cfg.setSharedVariable(key, value);
22. }
23. try {
24. FreeMarkerConfigExtend.putInitShared(cfg);
25. } catch (TemplateModelException e) {
26. logger.error("添加Freemarker自定义方法失败;" ,e);
27. }
28. try {
29. cfg.setDirectoryForTemplateLoading(new File(freemarkerPath));
30. } catch (IOException e) {
31. LoggerUtils.fmtError(Ferrmarker.class,e, "加载Freemarker 目录失败%s", freemarkerPath);
32. }
33. IUser token = TokenManager.getToken();
34. initMap.put("token", token);
35. initMap.put("_time", new Date().getTime());
36. initMap.put("NOW_YEAY", Constant.NOW_YEAY);
37.  
38. initMap.put("_v", Constant.VERSION);//版本号，重启的时间
39. initMap.put("domain_static", Constant.DOMAIN_STATIC);//后台域名
40. }

 

前端代码呢？

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

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