JSP&Thymeleaf模板引擎使用

Spring Boot 推荐使用 Thymeleaf 来代替 Jsp.

使用 JSP 开发

如果还是想使用 jsp, 我们还需要修改 SpringMVC 的视图解析器(ViewResolver)。
SpringMVC 的视图解析器的作用主要是定位视图，也就是当控制器只是返回一个逻辑名称的时候，是没有办法直接对应找到视图的，这就需要视图解析器进行解析了。
在实际的开发中最常用的视图之一就是 JSP，例如，现在控制器中返回一个字符串“index”，那么我们希望它对应的是开发项目的/WEB-INF/jsp/index.jsp 文件。

如何通过 SpringBoot 完成这个功能。首先我们需要在 Maven 的 pom.xml 中加入 JSP 和 JSTL 的依赖包

<!-- 用于支持jsp 如果是在外部的tomcat中运行，需要将scope设置为provide，防止jar包冲突。 -->
<dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<!-- 用于支持el表达式 -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
    <scope>provided</scope>
</dependency>

创建 webapp 目录

需要手动在 main 目录下创建一个 webapp 的目录，结构如下：

|
+ src
  |
  +  main
      |
      +  java
      |
      +  resources
      |
      +  webapp
           |
           +  WEB-INF
                |
              	+  jsp

为了配置视图解析器(ViewResolver)，将 application.properties 文件修改, 定义视图前后缀

server.port=8090
spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

spring:
  mvc:
    view:
      prefix: /WEB-INF/jsp/
      suffix: .jsp

这里的 spring.mvc.view.prefix 和 spring.mvc.view.suffix 是 SpringBoot 与我们约定的视图前缀和后缀配置，意思是找到文件夹/WEB-INF/jsp/下以.jsp 为后缀的 JSP 文件，那么前缀和后缀之间显然又缺了一个文件名称，在 SpringMVC 机制中，这个名称则是由控制器(Controller)给出的，为此新建一个控制器 Indexcontroller:
1
2
3
4
5
6
7
@Controller
public class Indexcontroller {
@RequestMapping("/index")
private String index() {
return "index";
}
}

这里定义了一个映射为/index 的路径，然后方法返回了“index”，这样它就与之前配置的前缀和后缀结合起来找对应的 jsp 文件，为此我们还需要开发一个对应的 jsp 文件，为此我们先再建一个 src/main/webapp/WEB-INF/jsp/index.jsp 文件。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <table border="1">
            <c:forEach var="article" items="${list}">
                <tr>
                    <td>${article.id}</td>
                    <td>${article.title}</td>
                    <td>${article.summary}</td>
                    <td>${article.createTime}</td>
                </tr>
            </c:forEach>
        </table>
    </body>
</html>

编写启动类
- 这里的注解@SpringBootApplication 标志着这是一个 SpringBoot 入门文件。以 StartApplication 类作为配置类来运行 SpringBoot 项目
- SpringBoot 就会根据你在 Maven 加载的依赖来完成运行了。接下来我们以 JavaApplication 的形式运行类 StartApplication, 就可以看到 Tomcat 的运行日志。
1
2
3
4
5
6
@SpringBootApplication
public class StartApplication {
public static void main(String[] args) {
SpringApplication.run(StartApplication.class,args);
}
}
由于己经把端口修改为了 8090, 因此打开浏览器后输入 http://localhost:8090/index，就可访问 index 页面。

Thymeleaf 介绍

简单说，Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。相较与其他的模板引擎，它有如下三个极吸引人的特点：

Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。这是由于它支持 html 原型，然后在 html 标签里增加额外的属性来达到模板+数据的展示方式。浏览器解释 html 时会忽略未定义的标签属性，所以 Thymeleaf 的模板可以静态地运行；当有数据返回到页面时，Thymeleaf 标签会动态地替换掉静态内容，使页面动态显示。
Thymeleaf 开箱即用的特性。它提供标准和 Spring 标准两种方言，可以直接套用模板实现 JSTL、 OGNL 表达式效果，避免每天套模板、改 Jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
Thymeleaf 提供 Spring 标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。

标准表达式语法

