【FreeMarker】01 快速上手

1、概念

2、数据类型

3、运算符

4、指令

5、页面静态化

 

一、概念

基于Java实现的模板引擎，TemplateEngine，是一个API库

可用以生成HTML页面，Email文件，配置文件，或者是Java源文件等等

支持XML处理

模板 + 数据 = 输出

环境搭建：

创建IDEA的Maven项目，使用Webapp骨架创建项目

导入所需的依赖坐标：

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.1</version>
      <scope>provided</scope> <!-- 只在项目编译的时候提供，运行由Tomcat提供 -->
    </dependency>

    <dependency>
      <groupId>org.freemarker</groupId>
      <artifactId>freemarker</artifactId>
      <version>2.3.30</version>
    </dependency>

配置JETTY插件：

    <plugins> <!-- 配置JETTY -->
      <plugin>
        <groupId>org.eclipse.jetty</groupId>
        <artifactId>jetty-maven-plugin</artifactId>
        <version>9.2.1.v20140609</version>
      </plugin>
    </plugins>

在Web.xml中支持FreeMarker模板引擎

  <servlet>
    <servlet-name>FreeMarker-TemplateEngine</servlet-name>
    <servlet-class>freemarker.ext.servlet.FreemarkerServlet</servlet-class>
    <!-- 解析的模板文件根目录 -->
    <init-param>
      <param-name>TemplatePath</param-name>
      <param-value>/freemarker-templates</param-value>
    </init-param>
    <!-- 模板文件编码类型 -->
    <init-param>
      <param-name>default_encodings</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
  </servlet>

  <!-- 网络路径映射匹配设置，对后缀为ftl的请求进行处理 -->
  <servlet-mapping>
    <servlet-name>FreeMarker-TemplateEngine</servlet-name>
    <url-pattern>*.ftl</url-pattern>
  </servlet-mapping>

然后创建一个Servlet用以转发请求：

package cn.zeal4j.servlet.freemarker;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author Administrator
 * @file IntelliJ IDEA FreeMarker
 * @create 2020 09 21 10:45
 */
@WebServlet("/fm-01")
public class FtlServlet extends HttpServlet {

    // 设置默认的转发路径，就和web.xml的默认模板引擎寻找路径一致
    private final String TEMPLATE_ROOT_PATH = "/freemarker-templates/";

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setAttribute("message", "Hello FreeMarker TemplateEngine !!!");
        req.getRequestDispatcher(TEMPLATE_ROOT_PATH + "fmt-01.ftl").forward(req, resp);
    }
}

对应的编写模板文件【fmt-01.ftl】：

<!-- HTML注释 -->
<#-- FreeMarker注释 -->
${message}

然后配置Jetty运行

启动日志打印：

[INFO] 
[INFO] ------------------------< cn.zeal4j:FreeMarker >------------------------
[INFO] Building FreeMarker Maven Webapp 1.0-SNAPSHOT
[INFO] --------------------------------[ war ]---------------------------------
[INFO] 
[INFO] >>> jetty-maven-plugin:9.2.1.v20140609:run (default-cli) > test-compile @ FreeMarker >>>
[INFO] 
[INFO] --- maven-resources-plugin:3.0.2:resources (default-resources) @ FreeMarker ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] skip non existing resourceDirectory C:\Users\Administrator\IdeaProjects\FreeMarker\src\main\resources
[INFO] 
[INFO] --- maven-compiler-plugin:3.8.0:compile (default-compile) @ FreeMarker ---
[INFO] Changes detected - recompiling the module!
[INFO] Compiling 1 source file to C:\Users\Administrator\IdeaProjects\FreeMarker\target\classes
[INFO] 
[INFO] --- maven-resources-plugin:3.0.2:testResources (default-testResources) @ FreeMarker ---
[INFO] Using 'UTF-8' encoding to copy filtered resources.
[INFO] skip non existing resourceDirectory C:\Users\Administrator\IdeaProjects\FreeMarker\src\test\resources
[INFO] 
[INFO] --- maven-compiler-plugin:3.8.0:testCompile (default-testCompile) @ FreeMarker ---
[INFO] No sources to compile
[INFO] 
[INFO] <<< jetty-maven-plugin:9.2.1.v20140609:run (default-cli) < test-compile @ FreeMarker <<<
[INFO] 
[INFO] 
[INFO] --- jetty-maven-plugin:9.2.1.v20140609:run (default-cli) @ FreeMarker ---
[INFO] Logging initialized @2799ms
[INFO] Configuring Jetty for project: FreeMarker Maven Webapp
[INFO] webAppSourceDirectory not set. Trying src\main\webapp
[INFO] Reload Mechanic: automatic
[INFO] Classes = C:\Users\Administrator\IdeaProjects\FreeMarker\target\classes
[INFO] Context path = /
[INFO] Tmp directory = C:\Users\Administrator\IdeaProjects\FreeMarker\target\tmp
[INFO] Web defaults = org/eclipse/jetty/webapp/webdefault.xml
[INFO] Web overrides =  none
[INFO] web.xml file = file:/C:/Users/Administrator/IdeaProjects/FreeMarker/src/main/webapp/WEB-INF/web.xml
[INFO] Webapp directory = C:\Users\Administrator\IdeaProjects\FreeMarker\src\main\webapp
[INFO] jetty-9.2.1.v20140609
[INFO] Warning: No org.apache.tomcat.JarScanner set in ServletContext. Falling back to default JarScanner implementation.
[INFO] Started o.e.j.m.p.JettyWebAppContext@387bf2d9{/,file:/C:/Users/Administrator/IdeaProjects/FreeMarker/src/main/webapp/,AVAILABLE}{file:/C:/Users/Administrator/IdeaProjects/FreeMarker/src/main/webapp/}
[WARNING] !RequestLog
[INFO] Started ServerConnector@332820f4{HTTP/1.1}{0.0.0.0:8090}
[INFO] Started @3329ms
[INFO] Started Jetty Server

访问页面：

http://localhost:8090/fm-01

发现了报错原因

Caused by:
freemarker.ext.servlet.FreemarkerServlet$InitParamValueException: Failed to set the "default_encodings" servlet init-param to "UTF-8"; see cause exception.

原因是多写了一个s，去掉之后再次启动访问依然不行：

模板引擎报404找不到模板文件，结果排错发现是初始化参数的路径直接斜杠就行了

    <!-- 解析的模板文件根目录 -->
    <init-param>
      <param-name>TemplatePath</param-name>
      <param-value>/</param-value> <!-- 默认查找的模板文件路径 -->
    </init-param>

模板文件完全支持HTML标记和JS：

<!-- HTML注释 -->
<#-- FreeMarker注释 -->

<#--
可以完全像正常的HTML解析出来，编写一样的标签符号
-->
<style>
    h1 {
        color: cornflowerblue;
    }
</style>

<h1>${message}</h1>

<p>
    <input type="button" id="btn" value="触发JS">
</p>

<script type="text/javascript">
    document.getElementById('btn').onclick = function () {
        alert("js事件！！！");
    }
</script>

刷新页面，马上就能预览效果：