Jtwig 教程 · ZetCode 中文系列教程

{% raw %} # Jtwig 教程原文：http://zetcode.com/java/jtwig/ 這是 Jtwig Java 模板引擎的入門教程。我們介紹 Jtwig 模板引擎，并創建幾個控制臺和 Web 應用。 Maven 用于構建我們的示例。 NetBeans 用于管理應用。 Jtwig 是 Java 編程語言的現代模板引擎。它是模塊化，可配置且易于使用的模板引擎。它的靈感來自 Django 的模板引擎。 Jtwig 的主頁是 [jtwig.org](http://jtwig.org) 。模板引擎將靜態數據與動態數據結合起來以產生內容。模板是內容的中間表示。它指定如何生成輸出。模板引擎的優點是： * 關注點分離， * 避免重復代碼， * 更容易在視圖之間切換， * 可重用性。 Jtwig 不限于 HTML 頁面的模板；它也可以用于純文本。 ## 控制臺應用前四個應用是控制臺應用。我們在 NetBeans 中創建新的 Maven Java 應用。他們使用以下 Maven 構建文件： `Excerpt from pom.xml` ```java <repositories> <repository> <id>jcenter</id> <url>https://jcenter.bintray.com/</url> </repository> </repositories> <dependencies> <dependency> <groupId>org.jtwig</groupId> <artifactId>jtwig-core</artifactId> <version>5.58</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-simple</artifactId> <version>1.7.21</version> </dependency> </dependencies> ``` 在 Maven `pom.xml`文件中，我們為 Jtwig 和`jtwig-core`和`slf4j-simple`依賴項指定倉庫。 ### 變量在第一個應用中，我們探索 Jtwig `set`命令。 `set`命令允許在 Jtwig 模板中指定分配操作。它將表達式的結果分配給指定的變量。 ![Java console project structure in NetBeans](https://img.kancloud.cn/34/94/3494244ff9f68686e9b6be3a0314ff47_263x252.jpg) 圖：NetBeans 中的 Java 控制臺項目結構這是 NetBeans 中的項目結構。 `ConsoleJtwigEx.java` ```java package com.zetcode.client; import org.jtwig.JtwigModel; import org.jtwig.JtwigTemplate; public class ConsoleJtwigEx { public static void main(String[] args) { JtwigTemplate template = JtwigTemplate.classpathTemplate("templates/simple.twig"); JtwigModel model = JtwigModel.newModel(); template.render(model, System.out); } } ``` 我們創建一個處理 Jtwig 模板文件的 Java 控制臺應用。 ```java JtwigTemplate template = JtwigTemplate.classpathTemplate("templates/simple.twig"); ``` 創建了`JtwigTemplate`。它加載位于`src/main/java/resources/templates`目錄中的`simple.twig`模板文件。 ```java JtwigModel model = JtwigModel.newModel(); ``` `JtwigModel`已創建。該模型是鍵和值對的容器，這些鍵和值對與模板結合生成輸出。 ```java template.render(model, System.out); ``` `render()`方法創建最終輸出。它使用模型并將其輸出到系統輸出。 `simple.twig` ```java {% set v = 3 + 3 %} {{ v -}} {% set a = [1, 2, 3] %} {{ a[1] -}} {% set m = { k1: "apple", k2: "banana"} %} {{ m["k1"] }} ``` 在`simple.twig`文件中，我們使用`set`命令定義三個變量并顯示它們。 ```java {% set v = 3 + 3 %} ``` Jtwig 代碼島以`{%`開頭，以`%}`結尾。 ```java {{ v -}} ``` Jtwig 使用`{{`和`}}`顯示表達式和變量的值。 `-`是可選的空格控制字符。在這里，它刪除了代碼島后的空白。 ```java 6 2 apple ``` 這是應用的輸出。 ### 你好應用在第二個應用中，我們將一個變量傳遞給模板。 `ConsoleJtwigEx2.java` ```java package com.zetcode.client; import org.jtwig.JtwigModel; import org.jtwig.JtwigTemplate; public class ConsoleJtwigEx2 { public static void main(String[] args) { JtwigTemplate template = JtwigTemplate.classpathTemplate("templates/hello.twig"); JtwigModel model = JtwigModel.newModel().with("name", "Peter"); template.render(model, System.out); } } ``` 使用`with()`方法，我們將變量傳遞給模板文件。 `hello.twig` ```java Hello {{ name }} ``` 在模板中，我們顯示變量。 ```java Hello Peter ``` 這是示例的輸出。 ### 傳遞列表在下一個應用中，我們將值列表傳遞給模板。 `Excerpt from pom.xml` ```java <dependencies> <dependency> <groupId>org.jtwig</groupId> <artifactId>jtwig-core</artifactId> <version>5.58</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-simple</artifactId> <version>1.7.21</version> </dependency> <dependency> <groupId>com.google.guava</groupId> <artifactId>guava</artifactId> <version>19.0</version> </dependency> </dependencies> ``` 除了`jtwi-core`和`slf4j-simple`庫外，我們還將`guava`庫添加到項目依賴項中。 `ConsoleJtwigEx3.java` ```java package com.zetcode.client; import com.google.common.collect.Lists; import java.util.List; import org.jtwig.JtwigModel; import org.jtwig.JtwigTemplate; public class ConsoleJtwigEx3 { public static void main(String[] args) { List<String> names = Lists.newArrayList("Jan", "Peter", "Jane"); JtwigTemplate template = JtwigTemplate.classpathTemplate("templates/friends.twig"); JtwigModel model = JtwigModel.newModel().with("names", names); template.render(model, System.out); } } ``` 在代碼示例中，我們將名稱列表傳遞給模板。 ```java List<String> names = Lists.newArrayList("Jan", "Peter", "Jane"); ``` 使用 Google Guava，我們創建了一個名稱列表。 ```java JtwigModel model = JtwigModel.newModel().with("names", names); ``` 該列表將傳遞到模板。 `friends.twig` ```java {% for name in names %} {{ name }} {% endfor %} ``` 使用`for`命令，我們瀏覽列表并顯示其元素。 ### 包含模板使用`include`命令，我們可以包含其他模板文件。 ![Java console project structure in NetBeans 2](https://img.kancloud.cn/33/78/33787d27b93b4e9e64741d09c132d5af_263x288.jpg) 圖：NetBeans 中的 Java 控制臺項目結構 2 `templates`目錄中有三個文件。 `ConsoleEx4.java` ```java package com.zetcode.client; import org.jtwig.JtwigModel; import org.jtwig.JtwigTemplate; public class ConsoleJtwigEx4 { public static void main(String[] args) { JtwigTemplate template = JtwigTemplate.classpathTemplate("templates/main.twig"); JtwigModel model = JtwigModel.newModel(); template.render(model, System.out); } } ``` 該示例加載`main.twig`模板，其中包括其他兩個模板。 `foot.twig` ```java Footer. ``` 這是`foot.twig`模板。 `head.twig` ```java Header. ``` 這是`head.twig`模板。 `main.twig` ```java {% include "classpath:/templates/head.twig" ignore missing %} Main content. {% include 'classpath:/templates/foot.twig' ignore missing %} ``` 這是`main.twig`模板。它包括`foot.twig`和`head.twig`模板。 ```java Header. Main content. Footer. ``` This is the output of the example. ## Jtwig servlet 示例在下面的示例中，我們在標準 Java Web 應用中使用 Jtwig。該應用打包到`war`文件中，并部署在 NetBeans 的內置 Tomcat 服務器上。在 NetBeans 中，我們創建一個新的 Maven Web 應用。 ![Jtwig servlet project structure in NetBeans](https://img.kancloud.cn/ea/b5/eab56af4c739eae8e5b86bbfb2d54fdf_263x288.jpg) 圖：NetBeans 中的 Jtwig servlet 項目結構這是 NetBeans 中 Jtwig servlet 示例的項目結構。 `context.xml` ```java <?xml version="1.0" encoding="UTF-8"?> <Context path="/JtwigServlet"/> ``` 這是`context.xml`文件。 `pom.xml` ```java <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.zetcode</groupId> <artifactId>ServletJtwigEx</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> </properties> <name>ServletJtwigEx</name> <repositories> <repository> <id>jcenter</id> <url>https://jcenter.bintray.com/</url> </repository> </repositories> <dependencies> <dependency> <groupId>javax</groupId> <artifactId>javaee-web-api</artifactId> <version>7.0</version> <scope>provided</scope> </dependency> <dependency> <groupId>org.jtwig</groupId> <artifactId>jtwig-web</artifactId> <version>1.52</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <version>2.3</version> <configuration> <failOnMissingWebXml>false</failOnMissingWebXml> </configuration> </plugin> </plugins> </build> </project> ``` 這是`pom.xml`文件。我們使用`jtwig-web`依賴項。 `JtwigServlet.java` ```java package com.zetcode; import java.io.IOException; 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 org.jtwig.web.servlet.JtwigRenderer; @WebServlet(name = "JtwigServlet", urlPatterns = {""}) public class JtwigServlet extends HttpServlet { private final JtwigRenderer renderer = JtwigRenderer.defaultRenderer(); @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { renderer.dispatcherFor("/WEB-INF/templates/index.twig.html") .with("greet", "Jtwig servlet example") .render(request, response); } } ``` 我們設置 servlet 并將其分發到模板文件。我們將`greet`變量傳遞給模板。 ```java @WebServlet(name = "JtwigServlet", urlPatterns = {""}) ``` `JtwigServlet`映射到應用的上下文根。 `index.twig.html` ```java {{ greet }} ``` `index.twig.html`文件位于`WEB-INF/templates`目錄中。模板顯示`greet`變量。 ![Jtwig servlet example](https://img.kancloud.cn/9b/f1/9bf123adfb0ca643e43df50d7bdaae3d_542x336.jpg) 圖：Jtwig servlet 示例我們在 Opera 網絡瀏覽器中顯示應用輸出。 NetBeans 中的內置 Tomcat 在 8084 端口上運行。 ## Spring Boot Spring 是流行的 Java 應用框架。 Spring Boot 是通過最小的努力來創建獨立的，生產級的基于 Spring 的應用的產物。 ### Spring Boot 命令行應用在下一個應用中，我們將 Jtwig 集成到 Spring Boot 命令行應用中。它是放置在 Spring Boot 框架中的控制臺應用。 ![Spring Boot project structure in NetBeans](https://img.kancloud.cn/9f/10/9f10f714740feb8710a32369cddcacfc_263x288.jpg) 圖：NetBeans 中的 Spring Boot 項目結構這是在 NetBeans 中使用 Jtwig 的 Spring Boot 應用的項目結構。 `pom.xml` ```java <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.zetcode</groupId> <artifactId>SpringBootJtwigConsoleEx</artifactId> <version>1.0-SNAPSHOT</version> <packaging>jar</packaging> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> </properties> <repositories> <repository> <id>jcenter</id> <url>https://jcenter.bintray.com/</url> </repository> </repositories> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.3.5.RELEASE</version> <relativePath /> </parent> <dependencies> <dependency> <groupId>org.jtwig</groupId> <artifactId>jtwig-core</artifactId> <version>5.58</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> </dependency> </dependencies> <name>SpringBootJtwigConsoleEx</name> </project> ``` 這是 Maven 構建文件。它包括 Spring Boot 和 Jtwig 的依賴項。 `SpringBootClient.java` ```java package com.zetcode.client; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.EnableAutoConfiguration; import org.springframework.context.annotation.ComponentScan; @EnableAutoConfiguration @ComponentScan(basePackages="com.zetcode") public class SpringBootClient { public static void main(String[] args) { SpringApplication.run(SpringBootClient.class, args); } } ``` `SpringBootClient`設置 Spring Boot 應用。 `@EnableAutoConfiguration`注解啟用 Spring Application Context 的自動配置，嘗試猜測和配置我們可能需要的 bean。 `MyRunner.java` ```java package com.zetcode.client; import org.jtwig.JtwigModel; import org.jtwig.JtwigTemplate; import org.springframework.boot.CommandLineRunner; import org.springframework.stereotype.Component; @Component public class MyRunner implements CommandLineRunner { @Override public void run(String... args) throws Exception { JtwigTemplate template = JtwigTemplate.classpathTemplate("templates/greet.twig"); JtwigModel model = JtwigModel.newModel().with("name", "Peter"); template.render(model, System.out); } } ``` `MyRunner`是 Spring Boot 應用的命令行運行程序。我們加載并渲染模板。 `greet.twig` ```java Hello {{name}}! ``` 這是`greet.twig`模板文件。 ```java Hello Peter! ``` This is the output of the application. ### Spring Boot Web 應用本教程的最后一個示例使用 Jtwig 模板引擎創建了一個 Spring Boot Web 應用。請注意，我們正在 NetBeans 中創建 Java SE Maven 應用，而不是 Java Web Maven 應用。這是因為我們已將 Tomcat 嵌入到我們的 JAR 文件中。 `pom.xml` ```java <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.zetcode</groupId> <artifactId>SpringBootJtwigWebEx</artifactId> <version>1.0-SNAPSHOT</version> <packaging>jar</packaging> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> </properties> <repositories> <repository> <id>jcenter</id> <url>https://jcenter.bintray.com/</url> </repository> </repositories> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.3.5.RELEASE</version> <relativePath /> </parent> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter</artifactId> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-web</artifactId> </dependency> <dependency> <groupId>org.jtwig</groupId> <artifactId>jtwig-spring-boot-starter</artifactId> <version>5.55</version> </dependency> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-simple</artifactId> <version>1.7.21</version> </dependency> </dependencies> </project> ``` 在`pom.xml`文件中，我們具有以下依賴項：`spring-boot-starter`，`spring-web`，`jtwig-spring-boot-starter`和`slf4j-simple`。 `MyController.java` ```java package com.zetcode.controller; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.EnableAutoConfiguration; import org.springframework.stereotype.Controller; import org.springframework.ui.ModelMap; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.RequestMapping; @Controller @EnableAutoConfiguration public class MyController { @RequestMapping("/{name}") public String indexAction (ModelMap model, @PathVariable("name") String name) { model.addAttribute("name", name); return "index"; } public static void main(String[] args) throws Exception { SpringApplication.run(MyController.class, args); } } ``` 這是 Spring Boot Web 應用的控制器類。控制器從請求中讀取一個屬性，并將其放入模型中。然后，控制器將映射解析為模板文件。 `index.twig` ```java Hello {{name}}! ``` 這是`index.twig`文件。 ![Spring Boot web example](https://img.kancloud.cn/0d/d0/0dd028a112fa393c31896073c2a2307f_542x336.jpg) 圖：Spring Boot Web 示例 Spring Boot 啟動一個嵌入式 Tomcat 服務器，監聽端口 8080。本教程專門針對 Jtwig 模板引擎。您可能也對相關教程感興趣： [FreeMarker 教程](/java/freemarker/)， [Java 教程](/lang/java/)，[游戲簡介](/java/play/)， [Spark 簡介](/java/spark/)或 [Stripes 介紹](/java/stripes/)。 {% endraw %}