深入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小时内与您取得联系。