知識庫 / Spring / Spring Boot RSS 訂閱

1. 概述

在本文中，我們將重點介紹如何使用 Mustache 模板為 Spring Boot 應用程序生成 HTML 內容。

它是一個 無邏輯的模板引擎，用於創建動態內容，由於其簡潔性而廣受歡迎。

如果您想了解基礎知識，請查看我們的 Mustache 介紹文章。

2. Maven 依賴

為了使用 Mustache 與 Spring Boot 結合，我們需要將 專門的 Spring Boot starter 添加到我們的 pom.xml 中:

<dependency>			
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-mustache</artifactId>
</dependency>
<dependency> 
    <groupId>org.springframework.boot</groupId> 
    <artifactId>spring-boot-starter-web</artifactId> 
</dependency>

此外，我們還需要依賴 spring-boot-starter-web。

3. 創建模板

下面展示一個示例，使用 Spring-Boot 創建一個簡單的 MVC 應用程序，用於在網頁上提供文章。

現在，我們來編寫第一個文章內容的模板：

<div class="starter-template">
    {{#articles}}
    <h1>{{title}}</h1>
    <h3>{{publishDate}}</h3>
    <h3>{{author}}</h3>
    <p>{{body}}</p>
    {{/articles}}
</div>

我們將保存此 HTML 文件，例如 article.html，並在我們的 index.html 中引用它。

<div class="container">
    {{>layout/article}}
</div>

在這裏，佈局是一個子目錄，而文章是模板文件的文件名。

請注意，默認的 mustache 模板文件擴展名現在是 .mustache。我們可以使用一個屬性來覆蓋此配置：

spring.mustache.suffix:.html

4. 控制器

現在我們來編寫用於提供文章的控制器：

@GetMapping("/article")
public ModelAndView displayArticle(Map<String, Object> model) {

    List<Article> articles = IntStream.range(0, 10)
      .mapToObj(i -> generateArticle("Article Title " + i))
      .collect(Collectors.toList());

    model.put("articles", articles);

    return new ModelAndView("index", model);
}

控制器返回一個包含用於渲染頁面的文章列表。在文章模板中，以 # 和 / 開頭和結尾的 <em>articles </em> 標籤負責處理該列表。

它將遍歷傳遞的模型並像 HTML 表格一樣分別渲染每個元素。

 {{#articles}}...{{/articles}}

generateArticle() 方法創建一個包含一些隨機數據的 Article 實例。

請注意，由控制器返回的 Article 模型中的鍵應與 article 模板標籤中的鍵相同。

現在，讓我們測試我們的應用程序：

@Test
public void givenIndexPage_whenContainsArticle_thenTrue() {

    ResponseEntity<String> entity 
      = this.restTemplate.getForEntity("/article", String.class);
 
    assertEquals(entity.getStatusCode(), HttpStatus.OK));
    assertTrue(entity.getBody()
      .contains("Article Title 0"));
}

我們還可以通過部署應用程序來對其進行測試，使用：

mvn spring-boot:run

部署完成後，可以通過訪問 localhost:8080/article, 即可查看文章列表。

5. 處理默認值

在 Mustache 環境中，如果未為佔位符提供值，則會拋出 MustacheException，帶有消息 “No method or field with name ”variable-name …”.

為了避免此類錯誤，最好為所有佔位符提供一個全局默認值：

@Bean
public Mustache.Compiler mustacheCompiler(
  Mustache.TemplateLoader templateLoader, 
  Environment environment) {

    MustacheEnvironmentCollector collector
      = new MustacheEnvironmentCollector();
    collector.setEnvironment(environment);

    return Mustache.compiler()
      .defaultValue("Some Default Value")
      .withLoader(templateLoader)
      .withCollector(collector);
}

6. Mustache 與 Spring MVC

現在，我們來討論如何在不使用 Spring Boot 的情況下集成 Spring MVC。首先，讓我們添加依賴：

<dependency>
    <groupId>com.github.sps.mustache</groupId>
    <artifactId>mustache-spring-view</artifactId>
    <version>1.4</version>
</dependency>

最新版本可在此處找到：此處。

接下來，我們需要配置 MustacheViewResolver，而不是 Spring 的 InternalResourceViewResolver。

@Bean
public ViewResolver getViewResolver(ResourceLoader resourceLoader) {
    MustacheViewResolver mustacheViewResolver
      = new MustacheViewResolver();
    mustacheViewResolver.setPrefix("/WEB-INF/views/");
    mustacheViewResolver.setSuffix("..mustache");
    mustacheViewResolver.setCache(false);
    MustacheTemplateLoader mustacheTemplateLoader 
      = new MustacheTemplateLoader();
    mustacheTemplateLoader.setResourceLoader(resourceLoader);
    mustacheViewResolver.setTemplateLoader(mustacheTemplateLoader);
    return mustacheViewResolver;
}

我們只需要配置 後綴, 其中我們的模板存儲，前綴我們的模板擴展名，以及 模板加載器,它將負責加載模板。

7. 結論

在本快速教程中，我們探討了使用 Mustache 模板與 Spring Boot 結合，在 UI 中渲染元素集合，以及為變量提供默認值以避免錯誤。

最後，我們討論瞭如何將其與 Spring 集成，使用 MustacheViewResolver。