深入Spring Boot (八)：模板引擎使用詳解

深入Spring Boot (六)：使用SpringMVC框架創建Web應用》示例代碼創建的是REST web服務，Spring MVC除了可以實現REST web服務之外，還可以使用它提供動態HTML內容。Spring MVC支持多種模板技術，包括Thymeleaf、FreeMarker和JSPs。另外，許多其他的模板引擎也包括他們自己與Spring MVC的集成使用。Spring Boot支持以下模板引擎的自動配置：

FreeMarker
Groovy
Thymeleaf
Mustache

需要注意的是，雖然Spring MVC支持JSP，但是Spring Boot不建議使用JSP，因為在使用嵌入式servlet容器時，有一些使用限制。

基于Spring Boot使用這些模板技術使用方法大同小異，本篇將詳細介紹FreeMarker的使用，主要包含以下3部分內容：

FreeMarker是什么；
代碼實踐；
修改FreeMarker默認配置。

1.FreeMarker是什么

FreeMarker是一款模板引擎，它是一個Java庫，使用模板和數據生成輸出文本（HTML網頁、電子郵件、配置文件、源代碼等）。通常，我們使用如Java這樣的編程語言準備數據(如查詢數據庫、業務計算)，然后，Apache FreeMarker將使用模板顯示已準備好的數據。在模板中，你只需要關注如何呈現數據，而在模板之外，只需要關注要呈現的數據。

2.代碼實踐

使用freemarker實現查詢銀行列表，具體結果如下圖所示。

新建Gradle項目，并在build.gradle中添加web應用依賴和FreeMarker依賴，直接使用spring-boot-starter-web和spring-boot-starter-freemarker，具體代碼如下：

plugins {
id 'java'
}
group 'spring-boot'
version '1.0-SNAPSHOT'
sourceCompatibility=1.8
repositories {
jcenter()
}
dependencies {
compile("org.springframework.boot:spring-boot-starter-web:2.0.0.RELEASE")
compile("org.springframework.boot:spring-boot-starter-freemarker:2.0.0.RELEASE")
testCompile("org.springframework.boot:spring-boot-starter-test:2.0.0.RELEASE")
}

編寫應用啟動類Application.java：

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

編寫銀行實體類Bank.java：

public class Bank implements Serializable{
private Long id;
private String bankName;
private String bankCode;
//省略getter和setter
}

編寫銀行信息請求處理類BankController.java：

@Controller
@RequestMapping("/banks")
public class BankController {
@RequestMapping("/list")
public String findAll(Model model) {
//省略查詢操作
Bank icbc=Bank.newBuilder()
.withId(1L)
.withBankName("中國工商銀行")
.withBankCode("99801")
.build();
Bank cmb=Bank.newBuilder()
.withId(2L)
.withBankName("中國招商銀行")
.withBankCode("99802")
.build();
List<Bank> banks=new ArrayList<Bank>() {
{
add(icbc);
add(cmb);
}
};
model.addAttribute("banks", banks);
return "bankList";
}
}

因為需要使用模板引擎這里使用@Controller注解，而非@RestController注解。

在resources目錄下創建templates目錄，新建bankList.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>銀行列表</title>
</head>
<body>
<table id="bankListTable" border="0px">
<tr bgcolor="#F1F1F1">
<th>序號</th>
<th>名稱</th>
<th>編號</th>
</tr>
<#if banks??&&((banks?size)>0)>
<#list banks as bank>
<tr>
<td>${bank.id}</td>
<td>${bank.bankName}</td>
<td>${bank.bankCode}</td>
</tr>
</#list>
</#if>
</table>
</body>
</html>

這里使用if指令判斷服務端返回的數據是否存在，使用list指令遍歷List集合，使用${}指令取值，更多指令可以參照Freemarker語法。

在resources目錄下新建application.properties：

spring.freemarker.suffix=.html

完整的代碼目錄結構如下圖：

運行Application類的main方法即可啟動應用，使用瀏覽器訪問http://localhost:8080/banks/list驗證結果。