它们分为四类：
1. 变量表达式
2. 选择或星号表达式
3. 文字国际化表达式
4. URL 表达式

变量表达式

变量表达式即 OGNL 表达式或 Spring EL 表达式(在 Spring 术语中也叫 model attributes)。如 ${session.user.name}

获取对象的属性、调用方法

它们将以 HTML 标签的一个属性来表示

1
2
3

<span th:text="${book.author.name}">
  <li th:each="book : ${books}"></li
></span>

使用内置的基本对象

#ctx : the context object. #vars: the context variables. #locale : the context
locale. #request : (only in Web Contexts) the HttpServletRequest object.
#response : (only in Web Contexts) the HttpServletResponse object. #session :
(only in Web Contexts) the HttpSession object. #servletContext : (only in Web
Contexts) the ServletContext object.

内置的一些工具对象

#execInfo : information about the template being processed. #uris : methods for
escaping parts of URLs/URIs #conversions : methods for executing the configured
conversion service (if any). #dates : methods for java.util.Date objects:
formatting, component extraction, etc. #calendars : analogous to #dates , but
for java.util.Calendar objects. #numbers : methods for formatting numeric
objects. #strings : methods for String objects: contains, startsWith,
prepending/appending, etc. #objects : methods for objects in general. #bools :
methods for boolean evaluation. #arrays : methods for arrays. #lists : methods
for lists. #sets : methods for sets. #maps : methods for maps. #aggregates :
methods for creating aggregates on arrays or collections.

选择(星号)表达式

选择表达式很像变量表达式，不过它们用一个预先选择的对象来代替上下文变量容器(map)来执行，如：*{customer.name}

被指定的 object 由 th: object 属性定义：

<div th:object="${book}">
  ...
  <span th:text="*{title}">...</span>
  ...
</div>

文字国际化表达式

文字国际化表达式允许我们从一个外部文件获取区域文字信息(.properties)，用 Key 索引 Value，还可以提供一组参数(可选).
1
2
#{main.title}
#{message.entrycreated(${entryId})}

可以在模板文件中找到这样的表达式代码：

<table>
  ...
  <th th:text="#{header.address.city}">...</th>
  <th th:text="#{header.address.country}">...</th>
  ...
</table>

URL 表达式

URL 表达式指的是把一个有用的上下文或回话信息添加到 URL，如: @{/order/list}，这个过程经常被叫做 URL 重写。
URL 还可以设置参数：@{/order/details(id=${orderId})}
相对路径：@{../documents/report}

让我们看这些表达式：

1
2
3

<form th:action="@{/createOrder}">
  <a href="main.html" th:href="@{/main}"></a>
</form>

变量和星号区别

如果不考虑上下文的情况下，两者没有区别；星号语法评估在选定对象上表达，而不是整个上下文

什么是选定对象？就是父标签的值，如下：

<div th:object="${session.user}">
  <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
  <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
  <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>

这是完全等价于：

<div th:object="${session.user}">
  <p>Name: <span th:text="${session.user.firstName}">Sebastian</span>.</p>
  <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
  <p>
    Nationality: <span th:text="${session.user.nationality}">Saturn</span>.
  </p>
</div>

当然，美元符号和星号语法可以混合使用：

<div th:object="${session.user}">
  <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
  <p>Surname: <span th:text="${session.user.lastName}">Pepper</span>.</p>
  <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>

表达式支持的语法

字面（Literals）

文本文字（Text literals）: 'one text', 'Another one!',…
数字文本（Number literals）: 0, 34, 3.0, 12.3,…
布尔文本（Boolean literals）: true, false
空（Null literal）: null
文字标记（Literal tokens）: one, sometext, main,…

文本操作（Text operations）

字符串连接(String concatenation): +
文本替换（Literal substitutions）: |The name is ${name}|

算术运算（Arithmetic operations）

二元运算符（Binary operators）: +, -, *, /, %
减号（单目运算符）Minus sign (unary operator): -

布尔操作（Boolean operations）

二元运算符（Binary operators）: and, or
布尔否定（一元运算符）Boolean negation (unary operator): !, not

比较和等价(Comparisons and equality)

