Freemarker如何生成树形导航菜单（递归）

生成树形导航菜单是一个很常见的需求，Freemarker提供了递归的方式来实现。下面是Freemarker生成树形导航菜单的完整攻略。

1.准备数据

首先需要准备好菜单的数据，这里假设菜单数据是一个嵌套数组，每个菜单项都有id、name、url和children属性。例如：

[
  {
    "id": 1,
    "name": "首页",
    "url": "/",
    "children": []
  },
  {
    "id": 2,
    "name": "产品",
    "url": "/products",
    "children": [
      {
        "id": 21,
        "name": "产品1",
        "url": "/products/1",
        "children": []
      },
      {
        "id": 22,
        "name": "产品2",
        "url": "/products/2",
        "children": [
          {
            "id": 221,
            "name": "子产品1",
            "url": "/products/2/1",
            "children": []
          },
          {
            "id": 222,
            "name": "子产品2",
            "url": "/products/2/2",
            "children": []
          }
        ]
      }
    ]
  }
]

2.编写模板

实现树形导航菜单的关键是递归，需要使用Freemarker的<#list>标签和<#recurse>标签。下面是一个简单的树形导航菜单模板：

<ul>
<#list menu as item>
  <li>
    <a href="${item.url}">${item.name}</a>
    <#if item.children?size gt 0>
      <ul>
        <#list item.children as child>
          <#recurse item=child />
        </#list>
      </ul>
    </#if>
  </li>
</#list>
</ul>

在这个模板中，<#list>标签遍历菜单数组，<#if>标签判断当前菜单项是否有子菜单，如果有，则使用<#recurse>标签递归渲染子菜单。

3.渲染模板

最后一步是将菜单数据和模板结合起来进行渲染。可以使用Freemarker提供的Template和TemplateModel接口来实现。下面是一个简单的Java代码示例：

Configuration cfg = new Configuration(Configuration.VERSION_2_3_30);
cfg.setDefaultEncoding("UTF-8");
cfg.setClassLoaderForTemplateLoading(getClass().getClassLoader(), "templates");

Map<String, Object> root = new HashMap<>();
root.put("menu", menuData);

Template template = cfg.getTemplate("menu.ftl");
StringWriter out = new StringWriter();
template.process(root, out);

String result = out.toString();

在这个示例中，首先创建了一个Freemarker的Configuration对象，并设置默认字符编码和模板加载器。然后创建一个包含菜单数据的root Map，将它和模板结合起来渲染，最后将渲染结果保存到一个字符串中。

示例1

下面是一个简单的树形导航菜单示例代码：

<ul>
<#list menu as item>
  <li>
    <a href="${item.url}">${item.name}</a>
    <#if item.children?size gt 0>
      <ul>
        <#list item.children as child>
          <#recurse item=child />
        </#list>
      </ul>
    </#if>
  </li>
</#list>
</ul>

示例2

下面是一个更复杂的树形导航菜单示例代码，展示了如何使用不同的HTML标签和CSS样式来渲染菜单：

<nav>
  <ul>
    <#list menu as item>
      <li>
        <a href="${item.url}">
          <i class="fa ${item.icon!''}"></i>
          <span>${item.name}</span>
          <#if item.children?size gt 0>
            <i class="fa fa-angle-down"></i>
          </#if>
        </a>
        <#if item.children?size gt 0>
          <ul>
            <#list item.children as child>
              <#recurse item=child />
            </#list>
          </ul>
        </#if>
      </li>
    </#list>
  </ul>
</nav>

在这个示例中，使用了FontAwesome字体库中的图标来展示菜单项的图标，使用了CSS样式来添加动画效果和逐级缩进的效果。