Spring Boot 入门 - 基础篇（6）- 页面模板 - Fish Where The Fish Are

rensanning

浏览: 3514406 次
性别:
来自: 大连

最近访客更多访客>>

blogtester

lliiqiang

film

newer_fisher

博主相关

博客

微博

相册

留言

关于我

博客专栏

: 使用Titanium Mo...
浏览量：37483

: Cordova 3.x入门...
浏览量：604351

: 常用Java开源Libra...
浏览量：678121

: 搭建 CentOS 6 服...
浏览量：87298

: Spring Boot 入...
浏览量：399823

: 基于Spring Secu...
浏览量：69078

: MQTT入门
浏览量：90494

文章分类

社区版块

存档分类

Spring Boot 入门 - 基础篇（6）- 页面模板

博客分类：

SpringBoot

Spring Boot支持很多模板引擎，但嵌入式容器JSP有限制，2010年后Velocity停止更新，所以这两个不建议使用。

（1）Thymeleaf
pom.xml

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

src/main/java/com/rensanning/springboot/PageController.java

@Controller
public class PageController {
	
    @RequestMapping("/testTH")
    public String testTH(ModelMap map) {
        map.addAttribute("msg", "Hello, rensanning! @Thymeleaf");
        return "test_th";  
    }
    
}

src/main/resources/templates/test_th.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8"/>
  <title>Thymeleaf Sample</title>
 </head>
 <body>
  <h1 th:text="${msg}"></h1>
 </body>
</html>

引用

2017-02-09 14:59:16.586 INFO 6596 --- [ main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/testTH]}" onto public java.lang.String
com.rensanning.springboot.PageController.testTH(org.springframework.ui.ModelMap)

访问 http://localhost:8080/testTH

Thymeleaf的默认设置
application.properties

引用

spring.thymeleaf.prefix=classpath:/templates/ # Prefix that gets prepended to view names when building a URL.
spring.thymeleaf.suffix=.html # Suffix that gets appended to view names when building a URL.
spring.thymeleaf.mode=HTML5 # Template mode to be applied to templates. See also StandardTemplateModeHandlers.
spring.thymeleaf.encoding=UTF-8 # Template encoding.
spring.thymeleaf.content-type=text/html # Content-Type value.

LEGACYHTML5
spring.thymeleaf.mode=LEGACYHTML5
模板将不会按xhtml输出，html错误将被忽略。比如<br>、<link rel="" href="">、<meta charset="UTF-8">等这些没有闭合的标签，以默认mode是无法访问的。不过需要依赖nekohtml：

<dependency>
  <groupId>net.sourceforge.nekohtml</groupId>
  <artifactId>nekohtml</artifactId>
  <version>1.9.15</version>
</dependency>

Thymeleaf以标签的属性形式出现，以下是常用的属性：

引用

1)th:text 标签内显示数据 <p th:text="${text}">test</p>
2)th:href 链接的URL <link th:href="@{bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
3)th:if、th:unless 简单判断 <p th:if="${errorMsg} != null">error</p>
4)th:each 循环输出 *注意不是<tbody>而是<tr>循环输出
<tbody th:each="list : ${beans}">
    <tr>...</tr>
</tbody>
5)th:switch、th:case 分支判断
<td th:switch="${num}">
    <p th:case="0">ZERO</p>
    <p th:case="1">ONE</p>
    <p th:case="*">NUM</p>
</td>
6）数据访问模式：链接（@{...}）、变量（${...}）、国际化文字（#{...}）、选择表达式（*{...}）

模板重用
src/main/resources/templates/base.html

<!DOCTYPE html>
<html xmlns           ="http://www.w3.org/1999/xhtml"
      xmlns:th        ="http://www.thymeleaf.org"
      xmlns:layout    ="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
    <meta http-equiv="Content-Type"    content="text/html; charset=UTF-8">
    <title>thymeleaf base</title>
</head>
<body>
    <!-- header -->
    <header>
        <div align="center" >header</div>
        <hr />
    </header>

    <!-- contents -->
    <div layout:fragment="content">Contents is here!</div>

    <!-- footer -->
    <footer>
        <hr />
        <div align="center">footer</div>
    </footer>
</body>
</html>

src/main/resources/templates/contents.html

<!DOCTYPE html>
<html xmlns           ="http://www.w3.org/1999/xhtml"
      xmlns:th        ="http://www.thymeleaf.org"
      xmlns:layout    ="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="base">
<head>
    <title>Contents</title>
</head>
<body>
    <div layout:fragment="content">
        <table class="table">
            <thead class="sunflower">
                <tr>
                    <td>ID</td>
                    <td>NAME</td>
                </tr>
            </thead>
            <tbody th:each="list : ${beans}">
                <tr>
                    <td class="text-str" th:text="${list.id}"></td>
                    <td class="text-str" th:text="${list.name}"></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

（2）FreeMarker

pom.xml

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

src/main/java/com/rensanning/springboot/PageController.java

@Controller
public class PageController {
	
    @RequestMapping("/testFM")
    public String testFM(ModelMap map) {
        map.addAttribute("msg", "Hello, rensanning! @FreeMarker");
        return "test_fm";  
    }
    
}

src/main/resources/templates/test_fm.ftl

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8"/>
  <title>FreeMarker Sample</title>
 </head>
 <body>
  <h1>${msg}</h1>
 </body>
</html>

引用

2017-02-09 14:59:16.585 INFO 6596 --- [ main] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped "{[/testFM]}" onto public java.lang.String
com.rensanning.springboot.PageController.testFM(org.springframework.ui.ModelMap)

访问 http://localhost:8080/testFM