比较（Comparators）: >, <, >=, <= (gt, lt, ge, le)
等值运算符（Equality operators）: ==, != (eq, ne)

条件运算符（Conditional operators）

If-then: (if) ? (then)
If-then-else: (if) ? (then) : (else)
Default: (value) ?: (defaultvalue)

所有这些特征可以被组合并嵌套：

1	'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown'))

常用 th 标签都有那些？

关键字	功能介绍	案例
th: id	替换 id	`<input th:id="'xxx' + ${collect.id}"/>`
th: text	文本替换	`<p th:text="${collect.description}">description</p>`
th: utext	支持 html 的文本替换	`<p th:utext="${htmlcontent}">conten</p>`
th: object	替换对象	`<div th:object="${session.user}">`
th: value	属性赋值	`<input th:value="${user.name}" />`
th: with	变量赋值运算	`<div th:with="isEven=${prodStat.count}%2==0"></div>`
th: style	设置样式	`<th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"`
th: onclick	点击事件	`<th:onclick="'getCollect()'"`
th: each	属性赋值	`<tr th:each="user,userStat:${users}">`
th: if	判断条件	`<a th:if="${userId == collect.userId}" >`
th: unless	和 th: if 判断相反	`<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>`
th: href	链接地址	`<a th:href="@{/login}" th:unless=${session.user != null}>Login</a> />`
th: switch	多路选择配合 th: case 使用	`<div th:switch="${user.role}">`
th: case	th: switch 的一个分支	`<p th:case="'admin'">User is an administrator</p>`
th: fragment	布局标签，定义一个代码片段，方便其它地方引用	`<div th:fragment="alert">`
th: include	布局标签，替换内容到引入的文件	`<head th:include="layout :: htmlhead" th:with="title='xx'"></head> />`
th: replace	布局标签，替换整个标签到引入的文件	`<div th:replace="fragments/header :: title"></div>`
th: selected	selected 选择框选中	`th:selected="(${xxx.id} == ${configObj.dd})"`
th: src	图片类地址引入	`<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />`
th: inline	定义 js 脚本可以使用变量	`<script type="text/javascript" th:inline="javascript">`
th: action	表单提交的地址	`<form action="subscribe.html" th:action="@{/subscribe}">`
th: remove	删除某个属性	`<tr th:remove="all">` 1.all: 删除包含标签和所有的孩子。2.body: 不包含标记删除, 但删除其所有的孩子。3.tag: 包含标记的删除, 但不删除它的孩子。4.all-but-first: 删除所有包含标签的孩子, 除了第一个。5.none: 什么也不做。这个值是有用的动态评估。
th: attr	设置标签属性，多个属性可以用逗号分隔	比如 `th:attr="src=@{/image/aa.jpg},title=#{logo}"`，此标签不太优雅，一般用的比较少。

还有非常多的标签，这里只列出最常用的几个
由于一个标签内可以包含多个 th: x 属性，其生效的优先级顺序为:
- include,each,if/unless/switch/case,with,attr/attrprepend/attrappend,value/href,src ,etc,text/utext,fragment,remove。

几种常用的使用方法

赋值、字符串拼接

1 2	<p th:text="${collect.description}">description</p> <span th:text="'Welcome to our application, ' + ${user.name} + '!'"></span>

字符串拼接还有另外一种简洁的写法

1	<span th:text="\|Welcome to our application, ${user.name}!\|"></span>

条件判断 If/Unless

Thymeleaf 中使用 th: if 和 th: unless 属性进行条件判断，下面的例子中，``标签只有在th: if中条件成立时才显示：

1 2	<a th:if="${myself=='yes'}" > </i> </a> <a th:unless=${session.user != null} th:href="@{/login}" >Login</a>

th:unless 于 th:if 恰好相反，只有表达式中的条件不成立，才会显示其内容。

也可以使用 (if) ? (then) : (else) 这种语法来判断显示的内容

for 循环

<tr th:each="collect,iterStat : ${collects}">
  <th scope="row" th:text="${collect.id}">1</th>
  <td>
    <img th:src="${collect.webLogo}" />
  </td>
  <td th:text="${collect.url}">Mark</td>
  <td th:text="${collect.title}">Otto</td>
  <td th:text="${collect.description}">@mdo</td>
  <td th:text="${terStat.index}">index</td>
