SpringBoot整合视图层技术（Freemarker,Thymeleaf,Jsp）

Love The Way You Lie 2022-12-23 13:26 244阅读 0赞

# SpringBoot整合视图层技术 #

## 一、SpringBoot整合Freemarker ##

### 1、Freemarker依赖 ###

<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>

### 2、写一个User实体做测试 ###

public class User { 
        private Long id;
        private String username;
        private String address;
    
        @Override
        public String toString() { 
            return "User{" +
                    "id=" + id +
                    ", username='" + username + '\'' +
                    ", address='" + address + '\'' +
                    '}';
        }
    }

### 3、写一个Controller来返回到视图层 ###

/** * @Create_Author msfh * @Create_Date 2020-11-23 14:38:53 * @Description User控制层 */
    @Controller
    public class UserController { 
    
    
        @GetMapping("user")
        public String user(Model model) { 
            ArrayList<User> users = new ArrayList<>();
            User user = new User();
            for (int i = 0; i < 10; i++) { 
                System.out.println(i);
                user.setId((long) i);
                user.setUsername("msfh------>"+i);
                user.setAddress("msfhAddress--->"+i);
                System.out.println("user = " + user);
                users.add(user);
            }
            model.addAttribute("users",users);
            return "user";
        }
    
    
    }

### 4、在路径resources/templates路径下创建user.ftl文件 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <table border="1">
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>地址</td>
        </tr>
        <#list users as user>
            <tr>
                <td>${user.id}</td>
                <td>${user.username}</td>
                <td>${user.address}</td>
            </tr>
        </#list>
    </table>
    </body>
    </html>

### 5、在进行视图绑定时遇到报错 ###

