Le Tutoriel de Spring Boot et Mustache

Qu'est-ce que Mustache ?
Quelques exemples de Mustache
Créer un projet Spring Boot
Model, DAO
Controller, Mustache Template
Exécuter l'application

1. Qu'est-ce que Mustache ?

Mustache est un système Web Template (modèle web), qui est utilisé en combinaison avec les données de la couche Model afin de créer des fichiers HTML. Il est soutenu par plusieurs langues telles que Java, ActionScript, C++, Clojure, CoffeeScript, ColdFusion, PHP, ....

Moustache est décrit comme un système sans logique (logic-less), car il n'a pas d'instruction contrôlant clairement le flux du programme, par exemple, il n'a pas d'instruction if / else (if/else statement) et d'instruction loop, il utilise plutôt l'expression lambda et les moustache tags (des étiquettes moustache).

Supposons que "employees" est une liste. Dans ce contexte, ouvrir et fermer des paires de étiquettes : {{#employees}} & {{/employees}} équivaudra à une boucle dans la liste "employees".

La raison pour laquelle il est baptisé comme "Mustache" parceque la syntaxe de Mustache utilise généralement des accolades { }, comme une paire de moustaches.

2. Quelques exemples de Mustache

Vous rencontrerez probablement des problèmes et de la confusion avec le Moustache pour la première utilisation. Voici quelques exemples qui vous montrent la bizarrerie de ce système.

if/else?

Moustache n'a pas simplement une instruction de condition if / else, par conséquent, vous devez créer une logic pour cela.

Java Code:

boolean kiss = true;

boolean hug = true;

boolean slap = false;

Mustache Template:

{{#kiss}}
  Kiss ...
{{/kiss}}

{{#hug}}
  Hug ...
{{/hug}}


{{#slap}}
  Hic Hic ...
{{/slap}}

Les résultats :

Kiss ...
Hug ...

Dans Mustache, {{.}} est une étiquette (tag) particulière. Observez un exemple :

Si vous avez les données comme ci-dessous :

int[] numbers = new int[] {1, 2, 3, 4, 5};

String string =  "Wheee!";

Mustache Template:

{{# numbers }}
* {{ . }}
{{/ numbers }}

-----

{{# string }}
   {{ . }}
{{/ string }}

Les résultats obtenus :

* 1
* 2
* 3
* 4
* 5

----

Wheee!

3. Créer un projet Spring Boot

Dans Eclipse, créez un projet Spring Boot :

Pour pouvoir utiliser Mustache pour la couche View, vous devez déclarer la dépendance spring-boot-starter-mustache dán le fichier pom.xml:

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

Le contenu complet du fichier pom.xml :

pom.xml

<?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>org.o7planning</groupId>
    <artifactId>SpringBootMustache</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>SpringBootMustache</name>
    <description>Spring Boot + Groovy</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.0.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

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

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

SpringBootMustacheApplication.java

package org.o7planning.sbmustache;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringBootMustacheApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBootMustacheApplication.class, args);
    }
    
}

4. Model, DAO

Employee.java

package org.o7planning.sbmustache.model;

import java.util.Date;

public class Employee {

    private Long empId;
    private String empNo;
    private String empName;
    private Date hireDate;

    public Employee() {

    }

    public Employee(Long empId, String empNo,
            String empName, Date hireDate) {
        this.empId = empId;
        this.empNo = empNo;
        this.empName = empName;
        this.hireDate = hireDate;
    }

    public Long getEmpId() {
        return empId;
    }

    public void setEmpId(Long empId) {
        this.empId = empId;
    }

    public String getEmpNo() {
        return empNo;
    }

    public void setEmpNo(String empNo) {
        this.empNo = empNo;
    }

    public String getEmpName() {
        return empName;
    }

    public void setEmpName(String empName) {
        this.empName = empName;
    }

    public Date getHireDate() {
        return hireDate;
    }

    public void setHireDate(Date hireDate) {
        this.hireDate = hireDate;
    }
    
}

EmployeeDAO.java

package org.o7planning.sbmustache.dao;

import java.sql.Date;
import java.time.LocalDate;
import java.util.ArrayList;
import java.util.List;

import org.o7planning.sbmustache.model.Employee;
import org.springframework.stereotype.Repository;

@Repository
public class EmployeeDAO {

    public List<Employee> getEmployees()  {
        
        Date hireDate1= Date.valueOf(LocalDate.parse("2000-12-11"));
        Employee e1= new Employee(1L, "E01", "Tom", hireDate1);
        
        Date hireDate2= Date.valueOf(LocalDate.parse("2001-12-21"));
        Employee e2= new Employee(2L, "E02", "Jerry", hireDate2);
        
        List<Employee> list= new ArrayList<Employee>();
        list.add(e1);
        list.add(e2);
        return list;        
    }    
    
}

5. Controller, Mustache Template

MainController.java

package org.o7planning.sbmustache.controller;

import java.util.List;

import org.o7planning.sbmustache.dao.EmployeeDAO;
import org.o7planning.sbmustache.model.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MainController {

    @Autowired
    private EmployeeDAO employeeDAO;

    
    @RequestMapping("/")
    public String handleRequest(Model model) {

        List<Employee> employees = employeeDAO.getEmployees();
        model.addAttribute("employees", employees);
        return "employee";
    }

}

Créez un fichier employee.mustache sis dans le dossier resources/templates du projet.

Remarque : Si vous utilisez Spring Boot < 2.x des fichiers Mustache Template doivent la terminaison de html, sonc vous devez créer un fichier employee.html.

employee.mustache

<html>
<head>
<title>Spring Boot Mustache</title>
<style>
table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid #999;
    padding: 5px;
}
</style>
</head>
<body>
    <h2>Employees</h2>
    <table>
        <tr>
            <th>Emp Id</th>
            <th>Emp No</th>
            <th>Emp Name</th>
            <th>Hire Date</th>
        </tr>

        {{#employees}}
        <tr>
            <td>{{empId}}</td>
            <td>{{empNo}}</td>
            <td>{{empName}}</td>
            <td>{{hireDate}}</td>
        </tr>
        {{/employees}}

    </table>
</body>
</html>

Spring Boot 2.x configure automatiquement Mustache avec les propriétés par défaut :

application.properties (Default by Spring Boot)

spring.mustache.prefix=classpath:/templates/
spring.mustache.suffix=.mustache

Le dessin décrit le flux de l'application et la relation entre le Controller et Mustache View:

6. Exécuter l'application

Cliquez sur le bouton droit du projet, sélectionnez :

Run As/Spring Boot App

Et accédez à l'adresse :

http://localhost:8080