</tr>

iterStat 称作状态变量，属性有：

index: 当前迭代对象的 index（从 0 开始计算）
count: 当前迭代对象的 index(从 1 开始计算)
size: 被迭代对象的大小
current: 当前迭代变量
even/odd: 布尔值，当前循环是否是偶数/奇数（从 0 开始计算）
first: 布尔值，当前循环是否是第一个
last: 布尔值，当前循环是否是最后一个

URL

URL 在 Web 应用模板中占据着十分重要的地位，需要特别注意的是 Thymeleaf 对于 URL 的处理是通过语法 @{...} 来处理的。如果需要 Thymeleaf 对 URL 进行渲染，那么务必使用 th:href，th:src 等属性，下面是一个例子

<!-- Will produce 'http://localhost:8080/standard/unread' (plus rewriting) -->
<a th:href="@{/standard/{type}(type=${type})}">view</a>

<!-- Will produce '/gtvg/order/3/details' (plus rewriting) -->
<a href="details.html" th:href="@{/order/{orderId}/details(orderId=${o.id})}"
  >view</a
>

设置背景

1	<div th:style="'background:url(' + @{/<path-to-image>} + ');'"></div>

根据属性值改变背景

<div
  class="media-object resource-card-image"
  th:style="'background:url(' + @{(${collect.webLogo}=='' ? 'img/favicon.ico' : ${collect.webLogo})} + ')'"
></div>

几点说明：
- 上例中 URL 最后的 (orderId=${o.id}) 表示将括号内的内容作为 URL 参数处理，该语法避免使用字符串拼接，大大提高了可读性
- @{...} 表达式中可以通过 {orderId} 访问 Context 中的 orderId 变量
- @{/order} 是 Context 相关的相对路径，在渲染时会自动添加上当前 Web 应用的 Context 名字，假设 context 名字为 app，那么结果应该是 /app/order

内联 js

内联文本：[[…]] 内联文本的表示方式，使用时，必须先用 th:inline="text/javascript/none" 激活，th:inline 可以在父级标签内使用，甚至作为 body 的标签。内联文本尽管比 th:text 的代码少，不利于原型显示。

<script th:inline="javascript">
/*<![CDATA[*/
...
var username = /*[[${sesion.user.name}]]*/ 'Sebastian';
var size = /*[[${size}]]*/ 0;
...
/*]]>*/
</script>

js 附加代码：

1
2
3

/*[+
var msg = 'This is a working application';
+]*/

js 移除代码：

1
2
3

/*[- */
var msg = "This is a non-working template";
/* -]*/

内嵌变量

为了模板更加易用，Thymeleaf 还提供了一系列 Utility 对象（内置于 Context 中），可以通过 # 直接访问：

dates ： java.util.Date 的功能方法类。
calendars : 类似#dates，面向 java.util.Calendar
numbers : 格式化数字的功能方法类
strings : 字符串对象的功能类，contains, startWiths, prepending/appending 等等。
objects: 对 objects 的功能类操作。
bools: 对布尔值求值的功能方法。
arrays：对数组的功能类方法。
lists: 对 lists 功能类方法
sets
maps
…

下面用一段代码来举例一些常用的方法：

dates