3.修改FreeMarker默認配置

不基于Spring Boot使用FreeMarker時，需要在應用上下文文件中配置如下bean及屬性值：

<bean id="viewResolver"
class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">
<property name="requestContextAttribute" value="ctp" />
<property name="cache" value="true" />
<property name="prefix" value="" />
<property name="suffix" value=".html" />
<property name="contentType" value="text/html;charset=UTF-8" />
</bean>

當基于Spring Boot使用FreeMarker時，上面的示例代碼只在application.properties中配置了spring.freemarker.suffix=.html，顯然Spring Boot做了一些默認配置，通過在application.properties中重新配置覆蓋了默認配置屬性值。查看源碼可以看到Spring Boot做的一些默認配置：

上圖中Spring Boot默認配置模板文件的后綴是.ftl，而在application.properties中重新配置為.html。示例代碼將bankList.html存放在了templates目錄下，這是因為Spring Boot配置的默認模板文件路徑是templates。Spring Boot默認配置的FreeMarker屬性值都可以在spring-configuration-metadata.json中查找到，這些默認值都可以在application.properties或application.yml中選擇性重新配置。

紹

FreeMarker模板引擎

Apache FreeMarker? is a template engine，一種基于模板和要改變的數據，并用來生成輸出文本(HTML網頁，電子郵件，配置文件，源代碼等)的通用工具。是一個Java類庫。

Apache FreeMarker是免費的，基于Apache許可證2.0版本發布。其模板編寫為FreeMarker Template Language（FTL），屬于簡單、專用的語言。

Freemarker模板中的數據類型：

1）布爾型：等價于Java的 Boolean 類型，不同的是不能直接輸出，可轉換為字符串輸出；

2）日期型：等價于java的Date類型，不同的是不能直接輸出，需要轉換成字符串再輸出；

3）數值型：等價于java中的 int、float、double等數值類型；

4）有三種顯示形式：數值型(默認)、貨幣型、百分比型；

5）字符型：等價于java中的字符串，有很多內置函數；

6）sequence類型：等價于java中的數組，list，set等集合類型；

7）hash類型：等價于java中的Map類型。

代碼案例

pom.xml

<!-- freemarker-->
<dependency>
    <groupId>org.freemarker</groupId>
    <artifactId>freemarker</artifactId>
    <version>2.3.30</version>
</dependency>
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.16</version>
    <scope>compile</scope>
</dependency>

案例1：

package com.what21.freemarker01.demo01;

import freemarker.template.Configuration;
import freemarker.template.Template;

import java.io.*;
import java.util.HashMap;
import java.util.Map;

public class Demo01Main {

    public static void main(String[] args) throws Exception {
        String home=Demo01Main.class.getResource("").getPath();
        System.out.println("home=" + home);
        // 配置
        Configuration configuration=new Configuration(Configuration.getVersion());
        configuration.setDirectoryForTemplateLoading(new File(home));
        configuration.setDefaultEncoding("utf-8");
        // 加載一個模版文件，創建一個模版對象
        Template template=configuration.getTemplate("demo01.ftl");
        // 數據對象
        DataModel dataModel=new DataModel();
        dataModel.setUser("用戶");
        Map<String,Object> product=new HashMap<>();
        product.put("url","https://www.toutiao.com/");
        product.put("name","——小奮斗");
        dataModel.setProduct(product);
        Writer writer=new PrintWriter(System.out);
        template.process(dataModel,writer);
    }

}

package com.what21.freemarker01.demo01;

import java.util.Map;

public class DataModel {

    private String user;

    private Map<String,Object> product;

    public String getUser() {
        return user;
    }

    public void setUser(String user) {
        this.user=user;
    }

    public Map<String, Object> getProduct() {
        return product;
    }

