freemarker标签使用及配置

59 阅读 0 评论 39 点赞

我是靠谱客的博主秀丽机器猫，最近开发中收集的这篇文章主要介绍freemarker标签使用及配置，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

经过一段时间的钻研，freemarker确实比jsp好用，freemarker严格划分了mvc模式。以填充模板的方式展示到页面。下面介绍下本人经历的freemarker使用及配置，配置标签对项目的维护性和扩展性好。

创建freemarker配置，web.xml加载一下

创建 springmvc-freemarker.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd"
	default-lazy-init="true">  
	
   <!-- 配置freeMarker的模板路径 -->  
     <bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">  
        <property name="templateLoaderPath" value="WEB-INF/web/templates/" />  
        <property name="defaultEncoding" value="UTF-8" /> 
         <property name="freemarkerSettings">  
            <props>  
                <prop key="template_update_delay">10</prop>  
                <prop key="locale">zh_CN</prop>  
                <prop key="datetime_format">yyyy-MM-dd HH:mm:ss</prop>  
                <prop key="date_format">yyyy-MM-dd</prop>  
                <prop key="number_format">#.##</prop>  
                <prop key="tag_syntax">auto_detect</prop>  
            </props>  
        </property>   
         <!-- 假设你需要使用freemarker的自定义标签，这里还需要增加这一段 -->  
	    <property name="freemarkerVariables">  
	        <map>  
	       		<entry key="imgResUrl" value-ref="img_res_url" />
	        </map>     
	    </property>  
     </bean> 
     
     <!-- 自定义标签访问路径 -->
     <bean id="img_res_url" class="com.icbc.app.freemarker.CmsCommonDirective">
     	<property name="tagType" value="imgResUrl" />
     </bean>
     <!-- freemarker视图解析器 -->  
     <bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">  
	     <property name="contentType" value="text/html;charset=UTF-8" />  
        <!-- 此变量值为pageContext.request, 页面使用方法：rc.contextPath -->  
        <property name="requestContextAttribute" value="rc" />  
     </bean>  
</beans>

<property name="templateLoaderPath" value="WEB-INF/web/templates/" />   //value值代表的controller返回的html，默认前缀的路径

<prop key="tag_syntax">auto_detect</prop>  // tag_syntax 代表html页面渲染的时候，标签使用[#if ]的模式，还有一种是<#if>,个人觉得[#if]比较好用，因为不会和html的标签冲突。


<property name="freemarkerVariables">  
	<map>  
		<entry key="imgResUrl" value-ref="img_res_url" />
	</map>     
</property> 
//key="imgResUrl" 表示页面自定义标签的名称
//value-ref="img_res_url" 自定义标签访问路径

<bean id="img_res_url" class="com.icbc.app.freemarker.CmsCommonDirective">
   <property name="tagType" value="imgResUrl" />
</bean>
id="img_res_url" //就是上面 value-ref="img_res_url" 链路下来的
class="com.icbc.app.freemarker.CmsCommonDirective" //表示自定义标签访问的类，类里面可以配置标签的作用
<property name="tagType" value="imgResUrl" /> //表示此标签的名称为  imgResUrl

创建配置文件，common.properties

##图片路径
img_res_url=/images/resources

创建CmsCommonDirective.java

package com.icbc.app.freemarker;

import java.io.IOException;
import java.io.Writer;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import com.icbc.app.common.utils.CmsUtils;
import com.icbc.app.constants.Constants;
import com.icbc.app.constants.Constants.Tag;
import com.icbc.app.web.utils.AppConfig;

import freemarker.core.Environment;
import freemarker.template.ObjectWrapper;
import freemarker.template.SimpleSequence;
import freemarker.template.TemplateDirectiveBody;
import freemarker.template.TemplateDirectiveModel;
import freemarker.template.TemplateException;
import freemarker.template.TemplateModel;

public class CmsCommonDirective implements TemplateDirectiveModel {

	private String tagType = null;

	@SuppressWarnings("rawtypes")
	@Override
	public void execute(Environment env, Map params, TemplateModel[] loopVars, TemplateDirectiveBody body)throws TemplateException, IOException
	{
		if (Tag.IMG_RES_URL.equals(tagType))//图片路径 Tag.IMG_RES_URL 是在常量池定义的

		{
			try 
			{
				renderImgResUrl(env, params, loopVars, body);
			} catch (Exception e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		
	}
	
	@SuppressWarnings("rawtypes")
	private void renderImgResUrl(Environment env, Map params, TemplateModel[] loopVars, TemplateDirectiveBody body)
			throws Exception
	{
		Writer out = env.getOut();
		AppConfig loader = new AppConfig();
		out.write(loader.getPropertiesByName("img_res_url"));//获取配置文件里面图片前缀路径，将标签的值设置成properties设置的值
	}
	public String getTagType()
	{
		return tagType;
	}

	public void setTagType(String tagType)
	{
		this.tagType = tagType;
	}
}

创建controller

package com.icbc.app.controller;


import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.icbc.app.web.utils.FrontUtils;
/**
 *
 * @ClassName:  LoginController   
 * @Description:TODO  
 * @author: 何俊辉
 * @date:   2017年7月4日 上午10:48:12   
 *     
 * @Copyright: 2017 
 *
 */
@Controller
public class MemberController {
	private final Log logger = LogFactory.getLog(this.getClass());
	
	
	private static final String ICBC_INDEX = "index.html";
	
	
	/**
	 * 首页GET
	 * @Title: icbcLogin_GET   
	 * @Description: TODO 访问页面需先访问controller的get方法，get方法返回的是页面
	 * @param: @param request
	 * @param: @param response
	 * @param: @param model
	 * @param: @return      
	 * @return: String      
	 * @throws
	 */
	@RequestMapping(value="/icbc/index.htm",method = RequestMethod.GET)
	public String icbcIndex_GET(HttpServletRequest request,HttpServletResponse response,ModelMap model,String userId,String time)
	{
		model.addAttribute("test1","test1");
		
		return FrontUtils.findFrontTpl(request, response, model, ICBC_INDEX);
	}
	
}

创建index.html页面

[@compress single_line=true]<!-- 此代码将输出压缩为一行。都需要包裹所需文档 -->
[#assign headerTitle = 'APP首页']<!-- 此代码是用于页面标题 -->
[#include "/common/header.html"/]<!-- 此代码是引用公用头部 -->
<link rel="stylesheet" href="${base}/template/index/css/skin.css" />
<section class="main">
<div class="mui-slider" id="slider" style="width:100%;height:200px"> 
	<div>刚刚配置的标签为：[@imgResUrl /] 通过model传出的参数：${test}</div>
</div>
</section>
</body>
</html>
[/@compress]

页面效果：

写博客没多久，写的比较烂，多多包涵。