Web前端:FreeMarker技术指南

最新推荐文章于 2023-06-12 11:23:28 发布

Joshuai_

最新推荐文章于 2023-06-12 11:23:28 发布

阅读量592

点赞数

分类专栏：笔记文章标签： web前端 freemarker

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、什么是模板引擎，为什么要用模板引擎

在B/S程式设计中，常常有美工和程序员二个角色，他们具有不同专业技能：美工专注于表现——创建页面、风格、布局、效果等等可视元素；而程序员则忙于创建程式的商业流程，生成设计页面要显示的数据等等。

很多时候，要显示的资料在设计的时候并不存在，它们一般是在运行时由程式产生的，比如执行“价格不高于800NT的USB Disk”查询的返回结果。这种技术需求产生了JSP等Scriptlet，JSP十分强大，但是也常常被滥用，并导致一些不良的后果

将逻辑和表现混合在一起。
破坏了美工和程序员职责的正常分解。
使JSP页面难以阅读和维护。

模板引擎就是为了解决上面的问题而产生的。在设计HTML的时候，我们加入一些特定指令来指定要插入哪些数据，这些加了特殊指令的HTML或者其他文本，我们称为模板(Template)。而模板引擎会在输出页面时，用适当的数据替代这些代码。

模板和嵌入JSP的HTML是不同的，模板指令只有很有限的编程能力，可以避免混入商业逻辑。

二、Java常用的模板引擎 Velocity vs FreeMarker

1.Velocity 比 FreeMarker简单好学

2.FreeMarker 比 Velocity功能强大

三、一个简单的FreeMarkerDemo

1.导入Jar包：

FreeMarker需要freemarker-2.3.19.jar包，Struts2里面有这个Jar包。

2.编写模板文件

FreeMarker的模板文件的后缀名是ftl。这里是我写的一个Example.ftl，我把它放在WebRoot下的Template文件夹下。

<html> <head> <title>Example</title> </head> <body > <h1>大家好,我的名字叫${name},我家住在${address},我今年${age}岁了!</h1> </body> </html>

3.模板的解析

模板需要被解析之后才能生成最终的文件，FreeMarker的数据模型也是在模板中配置的。

ExampleResolution.java

publicclass ExampleResolution { publicvoid resolution(){ Writer out = null; Configuration cfg = new Configuration(); cfg.setServletContextForTemp<wbr>lateLoading(ServletActionContext.getServletContext(),"TemplateFiles"); cfg.setDefaultEncoding("UTF-8"); Map root = newHashMap(); root.put("name","李鑫龙"); root.put("address","合肥市望江西路666号"); root.put("age", 23); try { Template template = cfg.getTemplate("Example.ftl"); String path = ServletActionContext.getServletContext().getRealPath("/"); File file = new File(path +"example.html"); out = new BufferedWriter(new OutputStreamWriter(newFileOutputStream(file))); template.process(root, out); } catch (IOException e) { e.printStackTrace(); } catch (TemplateException e) { e.printStackTrace(); }finally{ try { out.flush(); out.close(); } catch (IOException e) { e.printStackTrace(); } } } }</wbr>

4.Action配置

publicclass ServiceActionimplements Action { @Override public String execute()throws Exception { ExampleResolution er = new ExampleResolution(); er.resolution(); return Action.SUCCESS; } }

5.struts.xml配置

<packagename="default" namespace="/"extends="struts-default,json-default"> <action name="example"class="com.lubby.action.ServiceAction"> <resulttype="redirect">/example.html</result> </action> </package>

6.效果显示

</html> <head> <title>Example</title> </head> <body > <h1>大家好,我的名字叫李鑫龙,我家住在合肥市望江西路666号,我今年23岁了!</h1> </body> </html>

四、FreeMarker的数据模型

数据模型是树型结构，可以任意复杂和深层次，如下面的例子：

(root) | +- animals | | | +- mouse | | | | | +-size = "small" | | | | | +-price = 50 | | | +- elephant | | | | | +-size = "large" | | | | | +-price = 5000 | | | +- python | | | +- size = "medium" | | | +- price = 4999 | +- test ="It is a test" | +- whatnot | +-because = "don't know"

类似于目录的变量称为hashes，包含保存下级变量的唯一的查询名字
类似于文件的变量称为scalars，保存单值
scalars保存的值有两种类型：字符串（用引号括起，可以是单引号或双引号）和数字（不要用引号将数字括起，这会作为字符串处理）

对scalars的访问从root开始，各部分用“.”分隔，如animals.mouse.price

另外一种变量是sequences，和hashes类似，只是不使用变量名字，而使用数字索引，如下面的例子：

（root) | +- animals | | | +- (1st) | | | | | +-name = "mouse" | | | | | +-size = "small" | | | | | +-price = 50 | | | +- (2nd) | | | | | +-name = "elephant" | | | | | +-size = "large" | | | | | +-price = 5000 | | | +- (3rd) | | | +- name = "python" | | | +- size = "medium" | | | +- price = 4999 | +- whatnot | +- fruits | +- (1st)= "orange" | +- (2nd)= "banana"

这种对scalars的访问使用索引，如animals[0].name 这种对scalars的访问使用索引，如animals[0].name

