Spring boot 集成Thymeleaf

布满荆棘的人生 2022-05-08 06:34 179阅读 0赞

#### 前言 ####

上一篇介绍了Spring Boot中整合Jsp，尽管Spring boot官方并不推荐使用Jsp~

这篇文章将介绍如何整合官方所推荐的Thymeleaf模板引擎

#### 简单了解 ####

首先新建项目，选择模板引擎时，会有四个可以选择

![TJvHDdh.png][]

至于JSP技术Spring Boot官方为什么不推荐的，因为：

我们学习的是 Spring Boot ，如果老是问JSP的问题，其实并不是特别合适，假如出了问题，Spring Boot 团队开发都搞不定，更何况我们作为框架的使用方~

当我们使用上述模板引擎中的任何一个，它们默认的模板配置路径为：src/main/resources/templates。当然也可以修改这个路径，具体如何修改，文章后面会提及

##### 模板引擎依赖 #####

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

#### 项目结构 ####

![eb3NfvZ.png][]  
简单来说

*  domain用于存放实体
 *  app.rest用于存放控制器
 *  server用于处理逻辑
 *  repository用于操作数据库

#### 修改配置文件 ####

一般来说，只要导入了依赖，不需要配置，就能使用thymeleaf，但是会存在些问题

1.  缓存打开还是关闭：缓存的意思是加载一次模板之后便不会在加载了，对于生产环境应该加上缓存，但是在开发过程中如果打开缓存
2.  是否需要HTML5强校验：如果你使用别人的HTML模板，并且模板中很多语法都不严格，这个时候项目就会报错，因此有时候需要关闭强校验

导入依赖

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

application.yml

server:
      port: 8080
    
    spring:
      thymeleaf:
        cache: false
        mode: LEGACYHTML5
        #在构建URL时添加到视图名称前的前缀（默认值：classpath:/templates/）
        prefix: classpath:/templates/

#### 编写相关代码 ####

1、编写controller

import me.zhengjie.domain.User;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.servlet.ModelAndView;
    
    import java.util.ArrayList;
    import java.util.List;
    
    @RestController
    @RequestMapping("user")
    public class UserController {
        
    
        @GetMapping
        public ModelAndView index(Model model){
        
    
            List<User> users = new ArrayList<>();
    
            users.add(new User("小王",12,"男"));
            users.add(new User("小李",13,"女"));
            users.add(new User("小张",14,"男"));
    
            model.addAttribute("users",users);
    
            return new ModelAndView("/index");
        }
    }

2、编写html

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>用户列表</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
    
    <div style="text-align: center;margin:0 auto;width: 1000px; ">
        <h1>用户列表</h1>
        <table width="100%" border="1" cellspacing="1" cellpadding="0">
            <tr>
                <td>用户名</td>
                <td>年龄</td>
                <td>性别</td>
            </tr>
            <tr th:each="user: ${users}">
                <td th:text="${user.username}">用户名</td>
                <td th:text="${user.age}">年龄</td>
                <td th:text="${user.sex}">性别</td>
            </tr>
        </table>
    </div>
    </body>
    </html>

\*\*注：\*\*通过xmlns:th=”[http://www.thymeleaf.org][http_www.thymeleaf.org]“ 命令空间，将静态页面转换为动态的视图，需要进行动态处理的元素将使用“th:”前缀。

#### 启动项目 ####

![qbKIGpR.png][]

#### Thymeleaf一些小知识 ####

##### 变量表达式 #####

##### URL表达式 #####

URL表达式指的是把一个有用的上下文或回话信息添加到URL，这个过程经常被叫做URL重写。

@{/user/index}

URL还可以设置参数：

@{/user/delete(id=${id})}

相对路径：

@{../user/index}

让我们看这些表达式：

##### th如何遍历下拉框 #####

<select name="user">
    <option value="0">无</option>
    <option th:each="u:${users}" th:value="${u.username}">[[${u.username}]]</option>
    </select>

更多的Thymeleaf教程，可自行百度学习，下篇文章将讲解如何使用Jpa对数据库的增删改查

[TJvHDdh.png]: https://i.imgur.com/TJvHDdh.png
[eb3NfvZ.png]: https://i.imgur.com/eb3NfvZ.png
[http_www.thymeleaf.org]: http://www.thymeleaf.org
[qbKIGpR.png]: https://i.imgur.com/qbKIGpR.png