【微服务架构 - 07 - Spring Boot】04 Spring Boot 整合 Thymeleaf

忘是亡心i 2022-03-22 08:42 213阅读 0赞

## 引入依赖 ##

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

增加 nekohtml 依赖

*  nekohtml：允许使用非严格的 HTML 语法

完整 `pom.xml` 如下:

<?xml version="1.0" encoding="UTF-8"?>
 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <parent>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-parent</artifactId>
 <version>2.1.2.RELEASE</version>
 <relativePath/> 
 </parent>
 <groupId>com.yuu</groupId>
 <artifactId>hello-spring-boot-thymeleaf</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <name>hello-spring-boot-thymeleaf</name>
 <description></description>
 
 <properties>
 <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>net.sourceforge.nekohtml</groupId>
 <artifactId>nekohtml</artifactId>
 <version>1.9.22</version>
 </dependency>
 </dependencies>
 
 <build>
 <plugins>
 <plugin>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-maven-plugin</artifactId>
 </plugin>
 </plugins>
 </build>
 
 </project>

## 在 application.yml 中配置 Thymeleaf ##

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

spring:
      thymeleaf:
        cache: false # 开发时关闭缓存，不然没法看到实时页面
        mode: HTML # 用非严格的 HTML
        encoding: UTF-8
        servlet: 
          content-type: text/html

## 创建测试用 JavaBean ##

创建一个测试效果的 JavaBean，简单封装一下 即可

package com.yuu.hello.spring.boot.thymeleaf.entity;
    
    import java.io.Serializable;
    
    /**
     * @Classname User
     * @Date 2019/1/27 13:33
     * @Created by Yuu
     */
    public class User implements Serializable {
    
        private String name;
        private Integer age;
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public Integer getAge() {
            return age;
        }
    
        public void setAge(Integer age) {
            this.age = age;
        }
    }

## 创建测试用 Controller ##

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

创建一个 Controller，造一些测试数据并设置跳转

package com.yuu.hello.spring.boot.thymeleaf.controller;
    
    import com.yuu.hello.spring.boot.thymeleaf.entity.User;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    
    /**
     * @Classname IndexController
     * @Date 2019/1/27 13:41
     * @Created by Yuu
     */
    @Controller
    public class IndexController {
    
        @RequestMapping(value = {"", "index"}, method = RequestMethod.GET)
        public String index(Model model) {
            User user = new User();
    
            user.setName("Yuu");
            user.setAge(21);
    
            model.addAttribute("user", user);
    
            return "index";
        }
    }

## 创建测试页面 ##

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

在 `templates` 目录下创建 `index.html` 文件，代码如下：

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
 <head>
 <meta charset="UTF-8">
 <title>Title</title>
 </head>
 <body>
 姓名: 张三 
 年龄: 18
 </body>
 </html>

修改 html 标签用于引入 thymeleaf 引擎，这样才可以在其他标签里使用 `th:*` 语法，  
声明如下：

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

## 测试访问 ##

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

启动成功后，访问： [http://lcoalhost:8080/index][http_lcoalhost_8080_index] 即可看到效果

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

[http_lcoalhost_8080_index]: http://lcoalhost:8080/index
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTgxMjgy_size_16_color_FFFFFF_t_70]: /images/20220322/cf8ec6b3b3234bc3bf2ddba398b31c6f.png