五、模板的常用指令

在FreeMarker模板中可以包括下面几个特定部分：
1.${…}：称为interpolations，FreeMarker会在输出时用实际值进行替代。

1.1 ${name}可以取得root中key为name的value。

1.2 ${person.name}可以取得成员变量为person的name属性

2.<#…>：FTL标记（FreeMarker模板语言标记）：类似于HTML标记，为了与HTML标记区分

3.<@>：宏，自定义标签

4.注释：包含在<#--和-->（而不是）之间

六.常用的FTL标记：

1、if指令：用于判断的指令

<#if (2>3)>

二比三大

<#else>

三比二大

</#if>

2、list指令：用来遍历Map和List的

2.1遍历List的数据

<#list arrList as item>

${item}

</#list>

2.2遍历Map的数据

<#listmyMap?keys as item>

${item}-à${myMap[item]}

</#list>

2.3 item_has_next:判断list是否还有值，

<#listarrList as item>

<#if item_has_next>more,

<#else>end.

</#if>

</#list>

2.4<#break />指令可以跳出循环

<#listarrList as item>

<#if!item_has_nex>end. <#break />

</#if>

more,

</#list>

3、include指令：用来引入另一个另一个ftl模板或者html页面

<#include“TemplateFiles/example.ftl”>

4、assign指令：用于为该模板页面创建或替换一个顶层变量

变量为String <#assign address=”上海”>

我家住在${address}

结果：我家住在上海

变量为map: <#assign person={"name":"Tom","age":20,"address":"上海"} >

我的名字叫${person.name},我今年${person.age}，我家住在${person.address}

结果：我的名字叫Tom,我今年20，我家住在上海

5、import指令：用于导入FreeMarker模板中的所有变量,并将该变量放置在指定的Map对象中。

<#import "/libs/mylib.ftl"as my>

6.判断为空： FreeMarker默认是不允许值为空或者值不存在的，否则一定会报错。所以我们需要一些方法来判断是否为空或者是否存在

方法一：<h1>Welcome${user!"Anonymous"}!</h1>

当user为空或者不存在会默认为Anonymous.

${user!}这个当user不存在或为空时候，不会报错，也不会输出。

方法二：<#if name??>name is exist</#if>

这里会先判断，若name为空或不存在则不会执行if内部的，也不会报错

七、内建函数：

使用方法类似于访问散列的子变量，只是使用?代替.例如：${test?upper_case?html}常用的内建函数列举如下：

?html: html字符转义

?cap_first: 字符串的第一个字母变为大写形式

?lower_case :字符串的小写形式

?upper_case :字符串的大写形式

?trim:去掉字符串首尾的空格

?substring:截字符串

?lenth: 取长度

?size: 序列中元素的个数

?int : 数字的整数部分（比如- 1.9?int 就是- 1）

?replace:字符串替换

一些示例:

${username?[0,10]}

${appHtml?replace('<@person.component/>', "AK47test")}

八、FreeMarker macro(宏)的使用

1.example1.ftl 设置宏

<#macroname >

我的名字叫做${name}!

</#macro>

2.example2.ftl 调用example1.ftl的宏

<#inclue“example1.ftl”>

<#macroname=”王晓乐”></#macro>

最终可以在example2.ftl模板生成的页面中得到

我的名字叫做王晓乐!

3.关于关于嵌套指令<#nested>

<#macrogreet>

<#nested>

</#macro>

调用：<@greet>hello!</@greet>

结果： hello!

hello!

九、利用macro简单封装的jqGrid的使用方法

1.macro名和参数的调用Demo

<@myjqgrid url="jqgridtest.action" colNameList=["来电号码","业务类型","编号"] colModelList=[["customer","string"],["bussiness","string"],["id","int"]] caption="jqgrid测试三" width="500" height="250" divId="jqgridOne" />

2.参数的含义

url：请求的action的URL

colNameList：jqGrid表所需要显示的字段

colModelList：jqGrid中colModelList中的字段的英文名，和排序的类型

caption：表格的标题名

width：长度

height：高度

divId：div的id名

十、利用macro简单封装的highcharts的使用方法

1.macro名和参数的调用Demo

<@highcharts divId="container1" type="column" title="2012年气温变化表一" subtitle="合肥气象局提供" yTitle="温度 (°C)" function=" return'<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y+'°C';" width="500" height="300"/>

2.参数的含义

divId：div的id名

type：图表的类型 / line直线 / pie饼状 / bar横向条状 / column柱状图

title：图表的标题

subtitle：图表的副标题

yTitle：纵坐标的标题

function：当鼠标移到节点时，返回的信息

width：宽度

height：高度

Joshuai_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端:FreeMarker技术指南

一、什么是模板引擎，为什么要用模板引擎在B/S程式设计中，常常有美工和程序员二个角色，他们具有不同专业技能：美工专注于表现——创建页面、风格、布局、效果等等可视元素；而程序员则忙于创建程式的商业流程，生成设计页面要显示的数据等等。很多时候，要显示的资料在设计的时候并不存在，它们一般是在运行时由程式产生的，比如执行“价格不高于800NT的USB Disk”查询的返回结果。这种技术需求产生
复制链接

扫一扫