/* * Format date with the specified pattern * Also works with arrays, lists or
sets */ ${#dates.format(date, 'dd/MMM/yyyy HH:mm')}
${#dates.arrayFormat(datesArray, 'dd/MMM/yyyy HH:mm')}
${#dates.listFormat(datesList, 'dd/MMM/yyyy HH:mm')}
${#dates.setFormat(datesSet, 'dd/MMM/yyyy HH:mm')} /* * Create a date
(java.util.Date) object for the current date and time */ ${#dates.createNow()}
/* * Create a date (java.util.Date) object for the current date (time set to
00:00) */ ${#dates.createToday()}

strings

/* * Check whether a String is empty (or null). Performs a trim() operation
before check * Also works with arrays, lists or sets */
${#strings.isEmpty(name)} ${#strings.arrayIsEmpty(nameArr)}
${#strings.listIsEmpty(nameList)} ${#strings.setIsEmpty(nameSet)} /* * Check
whether a String starts or ends with a fragment * Also works with arrays, lists
or sets */ ${#strings.startsWith(name,'Don')} // also array*, list* and set*
${#strings.endsWith(name,endingFragment)} // also array*, list* and set* /* *
Compute length * Also works with arrays, lists or sets */
${#strings.length(str)} /* * Null-safe comparison and concatenation */
${#strings.equals(str)} ${#strings.equalsIgnoreCase(str)}
${#strings.concat(str)} ${#strings.concatReplaceNulls(str)} /* * Random */
${#strings.randomAlphanumeric(count)}

使用 Thymeleaf 布局

Spring Boot 2.0 将布局单独提取了出来，需要单独引入依赖：thymeleaf-layout-dialect。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>

定义代码片段

1
2
3

<footer th:fragment="copy">
&copy; 2019
</footer>

在页面任何地方引入：

<body>
    <div th:insert="layout/copyright :: copyright"></div>
    <div th:replace="layout/copyright :: copyright"></div>
</body>

th: insert 和 th: replace 区别，insert 只是加载，replace 是替换。Thymeleaf 3.0 推荐使用 th: insert 替换 2.0 的 th: replace。

返回的 HTML 如下：

<body>
   <div> &copy; 2019 </div>
  <footer>&copy; 2019 </footer>
</body>

下面是一个常用的后台页面布局，将整个页面分为头部，尾部、菜单栏、隐藏栏，点击菜单只改变 content 区域的页面

<body class="layout-fixed">
  <div th:fragment="navbar"  class="wrapper"  role="navigation">
	<div th:replace="fragments/header :: header">Header</div>
	<div th:replace="fragments/left :: left">left</div>
	<div th:replace="fragments/sidebar :: sidebar">sidebar</div>
	<div layout:fragment="content" id="content" ></div>
	<div th:replace="fragments/footer :: footer">footer</div>
  </div>
</body>

任何页面想使用这样的布局值只需要替换中见的 content 模块即可

<html xmlns:th="http://www.thymeleaf.org" layout:decorator="layout">
 <body>
    <section layout:fragment="content">
  ...

也可以在引用模版的时候传参

1	<head th:include="layout :: htmlhead" th:with="title='Hello'"></head>

layout 是文件地址，如果有文件夹可以这样写 fileName/layout:htmlhead，htmlhead 是指定义的代码片段如 th:fragment="copy"

引入 Thymeleaf

怎么引入呢，对于 springboot 来说，什么事情不都是一个 start 的事情嘛，我们去在项目中引入一下。给大家三个网址：

Thymeleaf 官网：https://www.thymeleaf.org/

Thymeleaf 在 Github 的主页：https://github.com/thymeleaf/thymeleaf

Spring 官方文档：找到我们对应的版本, 找到 spring-boot-starter-thymeleaf


`spring-boot-starter-thymeleaf`	Starter for building MVC web applications using Thymeleaf views	Pom

找到对应的 pom 依赖：可以适当点进源码看下本来的包！

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

Maven 会自动下载 jar 包，我们可以去看下下载的东西；

Thymeleaf 引入分析

前面呢，我们已经引入了 Thymeleaf，那这个要怎么使用呢？
我们首先得按照 SpringBoot 的自动配置原理看一下我们这个 Thymeleaf 的自动配置规则，在按照那个规则，我们进行使用。

我们去找一下 Thymeleaf 的自动配置类：ThymeleafProperties

我们可以在其中看到默认的前缀和后缀！我们只需要把我们的 html 页面放在类路径下的 templates 下，thymeleaf 就可以帮我们自动渲染了。
使用 thymeleaf 什么都不需要配置，只需要将他放在指定的文件夹下即可！

@ConfigurationProperties(
  prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {
  private static final Charset DEFAULT_ENCODING;
  public static final String DEFAULT_PREFIX = "classpath:/templates/";
  public static final String DEFAULT_SUFFIX = ".html";
  private boolean checkTemplate = true;
  private boolean checkTemplateLocation = true;
  private String prefix = "classpath:/templates/";
  private String suffix = ".html";
  private String mode = "HTML";
  private Charset encoding;
}

引入测试

编写一个 TestController

@Controller
public class TestController {

  @RequestMapping("/t1")
  public String test1(){
    //classpath:/templates/test.html
    return "test";
  }

}

编写一个测试页面 test.html 放在 templates 目录下

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <h1>测试页面</h1>
  </body>
</html>

启动项目请求测试

循环测试

要学习语法，还是参考官网文档最为准确，我们找到对应的版本看一下；

Thymeleaf 官网：https://www.thymeleaf.org/ ，简单看一下官网！我们去下载 Thymeleaf 的官方文档！

我们做个最简单的练习：我们需要查出一些数据，在页面中展示

修改测试请求，增加数据传输；

@RequestMapping("/t1")
public String test1(Model model){
  //存入数据
  model.addAttribute("msg","Hello,Thymeleaf");
  model.addAttribute("users", Arrays.asList("孙悟空","猪八戒","沙悟净","白龙马"));
  //classpath:/templates/test.html
  return "test";
}

我们要使用 thymeleaf，需要在 html 文件中导入命名空间的约束，方便提示。

我们可以去官方文档的#3 中看一下命名空间拿来过来：
1
2
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org"></html>

我们去编写下前端页面

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <title>简单取值</title>
  </head>
  <body>
    <h1>测试页面</h1>

    <!--th:text就是将div中的内容设置为它指定的值 -->
    <div th:text="${msg}"></div>
    <p th:each="user:${users}" th:text="${user}"></p>
  </body>
</html>

集成 thymeleaf

pom.xml

<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-thymeleaf</artifactId>
    </dependency>

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

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

    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>

    <dependency>
        <groupId>cn.hutool</groupId>
        <artifactId>hutool-all</artifactId>
    </dependency>
</dependencies>

IndexController.java

/**
 * <p>
 * 主页
 * </p>
 *
 * @package: com.xkcoding.template.thymeleaf.controller
 * @description: 主页
 * @author: yangkai.shen
 * @date: Created in 2018/10/10 10: 12 AM
 * @copyright: Copyright (c) 2018
 * @version: V1.0
 * @modified: yangkai.shen
 */
@Controller
@Slf4j
public class IndexController {

	@GetMapping(value = {"", "/"})
	public ModelAndView index(HttpServletRequest request) {
		ModelAndView mv = new ModelAndView();

		User user = (User) request.getSession().getAttribute("user");
		if (ObjectUtil.isNull(user)) {
			mv.setViewName("redirect:/user/login");
		} else {
			mv.setViewName("page/index");
			mv.addObject(user);
		}

		return mv;
	}
}

UserController.java

/**
 * <p>
 * 用户页面
 * </p>
 *
 * @package: com.xkcoding.template.thymeleaf.controller
 * @description: 用户页面
 * @author: yangkai.shen
 * @date: Created in 2018/10/10 10: 11 AM
 * @copyright: Copyright (c) 2018
 * @version: V1.0
 * @modified: yangkai.shen
 */
@Controller
@RequestMapping("/user")
@Slf4j
public class UserController {
	@PostMapping("/login")
	public ModelAndView login(User user, HttpServletRequest request) {
		ModelAndView mv = new ModelAndView();

		mv.addObject(user);
		mv.setViewName("redirect:/");

		request.getSession().setAttribute("user", user);
		return mv;
	}

	@GetMapping("/login")
	public ModelAndView login() {
		return new ModelAndView("page/login");
	}
}

index.html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header th:replace="~{common/head :: header}"></header>
<body>
<div id="app" style="margin: 20px 20%">
	欢迎登录，<span th:text="${user.name}"></span>！
</div>
</body>
</html>

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header th:replace="~{common/head :: header}"></header>
<body>
<div id="app" style="margin: 20px 20%">
   <form action="/demo/user/login" method="post">
      用户名<input type="text" name="name" placeholder="用户名"/>
      密码<input type="password" name="password" placeholder="密码"/>
      <input type="submit" value="登录">
   </form>
</div>
</body>
</html>

application.yml

server:
  port: 8080
  servlet:
    context-path: /demo
spring:
  thymeleaf:
    mode: HTML
    encoding: UTF-8
    servlet:
      content-type: text/html
    cache: false

Thymeleaf 语法糖学习文档

https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

集成 freemarker

依赖 pom.xml

<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-freemarker</artifactId>
    </dependency>

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

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

    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>

    <dependency>
        <groupId>cn.hutool</groupId>
        <artifactId>hutool-all</artifactId>
    </dependency>
</dependencies>

配置 freemarker：

spring:
  freemarker:
    template-loader-path: classpath:/templates/
    suffix: .ftl
    content-type: text/html
    charset: UTF-8
    settings:
      number_format: '0.##

参考官网提供的 API 说明：https://freemarker.apache.org/docs/api/freemarker/template/Configuration.html#setSetting-java.lang.String-java.lang.String-

首页控制层 IndexController.java

package pers.sfl.thymeleaf.controller;

import cn.hutool.core.util.ObjectUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import pers.sfl.thymeleaf.model.User;

import javax.servlet.http.HttpServletRequest;

/**
 * @description: 主页
 */
@RestController
@Slf4j
public class IndexController {
    @GetMapping(value = {"", "/"})
    public ModelAndView index(HttpServletRequest request) {
        ModelAndView mv = new ModelAndView();

        User user = (User) request.getSession().getAttribute("user");
        if (ObjectUtil.isNull(user)) {
            mv.setViewName("redirect:/user/login");
        } else {
            mv.setViewName("page/index");
            mv.addObject(user);
        }

        return mv;
    }

}

UserController.java

package pers.sfl.thymeleaf.controller;

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;
import pers.sfl.thymeleaf.model.User;

import javax.servlet.http.HttpServletRequest;

@Controller
@RequestMapping("/user")
@Slf4j
public class UserController {
    @PostMapping("/login")
    public ModelAndView login(User user, HttpServletRequest request) {
        ModelAndView mv =new ModelAndView();
        mv.setViewName("redirect:/");

        request.getSession().setAttribute("user", user);
        return mv;
    }

    @GetMapping("/login")
    public ModelAndView login() {
        return new ModelAndView("page/login");
    }

}

index.ftl

<!doctype html>
<html lang="en">
<#include "../common/head.ftl">
<body>
<div id="app" style="margin: 20px 20%">
	欢迎登录，${user.name}！
</div>
</body>
</html>

<!doctype html>
<html lang="en">
<#include "./common/head.ftl">
<body>
<div id="app" style="margin: 20px 20%">
	<form action="/demo/user/login" method="post">
		用户名<input type="text" name="name" placeholder="用户名"/>
		密码<input type="password" name="password" placeholder="密码"/>
		<input type="submit" value="登录">
	</form>
</div>
</body>
</html>

application.yml

server:
  port: 8080
  servlet:
    context-path: /demo
spring:
  freemarker:
    suffix: .ftl
    cache: false
    charset: UTF-8

Freemarker 语法糖学习文档

https://freemarker.apache.org/docs/dgui.html

使用 JSP 开发

创建 webapp 目录

Thymeleaf 介绍

标准表达式语法

变量表达式

获取对象的属性、调用方法

使用内置的基本对象

内置的一些工具对象

选择(星号)表达式

文字国际化表达式

URL 表达式

变量和星号区别

表达式支持的语法

字面（Literals）

文本操作（Text operations）

算术运算（Arithmetic operations）

布尔操作（Boolean operations）

比较和等价(Comparisons and equality)

条件运算符（Conditional operators）

常用 th 标签都有那些？

几种常用的使用方法

赋值、字符串拼接

条件判断 If/Unless

for 循环

URL

内联 js

内嵌变量

dates

strings

使用 Thymeleaf 布局

引入 Thymeleaf

Thymeleaf 引入分析

引入测试

循环测试

集成 thymeleaf

pom.xml

IndexController.java

UserController.java

index.html

login.html

application.yml

Thymeleaf 语法糖学习文档

集成 freemarker

依赖 pom.xml

配置 freemarker：

首页控制层 IndexController.java

UserController.java

index.ftl

login.ftl

application.yml

Freemarker 语法糖学习文档