Springboot thymeleaf

参考文档

https://www.cnblogs.com/msi-chen/p/10974009.html#_label1_0

一、准备工作

1、导包或创建项目时勾选

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
</dependency>

2、创建配置类

目的：访问静态资源　　新建config文件夹

package com.wt.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;

@Configuration
public class WebStaticConfig extends WebMvcConfigurationSupport {
    @Override
    protected void addResourceHandlers(ResourceHandlerRegistry registry) {
        super.addResourceHandlers(registry);
        // 访问 http://localhost:8085/static/jquery-3.3.1.js 即访问 classpath: /static/jquery-3.3.1.js
        registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
    }
}

3、将静态资源(bootstrap)放到static文件夹下

4、HTML文件引入约束

xmlns:th="http://www.thymeleaf.org"

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

二、常用语法

1、导入CSS和JS

<link rel="stylesheet" th:href="@{/static/bootstrap/css/bootstrap.min.css}" >
<script th:src="@{static/jquery-3.3.1.js}"></script>
<script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>

2、组件复用(fragment)

a、组件

 1     <nav class="navbar navbar-inverse" th:fragment="my-top">
 2         <div class="container-fluid">
 3             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 4                 <ul class="nav navbar-nav">
 5                     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
 6                     <li><a href="#">Link</a></li>
 7                 </ul>
 8                 <ul class="nav navbar-nav navbar-right">
 9                     <li><a href="#">Link</a></li>
10                     <li class="dropdown">
11                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
12                         <ul class="dropdown-menu">
13                             <li><a href="#">Action</a></li>
14                         </ul>
15                     </li>
16                 </ul>
17             </div><!-- /.navbar-collapse -->
18         </div><!-- /.container-fluid -->
19     </nav>

nav