Die Anleitung zu Spring Boot und Mustache

Was ist Mustache?
Einige Beispiele über Mustache
Das Projekt Spring Boot erstellen
Model, DAO
Controller, Mustache Template
Die Applikation laufen

1. Was ist Mustache?

Mustache ist ein System Web Template , das mit der Daten vom Layer Model zur Bildung der File HTML verbindet. Es wird durch viele Sprache wie Java, ActionScript, C++, Clojure, CoffeeScript, ColdFusion, PHP, .... unterstützt

Mustache wird wie ein unlogisches System (logic-less), denn es hat kein Statement zur Kontrolle des Programmsflow klar. Beispielweise hat es keine Statement if/else (if/else statement), und keine Schleife. Aber es benutzt stattdessendie Ausdrücke lambda und mustache tags.

Angenommen, "employees" ist eine Liste. In diesem Zusammenhang wird das Tagpaar öffnen & schließen: {{#employees}} & {{/employees}} äquivalent mit eine Schleiße auf die Liste "employees".

Der Grund, warum es "Mustache" genannt wird, liegt darin, dass die Syntax vom Mustache oft die geschweiften Klammer { } wie Schnurrbart benutzt.

2. Einige Beispiele über Mustache

Sie können einige Probleme und die Verwirrungen mit Mustache zum ersten Mal treffen. Das sind die Beispielen unten, die die Ungewöhnlichkeiten des System zeigt

if/else?

Mustache hat einfach kein Statement if/else, So müssen Sie logic für es erstellen

Java Code:

boolean kiss = true;

boolean hug = true;

boolean slap = false;

Mustache Template:

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

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


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

Das Ergebnis

Kiss ...
Hug ...

In Mustache ist {{.}} ein besonders Tag. Sehen Sie ein Beispiel:

Wenn Sie die Daten wie folgend haben

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

String string =  "Wheee!";

Mustache Template:

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

-----

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

Das erhaltende Ergebnis

* 1
* 2
* 3
* 4
* 5

----

Wheee!

3. Das Projekt Spring Boot erstellen

Auf Eclipse erstellen Sie ein Projekt Spring Boot:

Um Mustache für View Layer zu benutzen, sollen Sie die Abhängigkeite spring-boot-starter-mustache in die File pom.xml deklarieren:

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

Die volle Inhalt der File 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";
    }

}

Erstellen Sie die File employee.mustache im Verzeichnis resources/templates vom Projekt

Achtung: wenn Sie Spring Boot < 2.x benutzen, müssen die File Mustache Template das Ende von html haben. So brauchen Sie die File employee.html erstellen.

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 konfiguriert automatisch Mustache mit der folgenden Default Attributes:

application.properties (Default by Spring Boot)

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

Die Zeichnung bezeichnet das Flow der Applikation und die Beziehungen zwischen Controller und Mustache View:

6. Die Applikation laufen

Klicken Sie die Rechtmaustaste aufs Projekt und wählen:

Run As/Spring Boot App

Danach greifen Sie in die Addresse zu

http://localhost:8080