前端视角 Java Web 入门手册 5.8:真实世界 Web 开发—— 模版引擎

234 阅读1分钟

虽然说在同构盛行的今天 JSP 等传统构建页面 HTML 的模版引擎已经彻底退出历史舞台,但在部分场景 HTML 的框架结构需要在服务端构建,因此可以简单了解一下常用的模版引擎

Thymeleaf

首先需要添加依赖

<!-- Thymeleaf Starter -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

Spring Boot已经为 Thymeleaf 提供了默认配置,通常无需额外配置。但可以通过 application.properties 或 application.yml 进行自定义设置

# 模板前缀和后缀(默认已设置)
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

# 是否启用缓存(开发时可关闭)
spring.thymeleaf.cache=false

# 模板模式(HTML5默认)
spring.thymeleaf.mode=HTML5

# 字符编码
spring.thymeleaf.encoding=UTF-8

默认情况下,模板文件存放在src/main/resources/templates目录下,Thymeleaf 支持多种表达式

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf Demo</title>
</head>
<body>
    <!-- 变量表达式 -->
    <h1>Hello, <span th:text="${name}">Guest</span>!</h1>

    <!-- 条件表达式 -->
    <p th:if="${isAdmin}">You are an administrator.</p>
    <p th:unless="${isAdmin}">You are a regular user.</p>

    <!-- 循环表达式 -->
    <h2>Fruits List</h2>
    <ul>
        <li th:each="fruit : ${fruits}" th:text="${fruit}">Fruit Name</li>
    </ul>
</body>
</html> 

写一个简单的 Controller,为其适配数据,控制器方法返回值是 String 类型,Spring 会默认将其当作视图名称来处理,而不是直接返回字符串内容。

@Controller
public class DemoController {

    @GetMapping("/demo")
    public String demo(Model model) {
        // 变量示例
        String name = "John";
        model.addAttribute("name", name);

        // 条件示例
        boolean isAdmin = true;
        model.addAttribute("isAdmin", isAdmin);

        // 循环示例
        List<String> fruits = new ArrayList<>();
        fruits.add("Apple");
        fruits.add("Banana");
        fruits.add("Cherry");
        model.addAttribute("fruits", fruits);

        return "demo"; // 使用模板名称
    }
}    

FreeMarker

相对 Thymeleaf 而言,FreeMarker 的表达式语言更强大,适合处理复杂的业务逻辑,除了模版语法差异,其使用流程和 Thymeleaf 近乎没区别

首先添加依赖

<!-- FreeMarker Starter -->
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>

然后添加配置

# 模板前缀和后缀(默认已设置)
spring.freemarker.template-loader-path=classpath:/templates/
spring.freemarker.suffix=.ftl

# 是否启用缓存(开发时可关闭)
spring.freemarker.cache=false

# 模板编码
spring.freemarker.charset=UTF-8

# 自定义配置(例如启用Spring Macro)
spring.freemarker.expose-request-attributes=true
spring.freemarker.expose-session-attributes=true
spring.freemarker.expose-spring-macro-helpers=true

添加模板

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>FreeMarker Demo</title>
</head>
<body>
    <!-- 变量输出 -->
    <h1>Hello, ${name}!</h1>

    <!-- 条件判断 -->
    <p>
        <#if isAdmin>
            You are an administrator.
        <#else>
            You are a regular user.
        </#if>
    </p>

    <!-- 循环遍历列表 -->
    <h2>Fruits List</h2>
    <ul>
        <#list fruits as fruit>
            <li>${fruit}</li>
        </#list>
    </ul>

    <!-- 循环遍历 Map -->
    <h2>Score List</h2>
    <ul>
        <#list scores?keys as subject>
            <li>${subject}: ${scores[subject]}</li>
        </#list>
    </ul>

    <!-- 内建函数 -->
    <p>Number of fruits: ${fruits?size}</p>
    <p>First fruit: ${fruits[0]}</p>

    <!-- 字符串操作 -->
    <p>Uppercase name: ${name?upper_case}</p>
</body>
</html>    

配置 Controller

@GetMapping("/freemarker-demo")
public String freemarkerDemo(Model model) {
    // 准备数据模型
    model.addAttribute("name", "John");
    model.addAttribute("isAdmin", true);

    List<String> fruits = new ArrayList<>();
    fruits.add("Apple");
    fruits.add("Banana");
    fruits.add("Cherry");
    model.addAttribute("fruits", fruits);

    Map<String, Integer> scores = new HashMap<>();
    scores.put("Math", 90);
    scores.put("English", 85);
    scores.put("Science", 92);
    model.addAttribute("scores", scores);

    return "demo";
}

Volocity

Velocity 是 Apache 软件基金会下的一个基于 Java 的模板引擎,模板语法简洁明了,易于学习和使用,使用起来和前面两者只有语法区别,不再赘述