`解决方式为：把SpringBoot版本换为2.1.6.RELEASE版本，或者就是在第四步的时候创建文件为user.ftlh文件

## 二、Freemarker常用指令 ##

FTL指令常用标签及语法

\*\*注意：\*\*使用freemaker，要求所有标签必须闭合，否则会导致freemaker无法解析。

freemaker注释:<\#-- 注释内容 -->格式部分,不会输出

### \---------------------------------- 基础语法 ---------------------------------- ###

### 1、字符输出 ###

${emp.name?if_exists}　　　　　　// 变量存在，输出该变量，否则不输出
    ${emp.name!}　　　　　　　　　　  // 变量存在，输出该变量，否则不输出
    
    ${emp.name?default("xxx")}     // 变量不存在，取默认值xxx 
    ${emp.name!"xxx"}    　　　　　　// 变量不存在，取默认值xxx

常用内部函数：

${"123<br>456"?html}    　　// 对字符串进行HTML编码，对html中特殊字符进行转义
    ${"str"?cap_first}    　　  // 使字符串第一个字母大写 
    ${"Str"?lower_case}        // 将字符串转换成小写 
    ${"Str"?upper_case}        // 将字符串转换成大写
    ${"str"?trim}              // 去掉字符串前后的空白字符

字符串的两种拼接方式拼接：

${"hello${emp.name!}"}     // 输出hello+变量名
    ${"hello"+emp.name!}       // 使用+号来连接，输出hello+变量名

可以通过如下语法来截取子串:

<#assign str = "abcdefghijklmn"/>

// 方法1  
$\{str?substring(0,4)\} // 输出abcd

// 方法2  
s t r \[ 0 \] \{str\[0\]\}*s**t**r*\[0\]\{str\[4\]\} // 结果是ae  
$\{str\[1…4\]\} 　　　 // 结果是bcde

// 返回指定字符的索引  
$\{str?index\_of(“n”)\}

### 2、日期输出 ###

${emp.date?string('yyyy-MM-dd')} //日期格式

### 3、数字输出(以数字20为例) ###

${emp.name?string.number}    　// 输出20
    ${emp.name?string.currency}    // ￥20.00 
    ${emp.name?string.percent}     // 20%
    ${1.222?int} 　　　　　　　　　　 // 将小数转为int，输出1

<\#setting number\_format=“percent”/> // 设置数字默认输出方式(‘percent’,百分比)  
<\#assign answer=42/> 　　　　　　　　 // 声明变量 answer 42  
\#\{answer\} 　　　　　　　　 // 输出 4,200%  
$\{answer?string\} 　　　　 // 输出 4,200%  
$\{answer?string.number\} 　　// 输出 42  
$\{answer?string.currency\} // 输出 ￥42.00  
$\{answer?string.percent\} 　// 输出 4,200%  
\#\{answer\} 　　　　　　　　// 输出 42

数字格式化插值可采用#{expr;format}形式来格式化数字,其中format可以是:
    mX:小数部分最小X位
    MX:小数部分最大X位
    如下面的例子:
    <#assign x=2.582/>
    <#assign y=4/>
    #{x; M2}    // 输出2.58
    #{y; M2}    // 输出4
    #{x; m2}    // 输出2.58
    #{y; m2}    // 输出4.0
    #{x; m1M2}  // 输出2.58
    #{x; m1M2}  // 输出4.0

### 4、申明变量 ###

<#assign foo=false/> // 声明变量,插入布尔值进行显示,注意不要用引号
    ${foo?string("yes","no")} // 当为true时输出"yes",否则输出"no"

申明变量的几种方式

<#assign name=value> 
    <#assign name1=value1 name2=value2 ... nameN=valueN> 
    <#assign same as above... in namespacehash>

<\#assign name>  
capture this  
</\#assign>

<\#assign name in namespacehash>  
capture this  
</\#assign>

### 5、比较运算符 ###

表达式中支持的比较运算符有如下几个:  
= 或 == ：判断两个值是否相等.  
!= ：判断两个值是否不等.  
> 或 gt ：判断左边值是否大于右边值  
>= 或 gte ：判断左边值是否大于等于右边值  
< 或 lt ：判断左边值是否小于右边值  
<= 或 lte ：判断左边值是否小于等于右边值

### 6、算术运算符 ###

FreeMarker表达式中完全支持算术运算,  
FreeMarker支持的算术运算符包括:+, - , \* , / , %  
注意：  
（1）、运算符两边必须是数字  
（2）、使用+运算符时,如果一边是数字,一边是字符串,就会自动将数字转换为字符串再连接,如:$\{3 + “5”\},结果是:35

### 7、逻辑运算符 ###

逻辑运算符有如下几个:  
逻辑与:&&  
逻辑或:||  
逻辑非:!  
逻辑运算符只能作用于布尔值,否则将产生错误

### 8、FreeMarker中的运算符优先级如下(由高到低排列): ###

①、一元运算符:!  
②、内建函数:?  
③、乘除法:\*, / , %  
④、加减法:- , +  
⑤、比较:> , < , >= , <= (lt , lte , gt , gte)  
⑥、相等:== , = , !=  
⑦、逻辑与:&&  
⑧、逻辑或:||  
⑨、数字范围:…  
实际上,我们在开发过程中应该使用括号来严格区分,这样的可读性好,出错少

### 9、if 逻辑判断（注意：elseif 不加空格） ###

<#if condition>
    ...
    <#elseif condition2>
    ...
    <#elseif condition3>
    ...
    <#else>
    ...
    </#if>

if 空值判断

// 当 photoList 不为空时
    <#if photoList??>...</#if>

值得注意的是,$\{…\}只能用于文本部分,不能用于表达式,下面的代码是错误的:  
<\#if KaTeX parse error: Expected ‘EOF’, got ‘&’ at position 8: \{isBig\}&̲gt;Wow!</\#<s…\{isBig\}">Wow!</\#if>

// 正确写法  
<\#if isBig>Wow!</\#if>

### 10、switch (条件可为数字，可为字符串) ###

<#switch value> 
    <#case refValue1> 
    ....
    <#break> 
    <#case refValue2> 
    ....
    <#break> 
    <#case refValueN> 
    ....
    <#break> 
    <#default> 
    .... 
    </#switch>

### 11、集合 & 循环 ###

// 遍历集合:
    <#list empList! as emp> 
        ${emp.name!}
    </#list>

// 可以这样遍历集合:  
<\#list 0…(empList!?size-1) as i>  
$\{empList\[i\].name!\}  
</\#list>

// 与jstl循环类似,也可以访问循环的状态。

empList?size 　　　// 取集合的长度  
emp\_index: 　　　　// int类型，当前对象的索引值  
emp\_has\_next: // boolean类型，是否存在下一个对象

// 使用<\#break>跳出循环  
<\#if emp\_index = 0><\#break></\#if>

// 集合长度判断  
<\#if empList?size != 0></\#if> // 判断=的时候,注意只要一个=符号,而不是==

<\#assign l=0…100/> // 定义一个int区间的0~100的集合，数字范围也支持反递增,如100…2  
<\#list 0…100 as i> 　　// 等效于java for(int i=0; i <= 100; i++)  
　　$\{i\}  
</\#list>

// 截取子集合：  
empList\[3…5\] //返回empList集合的子集合,子集合中的元素是empList集合中的第4-6个元素

// 创建集合：  
<\#list \[“星期一”, “星期二”, “星期三”, “星期四”, “星期五”, “星期六”, “星期天”\] as x>

// 集合连接运算,将两个集合连接成一个新的集合  
<\#list \[“星期一”,“星期二”,“星期三”\] + \[“星期四”,“星期五”,“星期六”,“星期天”\] as x>

// 除此之外,集合元素也可以是表达式,例子如下:  
\[2 + 2, \[1, 2, 3, 4\], “whatnot”\]

// seq\_contains：判断序列中的元素是否存在  
<\#assign x = \[“red”, 16, “blue”, “cyan”\]>  
$\{x?seq\_contains(“blue”)?string(“yes”, “no”)\} // yes  
$\{x?seq\_contains(“yellow”)?string(“yes”, “no”)\} // no  
$\{x?seq\_contains(16)?string(“yes”, “no”)\} // yes  
$\{x?seq\_contains(“16”)?string(“yes”, “no”)\} // no

// seq\_index\_of：第一次出现的索引  
<\#assign x = \[“red”, 16, “blue”, “cyan”, “blue”\]>  
$\{x?seq\_index\_of(“blue”)\} // 2

// sort\_by：排序（升序）  
<\#list movies?sort\_by(“showtime”) as movie></\#list>

// sort\_by：排序（降序）  
<\#list movies?sort\_by(“showtime”)?reverse as movie></\#list>

// 具体介绍：  
// 不排序的情况：  
<\#list movies as moive>  
　　<a href=“KaTeX parse error: Expected ‘EOF’, got ‘&’ at position 13: \{moive.url\}”&̲gt;\{moive.name\}  
</\#list>

//要是排序，则用  
<\#list movies?sort as movie>  
　　<a href=“KaTeX parse error: Expected ‘EOF’, got ‘&’ at position 13: \{movie.url\}”&̲gt;\{movie.name\}  
</\#list>

// 这是按元素的首字母排序。若要按list中对象元素的某一属性排序的话，则用  
<\#list moives?sort\_by(\[“name”\]) as movie>  
　　<a href=“KaTeX parse error: Expected ‘EOF’, got ‘&’ at position 13: \{movie.url\}”&̲gt;\{movie.name\}  
</\#list>

//这个是按list中对象元素的\[name\]属性排序的，是升序，如果需要降序的话，如下所示：  
<\#list movies?sort\_by(\[“name”\])?reverse as movie>  
　　<a href=“KaTeX parse error: Expected ‘EOF’, got ‘&’ at position 13: \{movie.url\}”&̲gt;\{movie.name\}  
</\#list>

### 12、Map对象 ###

// 创建map
    <#assign scores = {"语文":86,"数学":78}>

// Map连接运算符  
<\#assign scores = \{“语文”:86,“数学”:78\} + \{“数学”:87,“Java”:93\}>

// Map元素输出  
emp.name // 全部使用点语法  
emp\[“name”\] // 使用方括号

### 13、FreeMarker支持如下转义字符: ###

" ：双引号(u0022)  
’ ：单引号(u0027)  
\\ ：反斜杠(u005C)  
\\n ：换行(u000A)  
\\r ：回车(u000D)  
\\t ：Tab(u0009)  
\\b ：退格键(u0008)  
\\f ：Form feed(u000C)  
\\l ：<  
\\g ：>  
\\a ：&  
\{ ：\{  
\\xCode ：直接通过4位的16进制数来指定Unicode码,输出该unicode码对应的字符.

如果某段文本中包含大量的特殊符号,FreeMarker提供了另一种特殊格式:可以在指定字符串内容的引号前增加r标记,在r标记后的文件将会直接输出.看如下代码:  
KaTeX parse error: Expected '\}', got 'EOF' at end of input: \{r"\{foo\}"\} // 输出 $\{foo\}  
$\{r"C:/foo/bar"\} // 输出 C:/foo/bar

### 14、include指令 ###

// include指令的作用类似于JSP的包含指令:
    <#include "/test.ftl" encoding="UTF-8" parse=true>

// 在上面的语法格式中,两个参数的解释如下:  
encoding=“GBK” // 编码格式  
parse=true 　　 // 是否作为ftl语法解析,默认是true，false就是以文本方式引入,注意:在ftl文件里布尔值都是直接赋值的如parse=true,而不是parse=“true”

### 15、import指令 ###

// 类似于jsp里的import,它导入文件，然后就可以在当前文件里使用被导入文件里的宏组件
    <#import "/libs/mylib.ftl" as my>
    // 上面的代码将导入/lib/common.ftl模板文件中的所有变量,交将这些变量放置在一个名为com的Map对象中，"my"在freemarker里被称作namespace

### 17、compress 压缩 ###

// 用来压缩空白空间和空白的行 
    <#compress> 
        ... 
    </#compress>
    <#t> // 去掉左右空白和回车换行

<\#lt>// 去掉左边空白和回车换行

<\#rt>// 去掉右边空白和回车换行

<\#nt>// 取消上面的效果

### 18、escape,noescape 对字符串进行HTML编码 ###

// escape指令导致body区的插值都会被自动加上escape表达式,但不会影响字符串内的插值,只会影响到body内出现的插值,使用escape指令的语法格式如下:
    <#escape x as x?html> 
    　　First name: ${firstName} 
    <#noescape>Last name: ${lastName}</#noescape> 
    　　Maiden name: ${maidenName} 
    </#escape>

// 相同表达式  
First name: $\{firstName?html\}  
Last name: $\{lastName\}  
Maiden name: $\{maidenName?html\}

### \---------------------------------- 高级语法 ---------------------------------- ###

### 1、global全局赋值语法 ###

<#global name=value>

<\#global name1=value1 name2=value2 … nameN=valueN>

<\#global name>  
　　capture this  
</\#global>

// 利用这个语法给变量赋值，那么这个变量在所有的namespace中是可见的，如果这个变量被当前的assign语法覆盖如<\#global x=2><\#assign x=1>在当前页面里x=2将被隐藏，或者通过$\{.globals.x\} 来访问

### 2、setting 语法 ###

// 用来设置整个系统的一个环境 
    locale // zh_CN 中文环境
    number_format 
    boolean_format 
    date_format , time_format , datetime_format 
    time_zone 
    classic_compatible
    // 例1：
    <#setting number_format="percent"/>    // 设置数字默认输出方式('percent',百分比)

// 例2：  
// 假如当前是匈牙利的设置，然后修改成美国  
$\{1.2\} // 输出1,2  
<\#setting locale=“en\_US”>  
$\{1.2\} // 输出1.2,因为匈牙利是采用", “作为十进制的分隔符，美国是用”. "

### 3、macro宏指令 ###

例子1：

<#-- 定义宏 -->
    <#macro test foo bar="Bar" baaz=-1> 
    　　Text: ${foo}, ${bar}, ${baaz}
    </#macro>

<\#-- 使用宏 -->  
<@test foo=“a” bar=“b” baaz=5*5/> // 输出：Text: a, b, 25  
<@test foo=“a” bar=“b”/> 　　　　// 输出：Text: a, b, -1  
<@test foo=“a” baaz=5*5-2/> 　　　　// 输出：Text: a, Bar, 23  
<@test foo=“a”/> // 输出：Text: a, Bar, -1

例子2：

<#-- 定义一个循环输出的宏 -->
    <#macro list title items> 
    　　${title}
    　　<#list items as x>
    　　　　*${x}
    　　</#list> 
    </#macro>

<\#-- 使用宏 -->  
<@list items=\[“mouse”, “elephant”, “python”\] title=“Animals”/>  
// 输出Animals \*mouse \*elephant \*python

例子3：

<#-- 嵌套宏 -->
    <#macro border>
    　　<table>
    　　　　<#nested>
    　　</table>
    </#macro>

<\#-- 嵌套宏使用 -->  
<@border>  
　　hahaha  
[/@border][border]  
输出结果：

<table> 
 <tbody> 
  <tr> 
   <td>hahaha</td> 
  </tr> 
 </tbody> 
</table>

例子4：在nested指令中使用循环变量时,可以使用多个循环变量,看如下代码:

<#-- 循环嵌套宏 -->
    <#macro repeat count>
    　　<#list 1..count as x>
    　　　　<#nested x, x/2, x==count> // 使用nested指令时指定了三个循环变量
    　　</#list>
    </#macro>

<\#-- 使用宏 -->  
<@repeat count = 4; c, halfc, last>  
　　$\{c\}. $\{halfc\}<\#if last> Last!</\#if>  
[/@repeat][repeat]  
// 输出结果：  
// 1. 0.5  
// 2. 1  
// 3. 1.5  
// 4. 2 Last!

freemarker 宏嵌套nested 的使用:  
http://blog.sina.com.cn/s/blog\_7e5699790100z59g.html

#### 4、结束macro指令 ####

// return指令用于结束macro指令
    <#-- 创建宏 -->
    <#macro book>
    　　spring
    　　<#return>
    　　j2ee
    </#macro>

<\#-- 使用宏 -->  
<@book />  
// 上面的代码输出:spring,而j2ee位于return指令之后,不会输出.

## 三、SpringBoot整合Thymeleaf ##

### 1、pom文件依赖 ###

<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>

### 2、建User实体使用 ###

/** * @Create_Author msfh * @Create_Date 2020-11-25 10:27:49 * @Description UserTest */
    public class User { 
        private Integer id;
        private String name;
        private Integer age;
    
        @Override
        public String toString() { 
            return "User{" +
                    "id=" + id +
                    ", name='" + name + '\'' +
                    ", age=" + age +
                    '}';
        }
        /**get&set省略**/
    }

### 3、构建UserController使用 ###

/** * @Create_Author msfh * @Create_Date 2020-11-25 10:28:55 * @Description User控制器 */
    @Controller
    public class UserController { 
    
        @GetMapping("user")
        public String user(Model model) { 
            ArrayList<User> users = new ArrayList<>();
            for (int i = 0; i < 10; i++) { 
                User user = new User();
                user.setId(i);
                user.setName("msfh-->" + i);
                user.setAge(i);
                users.add(user);
            }
            model.addAttribute("users", users);
            return "user";
        }
    
    
    }

### 4、构建user.html文件 ###

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <table border="1">
        <tr>
            <td>编号</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr th:each="user : ${users}">
            <td th:text="${user.id}"></td>
            <td th:text="${user.name}"></td>
            <td th:text="${user.age}"></td>
        </tr>
    </table>
    </body>
    </html>

### 5、访问http://localhost:8080/user链接进行测试 ###

Thymeleaf以html为原型，文件后缀是.html，使用Thymeleaf时创建html文件即可。

SpringBoot开箱即用，提供了大量的默认配置，一般使用默认配置即可。

SpringBoot的默认配置中，Thymeleaf的默认前缀是classpath:/resources/templates，默认后缀是.html。

开发、调试时关闭Thymeleaf的页面缓存：

#默认为true，使用页面缓存
    spring.thymeleaf.cache=false

上线时改为true，或者删掉、注释掉。

--------------------

## 四、Thymeleaf语法 ##

#### 1、th:text 显示普通文本 ####

<p th:text="hello"></p>
    
    
    <p th:text="hello">你好</p>
    
    
    <p th:text="hello" />
    
    
    
    
    <p th:text="1+2"></p>
    
    <p th:text="'1+2=' + (1+2)"></p>
    
    
    
    <p th:text="${user.age}>=18 ? 已成年 : 未成年"></p>
    
    
    
    
    <p th:text="'用户名：' + ${user.username}"></p>
    
    
    
    <p th:text="'用户名：' + ${user.getUsername()}"></p>
    <p th:text="'转换为全大写：' + ${user.username.toUpperCase()}"></p>
    
    
    
    <p th:text="|用户名：${user.username}|"></p>

Thymeleaf所有的指令都以th:开头，th即Thymeleaf的前2个字母。

controller可以使用Model、ModelAndView来传递数据。

#### 2、th:utext 具有th:text的功能，且可以解析标签 ####

//controller传递的数据中带有html标签
    model.addAttribute("msg", "<h2>user</h2>");
    
    <p th:text="${msg}"></p>
    
    
    <p th:utext="${msg}"></p>

注意：是controller向html传递的数据中有html标签，不是直接在utext中写标签，如果是

这种直接在th:utext中写标签的，肯定会出错。

#### 3、th:object 处理对象 ####

比如说controller传了一个user对象，在html中要多处使用user对象，$\{user.xxx\}，每次都要写user，很麻烦，可以这样：

<div th:object="${user}">
        
        <p th:text="'用户名：'+*{username}"></p>
        <p th:text="'年龄：'+*{age}"></p>
        <p th:text="'手机号：'+*{tel}"></p>
        <p th:text="'住址：'+*{address}"></p>
    </div>

#### 4、th:src、th:href、th:action 分别相当于html的src、href、action ####

<script src="js/vue.js"></script>
    
    <script th:src="@{js/vue.js}"></script>
    
    <img src="img/mac_pro.png" />
    <img th:src="@{img/mac_pro.png}" />

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        
        <link href="css/a.css" type="text/css" rel="stylesheet" />
        <link th:href="@{css/a.css}" type="text/css" rel="stylesheet" />
        
    </head>
    
    <body>
    
        
        <a href="/user">访问静态页面</a>
        <a th:href="@{/user}">访问controller方法</a>
    
    </body>
    </html>

都是把路径放在@\{ \}中。

#### 5、Thymeleaf常用的内置对象 ####

<table> 
 <thead> 
  <tr> 
   <th><code>#requset</code></th> 
   <th>HttpServletRequest对象</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>#response</code></td> 
   <td>HttpServletReponse对象</td> 
  </tr> 
  <tr> 
   <td><code>#session</code></td> 
   <td>HttpSession对象</td> 
  </tr> 
  <tr> 
   <td><code>#servletContext</code></td> 
   <td>HttpServletContext对象</td> 
  </tr> 
 </tbody> 
</table>

示例：

<p th:text="'用户名：' + ${#request.getParameter('username')}"></p>

#### 6、th:if 条件判断 ####

<p th:if="3>2">3>2</p>
    <p th:if="3>4">3>4</p>
    
    
    <p th:if="3 gt 2">3 gt 2</p>
    
    
    
    <p th:if="2>1 and 3>2">2>1 and 3>2</p>
    
    
    <p th:if="! false">! false</p>
    <p th:if="not false">not false</p>

> gt 即greater than

< lt 即less than

>= ge 即greater equals

<= le 即less equals

== eq 即equals

!= ne 即not equals

#### 7、th:each 迭代Array、List、Map ####

controller传给html的数据：

//数组
    String[] arr = {"苹果", "李子", "梨子"};
    model.addAttribute("arr", arr);
    
    //List
    ArrayList<String> list = new ArrayList<>();
    list.add("语文");
    list.add("数学");
    list.add("英语");
    model.addAttribute("list", list);
    
    //Map
    HashMap<String,Double> map = new HashMap<>();
    map.put("香蕉", 4.0);
    map.put("菠萝", 5.0);
    map.put("芒果", 6.0);
    model.addAttribute("map", map);

html：

<table>
        <tr th:each="ele:${arr}">
            
            <td th:text="${ele}"></td>
        </tr>
    </table>
    
    
    <table>
        <tr th:each="ele:${list}">
            <td th:text="${ele}"></td>
        </tr>
    </table>
    
    
    
    <table>
        <tr th:each="entity:${map}">
            
            <td th:text="${ele}"></td>
        </tr>
    </table>
    
    
    <table>
        <tr th:each="entity:${map}">
            
            <td th:text="${entity.key}"></td>
            <td th:text="${entity.value}"></td>
        </tr>
    </table>
    
    
    
    <table>
        <tr th:each="entity,status:${map}">
            <td th:text="${entity}"></td>
            <td th:text="${status}"></td>
        </tr>
    </table>

第二个临时变量是一个对象，包含以下属性，可用点号访问：

*  index 当前元素是迭代的第几个元素，从0开始
 *  count 当前元素是迭代的第几个元素，从1开始
 *  size 总的元素个数
 *  current 当前元素（如果是map，则是entity）
 *  odd|even 返回是否第奇|偶数个元素，返回boolean值。odd是奇，even是偶，跟字符数一致。
 *  first|last 是否为第一个|最后一个元素，返回Boolean值

#### `8、th:switch` 、`th:case 相当于java的switch语句` ####

<div th:switch="${role}">
        <p th:case="common">普通用户</p>
        <p th:case="manager">vip</p>
        <p th:case="svip">svip</p>
        
        <p th:case="*">其它</p>
    </div>

#### 9、th:include、th:include、th:replace 页面引入 ####

我们经常需要在一个页面中引入另一个页面，比如引入header.html，引入footer.html。

比如引入templates/footer.html：

<div th:include="@{/footer.html}"></div>
    <div th:insert="@{/footer.html}"></div>
    <div th:replace="@{/footer.html}"></div>
    
    
    <div th:include="@{footer.html}"></div>
    <div th:insert="@{footer.html}"></div>
    <div th:replace="@{footer.html}"></div>
    
    
    <div th:include="@{footer}"></div>
    <div th:insert="@{footer}"></div>
    <div th:replace="@{footer}"></div>

3个指令的使用方法完全相同，不过th:include是把内容、效果包含进来，th:replace是用包含页面的代码替换当前标签。

Thymelead 3.0以后，官方推荐用 th:insert 代替 th:include 。

#### 只包含页面的一部分 ####

有时候只想包含页面的某一部分，比如只包含header.html的nav，

比如把header.html、footer.html、aside.html等集中放在一个commons.html中：

<header th:fragment="header">
        <div>header</div>
    </header>
    
    <footer th:fragment="footer">
        <div>footer</div>
    </footer>
    
    <aside th:fragment="aside">
        <div>aside</div>
    </aside>

引用

<div th:include="commons :: header"></div>
    <div th:insert="commons :: aside"></div>
    <div th:replace="commons :: footer"></div>

如果引用的片段就是本页面中的，可以缺省页面，直接写成 ::片段

#### 可以传递参数 ####

#### 10、th:remove 移除元素 ####

经常需要自动移除元素，比如controller从数据库查询商品，把商品信息传递给html展示出来，

有时候没有满足条件的商品，传递的是null，这时候光秃秃地显示一个表头是不合适的，数据为空时应该自动移除表格|表头，给出提示。

<table th:remove="${goods_list}?none:all">
        
    </table>

th:remove的值可以是：

*  all 移除整个元素
 *  none 不移除什么（显示整个元素）
 *  tag 只移除标签。比如
    
    <table></table>
    
    是移除
    
    <table></table>
    
    这个东西，里面的、、、等标签还在
 *  body 只移除body。、之间的东西叫做body，移除body后，是空壳的
 *  all-but-first 移除所有子元素，只保留第一个子元素

#### 说明 ####

Thymeleaf是在html的基础上扩展的，原型是html，扩展名也是.html，

所有在html可以写的代码，都可以写在Thymeleaf中，

如果不想用Thymeleaf的语法，可以使用html的语法。

## 五、SpringBoot整合jsp ##

### 1、pom依赖 ###

<dependency>
        <groupId>org.apache.tomcat.embed</groupId>
        <artifactId>tomcat-embed-jasper</artifactId>
    </dependency>
    
    <dependency>
        <groupId>jstl</groupId>
        <artifactId>jstl</artifactId>
        <version>1.2</version>
    </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>

### 2、创建config类配置WebMvcConfig配置类 ###

/** * @Create_Author msfh * @Create_Date 2020-11-25 11:02:07 * @Description web配置类 */
    @Configuration
    public class WebMvcConfig implements WebMvcConfigurer { 
        @Override
        public void configureViewResolvers(ViewResolverRegistry registry) { 
            registry.jsp("/jsp/", ".jsp");
        }
    }

### 3、创建NameController控制器 ###

/** * @Create_Author msfh * @Create_Date 2020-11-25 11:05:03 * @Description NameTest */
    @Controller
    public class NameController { 
        @GetMapping("name")
        public String name(Model model) { 
            model.addAttribute("name", "msfh");
            return "name";
        }
    }

### 4、在Idea中配置webapp目录 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70_pic_center 1]

### 5、创建name.jsp文件 ###

<%--
      Created by IntelliJ IDEA.
      User: msfh
      Date: 2020-11-25
      Time: 11:06:04
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
    </head>
    <body>
    ${name}
    </body>
    </html>

[border]: mailto:/@border
[repeat]: mailto:/@repeat
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/ee69e6269a7c47b7bb6fac6b3d529c12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201125111435980.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MDM3MjY0,size_16,color_FFFFFF,t_70#pic_center