Java前端模版介绍——FreeMarker
2016-11-25 17:07
176 查看
模版对于前后端开发的分离十分重要，通俗的说，模版就是一种语法规则，前端在开发时只需要关注自己的部分，如样式、结构等。前端开发完成后，在需要进行后段数据渲染的时候，直接按照模版的特定规则，修改HTML代码的数据部分就可以了。这样可以使得前后端开发更高效，避免了前端依赖后端的情况。
FreeMarker就是这样的一个模版，它针对的后台是Java。其工作流程为，前端通过HTML文件改造的FreeMarker模版，交给后台人员后，后台人员放入项目中即可直接渲染数据。
一、基本语法
FreeMarker模版的后缀名为.ftl，是通过.html文件改造的，下面就是一个例子：
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h1>Welcome ${user}!</h1>
<p>Our latest product:
<a href="${latestProduct.url}">${latestProduct.name}</a>!
</body>
</html>上面的例子中，${}包围的就是变量名，这个由后台提供，前台只需要将变量名通过这种方式引入，后台会自动渲染。对于数据的结构，FreeMarker需要后台提供树形的数据结构，所以在上面我们可以看到latestProduct.url，表示url存在于latestProduct这个父数据下。关于FreeMarker的数据结构还有更深层次的问题，这里就不展开介绍了。基本使用只要知道这些就够了。
二、指令
在FreeMarker中，有一些指令，方便我们进行一些模版的渲染，内置的指令用<#>进行引用。下面介绍常用的FreeMarker内置指令。
1.if通过条件判断跳过一些部分，下面的例子在user是Big Joe时显示our beloved leader<h1>Welcome ${user}<#if user == "Big Joe">, our beloved leader</#if>!</h1>还可以结合#else或者#elseif使用：<#if animals.python.price < animals.elephant.price>
Pythons are cheaper than elephants today.
<#else>
Pythons are not cheaper than elephants today.
</#if>2.list显示一组内容，用法和其他语言框架等很相似<table border=1>
<#list animals as animal>
<tr><td>${animal.name}<td>${animal.price} Euros
</#list>
</table>有时数据内容为空，为了在数据内容为空时不输出任何东西，可以和#item配合使用：<#list misc.fruits>
<ul>
<#items as fruit>
<li>${fruit}
</#items>
</ul>
</#list>#list配合#spe可以定义各个内容之间的分隔符<p>Fruits: <#list misc.fruits as fruit>${fruit}<#sep>, </#list>上面的输出结果为：<p>Fruits: orange, banana#list也可使用#else，用于当没有数据时输出其他内容：<p>Fruits: <#list misc.fruits as fruit>${fruit}<#sep>, <#else>None</#list>3.include：类似于文件引入，引入其他文件的html模版<#include "/copyright_footer.html">
三、使用NodeJS在前端自主调试FreeMarker前面的内容已经将FreeMarker的基本知识介绍完了，了解了上面内容，使用FreeMarker处理一些常见场景都不会出现问题了。但是当使用了模版之后，如果我们想调试渲染后的模版样式会非常麻烦。这意味着我们需要安装Java的一系列环境，还要使用后台代码等等。但是作为前端开发，这对我们来说代价很高。
其实在Node上就有专门用来调试FreeMarker模版的模块。它可以进行全部的Java调试，我们只需要在前端就可以摸你进行调试了。这个模块的github地址为：https://github.com/ijse/freemarker.js。
使用该模块的方法和使用其他node模块一样，通过npm进行安装。之前，先要安装一下Java环境，虽然这也需要安装Java环境，但相比我们还要下载各种IDE要轻松的多。
编写一个test.js，内容如下：
var FreeMarker = require(“free marker.js”);
var fm = new FreeMarker({
viewRoot: path.join(__dirname + “/view”) //配置模版目录
})
fm.render(“tpl.ftl”, dataObject, function(err, html, output){
fs.writeFile(“output.html”, html); //将文件用数据渲染并输出新的文件
})执行命令node test.js即可完成。FreeMarker.js会自动将view目录下的tpl.ftl，使用dataObject模拟的Java数据，转换成output.html，存放在指定目录下。我们只要看output.html，就可以查看、调试界面样式了！
FreeMarker就是这样的一个模版，它针对的后台是Java。其工作流程为，前端通过HTML文件改造的FreeMarker模版，交给后台人员后，后台人员放入项目中即可直接渲染数据。
一、基本语法
FreeMarker模版的后缀名为.ftl，是通过.html文件改造的，下面就是一个例子：
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<h1>Welcome ${user}!</h1>
<p>Our latest product:
<a href="${latestProduct.url}">${latestProduct.name}</a>!
</body>
</html>上面的例子中，${}包围的就是变量名，这个由后台提供，前台只需要将变量名通过这种方式引入，后台会自动渲染。对于数据的结构，FreeMarker需要后台提供树形的数据结构，所以在上面我们可以看到latestProduct.url，表示url存在于latestProduct这个父数据下。关于FreeMarker的数据结构还有更深层次的问题，这里就不展开介绍了。基本使用只要知道这些就够了。
二、指令
在FreeMarker中，有一些指令，方便我们进行一些模版的渲染，内置的指令用<#>进行引用。下面介绍常用的FreeMarker内置指令。
1.if通过条件判断跳过一些部分，下面的例子在user是Big Joe时显示our beloved leader<h1>Welcome ${user}<#if user == "Big Joe">, our beloved leader</#if>!</h1>还可以结合#else或者#elseif使用：<#if animals.python.price < animals.elephant.price>
Pythons are cheaper than elephants today.
<#else>
Pythons are not cheaper than elephants today.
</#if>2.list显示一组内容，用法和其他语言框架等很相似<table border=1>
<#list animals as animal>
<tr><td>${animal.name}<td>${animal.price} Euros
</#list>
</table>有时数据内容为空，为了在数据内容为空时不输出任何东西，可以和#item配合使用：<#list misc.fruits>
<ul>
<#items as fruit>
<li>${fruit}
</#items>
</ul>
</#list>#list配合#spe可以定义各个内容之间的分隔符<p>Fruits: <#list misc.fruits as fruit>${fruit}<#sep>, </#list>上面的输出结果为：<p>Fruits: orange, banana#list也可使用#else，用于当没有数据时输出其他内容：<p>Fruits: <#list misc.fruits as fruit>${fruit}<#sep>, <#else>None</#list>3.include：类似于文件引入，引入其他文件的html模版<#include "/copyright_footer.html">
三、使用NodeJS在前端自主调试FreeMarker前面的内容已经将FreeMarker的基本知识介绍完了，了解了上面内容，使用FreeMarker处理一些常见场景都不会出现问题了。但是当使用了模版之后，如果我们想调试渲染后的模版样式会非常麻烦。这意味着我们需要安装Java的一系列环境，还要使用后台代码等等。但是作为前端开发，这对我们来说代价很高。
其实在Node上就有专门用来调试FreeMarker模版的模块。它可以进行全部的Java调试，我们只需要在前端就可以摸你进行调试了。这个模块的github地址为：https://github.com/ijse/freemarker.js。
使用该模块的方法和使用其他node模块一样，通过npm进行安装。之前，先要安装一下Java环境，虽然这也需要安装Java环境，但相比我们还要下载各种IDE要轻松的多。
编写一个test.js，内容如下：
var FreeMarker = require(“free marker.js”);
var fm = new FreeMarker({
viewRoot: path.join(__dirname + “/view”) //配置模版目录
})
fm.render(“tpl.ftl”, dataObject, function(err, html, output){
fs.writeFile(“output.html”, html); //将文件用数据渲染并输出新的文件
})执行命令node test.js即可完成。FreeMarker.js会自动将view目录下的tpl.ftl，使用dataObject模拟的Java数据，转换成output.html，存放在指定目录下。我们只要看output.html，就可以查看、调试界面样式了！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Java模板引擎 FreeMarker介绍
- [FreeMarker 2.3.20] Part I 关于模版设计的介绍 ~准备阶段~ 引擎总览
- Java Web前端到后台常用框架介绍
- 前端模版artTemplate的介绍及使用
- java前端的重要框架---windowbuilder介绍
- JAVA模版引擎Freemarker常用标签(一)
- Java模版引擎：jsp、freemarker、velocity区别
- java模版引擎freemarker和velocity的对比
- Java Web前端到后台常用框架介绍
- Java Web前端到后台常用框架介绍
- [FreeMarker 2.3.20] Part I 关于模版设计的介绍 ~值和类型~ 基础概念
- Java Web前端到后台常用框架介绍
- 前端模版artTemplate的介绍及使用
- Java Web前端到后台常用框架介绍
- java使用freemarker模版下载成Excel文件
- [FreeMarker 2.3.20] Part I 关于模版设计的介绍 ~准备阶段~ data-model总览
- [FreeMarker 2.3.20] Part I 关于模版设计的介绍 ~模板~表达式
- Java Web前端到后台常用框架介绍
- Java Web前端到后台常用框架介绍
- java-Freemarker TemplateLoader实现模版