{% raw %} # Spring Boot Moustache 教程 > [http://zetcode.com/articles/springbootmustache/](http://zetcode.com/articles/springbootmustache/) 在 Spring Boot Mustache 教程中，我們將使用 Mustache 模板引擎和 HSQLDB 數據庫創建一個簡單的 Spring Boot Web 應用。 Spring 是流行的 Java 應用框架。 Spring Boot 致力于創建獨立的，基于生產級別的基于 Spring 的應用，而無任何麻煩。 HSQLDB 是完全用 Java 創建的開源關系數據庫管理系統。 它提供了一個小型，快速的多線程事務型數據庫引擎，具有基于內存和基于磁盤的表，并支持嵌入式和服務器模式。 它包括一個功能強大的命令行 SQL 工具和簡單的 GUI 查詢工具。 ## Moustache Moustache 是一個簡單的 Web 模板系統。 它可用于許多編程語言，包括 Java。 由于沒有任何顯式的控制流語句（例如`if`和`else`條件語句或`for`循環），因此，Mustache 被描述為無邏輯的。 可以使用節標記處理列表和 lambda 來實現循環和條件評估。 ## Spring Boot Moustache 示例 以下示例是使用 Mustache 模板引擎的 Spring Boot Web 應用。 應用的數據位于 HSQLDB 數據庫中。 ```java $ tree . ├── pom.xml └── src ├── main │ ├── java │ │ └── com │ │ └── zetcode │ │ ├── Application.java │ │ ├── bean │ │ │ └── Car.java │ │ ├── controller │ │ │ └── MyController.java │ │ └── service │ │ ├── CarService.java │ │ └── ICarService.java │ └── resources │ ├── application.yml │ ├── data-hsqldb.sql │ ├── schema-hsqldb.sql │ ├── static │ │ └── css │ │ └── style.css │ └── templates │ ├── index.html │ └── showCars.html └── test └── java ``` 這是項目結構。 模板文件的后綴為`.html`。 它們默認位于`src/main/resources/template`目錄中。 當在 Maven POM 文件中找到依賴項時，Spring Boot 會自動配置 Mustache。 `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>SpringBootMustache</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> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.3.RELEASE</version> </parent> <dependencies> <dependency> <groupId>org.hsqldb</groupId> <artifactId>hsqldb</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-mustache</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jdbc</artifactId> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project> ``` 這是 Maven 構建文件。 `spring-boot-devtools`啟用熱插拔，禁用模板緩存并啟用實時重新加載。 `spring-boot-starter-mustache`是用于使用 Mustache 構建 Spring MVC 應用的入門程序。 `hsqldb`是 HSQLDB 的驅動程序。 `spring-boot-starter-jdbc`是在 Spring Boot 中使用 JDBC 的入門工具。 `Car.java` ```java package com.zetcode.bean; public class Car { private Long id; private String name; private int price; public Car() {} public Car(Long id, String name, int price) { this.id = id; this.name = name; this.price = price; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public int getPrice() { return price; } public void setPrice(int price) { this.price = price; } @Override public String toString() { return "Car{" + "id=" + id + ", name=" + name + ", price=" + price + '}'; } } ``` 這是`Car` bean 類。 它包含汽車 ID，名稱和價格字段。 `application.yml` ```java server: context-path: /myapp spring: main: banner-mode: "off" datasource: platform: hsqldb logging: level: org: springframework: ERROR ``` `application.yml`是主要的 Spring Boot 配置文件。 `context-path`定義 Web 應用的名稱。 我們通過`localhost:8080/myapp/` URL 訪問我們的應用。 使用`banner-mode`屬性，我們可以關閉 Spring 橫幅。 該平臺值用于 SQL 初始化腳本：`schema-${platform}.sql`和`data-${platform}.sql`中。 另外，我們將 spring 框架的日志記錄級別設置為`ERROR`。 注意，我們沒有配置數據源。 如果沒有配置數據，Spring 會以內存模式自動配置 HSQLDB。 我們希望有一個內存數據庫，因此我們讓 Spring 進行自動配置。 `schema-hsqldb.sql` ```java CREATE TABLE CARS(ID BIGINT IDENTITY PRIMARY KEY, NAME VARCHAR(30), PRICE INT); ``` 該 SQL 腳本創建`CARS`表。 HSQLDB 使用`IDENTITY`子句創建自動增加的列。 默認情況下，id 從零開始。 `data-hsqldb.sql` ```java INSERT INTO CARS(NAME, PRICE) VALUES('Audi', 52642); INSERT INTO CARS(NAME, PRICE) VALUES('Mercedes', 57127); INSERT INTO CARS(NAME, PRICE) VALUES('Skoda', 9000); INSERT INTO CARS(NAME, PRICE) VALUES('Volvo', 29000); INSERT INTO CARS(NAME, PRICE) VALUES('Bentley', 350000); INSERT INTO CARS(NAME, PRICE) VALUES('Citroen', 21000); INSERT INTO CARS(NAME, PRICE) VALUES('Hummer', 41400); INSERT INTO CARS(NAME, PRICE) VALUES('Volkswagen', 21600); ``` 該腳本用數據填充表。 這兩個腳本都位于類路徑的根目錄中。 `ICarService.java` ```java package com.zetcode.service; import com.zetcode.bean.Car; import java.util.List; public interface ICarService { public List<Car> findAll(); } ``` `ICarService`提供了一種從數據源獲取所有城市的契約方法。 `CarService.java` ```java package com.zetcode.service; import com.zetcode.bean.Car; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.jdbc.core.BeanPropertyRowMapper; import org.springframework.jdbc.core.JdbcTemplate; import org.springframework.stereotype.Service; @Service public class CarService implements ICarService { @Autowired private JdbcTemplate jtm; @Override public List<Car> findAll() { String sql = "SELECT * FROM CARS"; List<Car> cars = jtm.query(sql, new BeanPropertyRowMapper(Car.class)); return cars; } } ``` `CarService`包含`findAll()`方法的實現。 我們借助`JdbcTemplate`從`CARS`表中檢索所有汽車。 ```java @Autowired private JdbcTemplate jtm; ``` 注入`JdbcTemplate`。 ```java String sql = "SELECT * FROM CARS"; ``` 這是要執行的 SQL。 我們從`CARS`表中選擇所有汽車。 ```java List<Car> cars = jtm.query(sql, new BeanPropertyRowMapper(Car.class)); ``` `BeanPropertyRowMapper`將一行轉換為指定映射目標類的新實例。 `MyController.java` ```java package com.zetcode.controller; import com.zetcode.bean.Car; import com.zetcode.service.ICarService; import java.util.HashMap; import java.util.List; import java.util.Map; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.servlet.ModelAndView; @Controller public class MyController { @Autowired private ICarService carService; @RequestMapping("/") public String index(Model model) { return "index"; } @RequestMapping("/showCars") public ModelAndView showCars() { List<Car> cars = carService.findAll(); Map<String, Object> params = new HashMap<>(); params.put("cars", cars); return new ModelAndView("showCars", params); } } ``` 這是 Spring Boot Web 應用的控制器類。 控制器被飾以`@Controller`注解。 控制器具有兩個映射：一個用于主頁的映射，一個用于列出所有汽車的映射。 當 Spring Boot 在 Maven POM 文件中檢測到 Mustache 啟動程序時，它會自動配置 Mustache 視圖。 ```java @Autowired private ICarService carService; ``` 我們將`ICarService`注入到帶有`@Autowired`注解的字段中。 ```java @RequestMapping("/") public String index(Model model) { return "index"; } ``` `"index"`是位于預定義`template`目錄中的視圖的名稱。 ```java @RequestMapping("/showCars") public ModelAndView showCars() { List<Car> cars = carService.findAll(); Map<String, Object> params = new HashMap<>(); params.put("cars", cars); return new ModelAndView("showCars", params); } ``` 該控制器方法可提供汽車清單。 我們從汽車服務中找到所有汽車對象，并將結果列表放入參數中。 Spring 將找到名為`showCars`的 Mustache 視圖，并讓引擎將模板與數據結合在一起。 `style.css` ```java h2 {color: blue} td:nth-child(3) { text-align: right; } ``` `style.css`是位于`src/main/resources/static/css`目錄中的靜態文件。 它將`h2`標簽設置為藍色，并右對齊第三列的數據。 `index.html` ```java <!DOCTYPE html> <html> <head> <title>Home page</title> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <a href="showCars">Show cars</a> </body> </html> ``` `index.html`模板文件是應用的主頁。 它包含一個檢索所有汽車對象的鏈接。 `showCars.html` ```java <!DOCTYPE html> <html> <head> <title>Cars</title> <link rel="stylesheet" href="css/style.css" /> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <h2>List of cars</h2> <table> <tr> <th>Id</th> <th>Name</th> <th>Price</th> </tr> {{#cars}} <tr> <td>{{id}}</td> <td>{{name}}</td> <td>{{price}}</td> </tr> {{/cars}} </table> </body> </html> ``` `showCars.html`是 Moustache 模板文件，其中包含要用來自模型的數據填充的占位符。 小 Moustache 使用`{{}}`語法。 ```java <link rel="stylesheet" href="css/style.css" /> ``` 我們包括靜態 CSS 文件。 ```java {{#cars}} <tr> <td>{{id}}</td> <td>{{name}}</td> <td>{{price}}</td> </tr> {{/cars}} ``` `{{#cars}}`語法稱為段。 部分根據當前上下文中鍵的值，將文本塊渲染一次或多次。 一節以`{{#name}}`開頭，以`{{/name}}`結束。 如果該值是非空列表，則該部分將顯示多次。 在每種情況下，該節的上下文都將設置為列表中的元素。 `Application.java` ```java package com.zetcode; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class Application { public static void main(String[] args) { SpringApplication.run(Application.class, args); } } ``` 我們設置了 Spring Boot 應用。 `@SpringBootApplication`注解啟用自動配置和組件掃描。  圖：列出汽車 該應用部署在內置的 Tomcat 服務器上，該服務器監聽端口 8080。 在本教程中，我們使用 Mustache 和 HSQLDB 創建了一個 Spring Boot Web 應用。 您可能也對相關教程感興趣： [Spring Boot Thymeleaf 配置](/articles/springbootthymeleafconf/)， [Spring Boot FreeMarker 教程](/springboot/freemarker/)， [Spring Boot Thymeleaf 教程](/articles/springbootthymeleaf/)， [Spring Boot Swing 集成教程](/articles/springbootswing/)， [Spring Web 應用簡介](/articles/springwebfirst/)，[獨立的 Spring 應用](/articles/standalonespring/)， [FreeMarker 教程](/java/freemarker/)， [Java 教程](/lang/java/)，[游戲簡介](/java/play/)或[ Strips 簡介](/java/stripes/)。 {% endraw %}