    public void setProduct(Map<String, Object> product) {
        this.product=product;
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>Welcome!</title>
</head>
<body>
    <h1>Welcome ${user}!</h1>
    <p>Our latest product:
        <a href="${product.url}">${product.name}</a>!
    </p>
</body>
</html>

案例2：

package com.what21.freemarker01.demo02;

import freemarker.template.Configuration;
import freemarker.template.Template;

import java.io.File;
import java.io.PrintWriter;
import java.io.Writer;

public class Demo02Main {

    public static void main(String[] args) throws Exception {
        String home=Demo02Main.class.getResource("").getPath();
        System.out.println("home=" + home);
        // 配置
        Configuration configuration=new Configuration(Configuration.getVersion());
        configuration.setDirectoryForTemplateLoading(new File(home));
        configuration.setDefaultEncoding("utf-8");
        // 加載一個模版文件，創建一個模版對象
        Template template=configuration.getTemplate("demo02.ftl");
        // 數據對象
        Student student=new Student();
        student.setId(1);
        student.setName("小奮斗");
        student.setAge(32);
        student.setAddress("山西太原");
        DataModel dataModel=new DataModel();
        dataModel.setStudent(student);
        Writer writer=new PrintWriter(System.out);
        template.process(dataModel, writer);
    }

}

package com.what21.freemarker01.demo02;

import lombok.Data;

@Data
public class DataModel {

    private Student student;

}

package com.what21.freemarker01.demo02;

import lombok.Data;

@Data
public class Student {

    private Integer id;

    private String name;

    private int age;

    private String address;

}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>學生信息</title>
    </head>
    <body>
        <h1>學生信息</h1>
        <br />
        <table>
            <tr>
                <td>id</td>
                <td>姓名</td>
                <td>年齡</td>
                <td>地址</td>
            </tr>
            <tr>
                <td>${student.id}</td>
                <td>${student.name}</td>
                <td>${student.age}</td>
                <td>${student.address}</td>
            </tr>
        </table>
    </body>
</html>

案例3：

package com.what21.freemarker01.demo03;

import freemarker.template.Configuration;
import freemarker.template.Template;

import java.io.File;
import java.io.PrintWriter;
import java.io.Writer;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

public class Demo03Main {

    public static void main(String[] args) throws Exception {
        String home=Demo03Main.class.getResource("").getPath();
        System.out.println("home=" + home);
        // 配置
        Configuration configuration=new Configuration(Configuration.getVersion());
        configuration.setDirectoryForTemplateLoading(new File(home));
        configuration.setDefaultEncoding("utf-8");
        // 加載一個模版文件，創建一個模版對象
        Template template=configuration.getTemplate("demo03.ftl");
        // 數據對象
        List<Student> studentList=new ArrayList<>();
        Student student1=new Student();
        student1.setId(1);
        student1.setName("舜");
        student1.setAge(31);
        student1.setAddress("畎畝之中");
        studentList.add(student1);
        Student student2=new Student();
        student2.setId(2);
        student2.setName("傅說");
        student2.setAge(33);
        student2.setAddress("版筑之間");
        studentList.add(student2);
        Student student3=new Student();
        student3.setId(3);
        student3.setName("膠鬲");
        student3.setAge(33);
        student3.setAddress("魚鹽之中");
        studentList.add(student3);
        Student student4=new Student();
        student4.setId(4);
        student4.setName("管夷吾");
        student4.setAge(34);
        student4.setAddress("士");
        studentList.add(student4);
        DataModel dataModel=new DataModel();
        dataModel.setDate(new Date());
        dataModel.setStudentList(studentList);
        Writer writer=new PrintWriter(System.out);
        template.process(dataModel, writer);
    }

}

package com.what21.freemarker01.demo03;

import lombok.Data;

import java.util.Date;
import java.util.List;

@Data
public class DataModel {

    private List<Student> studentList;

    private Date date;

}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>學生信息</title>
    </head>
    <body>
        <h1>學生信息</h1>
        <br />
        <#if date??>
            <h2>時間：${date?string("dd-MM-yyyy HH:mm:ss")}</h2>
        </#if>
        <table>
            <tr>
                <td>id</td>
                <td>姓名</td>
                <td>年齡</td>
                <td>地址</td>
            </tr>
            <#list studentList as student>
            <#if student_index % 2==0>
                <tr bgcolor="red">
            <#else>
                <tr bgcolor="yellow">
            </#if>
                <td>${student.id}</td>
                <td>${student.name}</td>
                <td>${student.age}</td>
                <td>${student.address}</td>
            </tr>
            </#list>
        </table>
    </body>
</html>

案例4：

package com.what21.freemarker02.demo01;

import freemarker.template.Configuration;
import freemarker.template.Template;

import java.io.File;
import java.io.PrintWriter;
import java.io.Writer;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;

public class Demo01Main {

    public static void main(String[] args) throws Exception {
        String home=Demo01Main.class.getResource("").getPath();
        System.out.println("home=" + home);
        // 配置
        Configuration configuration=new Configuration(Configuration.getVersion());
        configuration.setDirectoryForTemplateLoading(new File(home));
        configuration.setDefaultEncoding("utf-8");
        // 加載一個模版文件，創建一個模版對象
        Template template=configuration.getTemplate("demo01.ftl");
        // 數據對象
        Map<String, Object> dataModel=new HashMap<>();
        // 布爾類型
        dataModel.put("flag", true);
        // 日期類型  new Data()表示獲取現在電腦的時間
        dataModel.put("createDate", new Date());
        // 數值類型
        dataModel.put("age", 18);
        dataModel.put("salary", 10000);
        dataModel.put("avg", 0.545);
        //
        dataModel.put("msg1", "Hello ");
        dataModel.put("msg2", "freemarker");
        Writer writer=new PrintWriter(System.out);
        template.process(dataModel, writer);
    }

}

<!DOCTYPE html>
<html>
<head>
    <title>Welcome!</title>
</head>
<body>
    <table>
        <tr>
            <td>
                ${flag?c}<br>
                ${flag?string}<br>
                ${flag?string("yes","no")}<br>
            </td>
        </tr>
        <tr>
            <td>
                <#-- 輸出日期格式 -->
                ${createDate?date} <br>
                <#-- 輸出時間格式 -->
                ${createDate?time} <br>
                <#-- 輸出日期時間格式 -->
                ${createDate?datetime} <br>
                <#-- 輸出格式化日期格式 -->
                ${createDate?string("yyyy年MM月dd日 HH:mm:ss")} <br>
            </td>
        </tr>
        <tr>
            <td>
                <#-- 直接輸出數值型 -->
                ${age} <br>
                ${salary} <br>
                <#-- 將數值轉換成字符串輸出 -->
                ${salary?c} <br>
                <#-- 將數值轉換成貨幣類型的字符串輸出 -->
                ${salary?string.currency} <br>
                <#-- 將數值轉換成百分比類型的字符串輸出 -->
                ${avg?string.percent} <br>
                <#-- 將浮點型數值保留指定小數位輸出 （##表示保留兩位小數） -->
                ${avg?string["0.##"]} <br>
            </td>
        </tr>
        <tr>
            <td>
                <#-- 直接輸出 -->
                ${msg1} - ${msg2} <br>
                ${msg1?string} - ${msg2?string} <br>
                <#-- 1. 截取字符串（左閉右開） ?substring(start,end) -->
                ${msg2?substring(1,4)} <br>
                <#-- 2. 首字母小寫輸出 ?uncap_first -->
                ${msg1?uncap_first} <br>
                <#-- 3. 首字母大寫輸出 ?cap_first -->
                ${msg2?cap_first} <br>
                <#-- 4. 字母轉小寫輸出 ?lower_case -->
                ${msg1?lower_case} <br>
                <#-- 5. 字母轉大寫輸出 ?upper_case -->
                ${msg1?upper_case} <br>
                <#-- 6. 獲取字符串長度 ?length -->
                ${msg1?length} <br>
                <#-- 7. 是否以指定字符開頭（boolean類型） ?starts_with("xx")?string -->
                ${msg1?starts_with("H")?string} <br>
                <#-- 8. 是否以指定字符結尾（boolean類型） ?ends_with("xx")?string -->
                ${msg1?ends_with("h")?string} <br>
                <#-- 9. 獲取指定字符的索引 ?index_of("xxx") -->
                ${msg1?index_of("e")} <br>
                <#-- 10. 去除字符串前后空格 ?trim -->
                ${msg1?trim?length} <br>
                <#-- 11. 替換指定字符串 ?replace("xx","xxx") -->
                ${msg1?replace("o","a")}<br>
            </td>
        </tr>
        <tr>
            <td>
                <#-- 如果值不存在，直接輸出會報錯 -->
                <#--${str}-->
                <#-- 使用!，當值不存在時，默認顯示空字符串 -->
                ${str!}<br>
                <#-- 使用!"xx"，當值不存在時，默認顯示指定字符串 -->
                ${str!"這是一個默認值"}<br>
                <#-- 使用??，判斷字符串是否為空；返回布爾類型。如果想要輸出，需要將布爾類型轉換成字符串 -->
                ${(str??)?string}<br>
            </td>
        </tr>
    </table>
</body>
</html>

案例5：

rt-lemplate是新一代高性能JavaScript模板引擎，它可以將數據與HTML模板更加友好地結合起來，省去煩瑣的字符串拼接，使代碼更易于維護。

art-template模板引擎既可以在服務器端使用，也可以在瀏覽器端使用。此處僅講解art-template模板引擎在服務器端的使用。art-template模板引擎的下載和使用方法如下。

（1）模板引擎下載命令如下。

npm install artmplate

（2）使用模板引擎時應在j腳本中導入模板引擎，并編譯模板。

//導入模板
const template · require('art-template');
//編譯模板
const result=template('./views/index.html', (
  msg: 'Hello, art-template'
});

上述代碼中，rest用于存儲拼接結果;template0中的第l個參數表示模板文件的位置，第2個參數向模板中傳遞要拼接的數據，對象類型或對象屬性都可以直接在模板中使用。an-template模板引擎標準語法中引入了變量和輸出量，并支持JavaSeript表達式，使模板更易于讀寫。下面講解art-template模板引擎的標準語法。

1.變量

在“{{}}”符號中，使用set關鍵字來定義變量a和變量b.示例代碼如下。

{{set a=1}};
{{set b=2}};

2.JavaScript表達式

在“{{}}”符號中，使用set關鍵字來定義變量a和變量b，示例代碼如下。

//JavaScript表達式
{{a ? b:c}};
{{a‖b}}1:
{{la + b}};

3.條件渲染

art-template模板引擎使用{{f}}…{{/if}}或者 {{if}}…{{ else if}}…{{/if}}來實現條件的判斷，通過判斷來渲染不同結果，示例代碼如下。

// if...語法
{{if user}}
  <h2>{{user.name}}</h2>
{{/if}}
// if...else if...語法
{{if userl}}
<h1>{{user1.name}}</h1>
{{else if user2}}
<h2>{{user2.name}}</h2>
{{/if}}

上述代碼中，如果user用戶對象存在，就將其name屬性的值渲染到<h2>標簽中。同理，使用[if]]…lelse if]]…[if]語法實現多個條件判斷。如果userl用戶對象存在，就將其name屬性的值渲染到<hl>標簽中;如果user2用戶對象存在，就將其name屬性的值渲染到<h2>標簽中。

4.列表渲染

at-lemplate模板引擎中的列表渲染使用each實現對目標對象的循環遍歷，示例代碼如下。

{{each target}}
  {{$index}}{{$value}}
{{/each}}

上述代碼中，target 目標對象支持Amay數組和Objecet對象類型數據的迭代，target 目標對象使用template(模板ID，data)函數的第2個參數來傳遞，使用“$data[]”中括號的形式來訪問模板對象的屬性。$index表示當前索引值，$value表示當前索引對應的值。

在線咨詢

上一篇：騰訊地圖，矢量、衛星和路況底圖，獲取經緯度，mark
下一篇：前端網站性能優化-前端性能優化工具

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。