freemarker list 最后一个不加逗号_Java前端模版介绍——FreeMarker

最新推荐文章于 2023-03-22 09:40:08 发布

CodeQueen

最新推荐文章于 2023-03-22 09:40:08 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： freemarker list 最后一个不加逗号

本文链接：https://blog.youkuaiyun.com/weixin_28718755/article/details/112102194

本文介绍了FreeMarker模板对前后端开发分离的重要性，它针对Java后台。阐述了其基本语法，如变量引用和树形数据结构；常用指令，包括if、list、include等；还介绍了使用NodeJS在前端自主调试FreeMarker的方法，可降低前端调试成本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模版对于前后端开发的分离十分重要，通俗的说，模版就是一种语法规则，前端在开发时只需要关注自己的部分，如样式、结构等。前端开发完成后，在需要进行后段数据渲染的时候，直接按照模版的特定规则，修改HTML代码的数据部分就可以了。这样可以使得前后端开发更高效，避免了前端依赖后端的情况。

FreeMarker就是这样的一个模版，它针对的后台是Java。其工作流程为，前端通过HTML文件改造的FreeMarker模版，交给后台人员后，后台人员放入项目中即可直接渲染数据。

一、基本语法

FreeMarker模版的后缀名为.ftl，是通过.html文件改造的，下面就是一个例子：

00001.

<html>

00002.

00003.

<head>

00004.

00005.

<title>Welcome!</title>

00006.

00007.

</head>

00008.

00009.

<body>

00010.

00011.

<h1>Welcome ${user}!</h1>

00012.

00013.

<p>Our latest product:

00014.

00015.

<a href="${latestProduct.url}">${latestProduct.name}</a>!

00016.

00017.

</body>

00018.

00019.

</html>

00020.

上面的例子中，${}包围的就是变量名，这个由后台提供，前台只需要将变量名通过这种方式引入，后台会自动渲染。

对于数据的结构，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使用：

00001.

<#if animals.python.price < animals.elephant.price>

00002.

00003.

Pythons are cheaper than elephants today.

00004.

00005.

<#else>

00006.

00007.

Pythons are not cheaper than elephants today.

00008.

00009.

</#if>

00010.

2.list

显示一组内容，用法和其他语言框架等很相似

00001.

00002.

00003.

<#list animals as animal>

00004.

00005.

<tr><td>${animal.name}<td>${animal.price} Euros

00006.

00007.

</#list>

00008.

00009.

</table>

00010.

有时数据内容为空，为了在数据内容为空时不输出任何东西，可以和#item配合使用：

00001.

<#list misc.fruits>

00002.

00003.

<ul>

00004.

00005.

<#items as fruit>

00006.

00007.

<li>${fruit}

00008.

00009.

</#items>

00010.

00011.

</ul>

00012.

00013.

</#list>

00014.

#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，内容如下：

00001.

var FreeMarker = require(“free marker.js”);

00002.

00003.

var fm = new FreeMarker({

00004.

00005.

viewRoot: path.join(__dirname + “/view”) //配置模版目录

00006.

00007.

})

00008.

00009.

fm.render(“tpl.ftl”, dataObject, function(err, html, output){

00010.

00011.

fs.writeFile(“output.html”, html); //将文件用数据渲染并输出新的文件

00012.

00013.

})

00014.

执行命令node test.js即可完成。FreeMarker.js会自动将view目录下的tpl.ftl，使用dataObject模拟的Java数据，转换成output.html，存放在指定目录下。我们只要看output.html，就可以查看、调试界面样式了！