SpringBoot整合模板引擎Thymeleaf

SpringBoot 对静态资源的映射规则

所有 /webjars/**的请求 ,都去 classpath:/META-INF/resources/webjars/ 找资源;

resources->webjars引入静态资源

http://www.webjars.org/

<!--引入jquery-webjar-->在访问的时候只需要写webjars下面资源的名称即可
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.3.1</version>
</dependency>

所有"/**" 请求,会去以下文件夹查找:

  • "classpath:/META-INF/resources/"
  • "classpath:/resources/"
  • "classpath:/static/"
  • "classpath:/public/"
  • "/":当前项目的根路径

Thymeleaf

Thymeleaf是一个XML/XHTML/HTML5模板引擎,可用于Web与非Web环境中的应用开发。它是一个开源的Java库,基于Apache License 2.0许可,由Daniel Fernández创建,该作者还是Java加密库Jasypt的作者。

Thymeleaf是SpringBoot官方推荐使用的模板引擎。

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

springboot相关配置

#thymeleaf start
spring:
    thymeleaf:
        mode: HTML5
        encoding: UTF-8
        # 开发时关闭缓存,不然没办法实现热刷新
        cache: false
        # prefix和suffix都是默认的,可不用配置
        prefix: classpath:/templates/ # 模版存放路径
        suffix: .html # 模版后缀
        servlet:
            content-type: text/html
#thymeleaf end

简单案例

创建springboot工程,配置如上所示

/template下新建demo1.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>thymeleaf入门案例</title>
</head>
<body>
    <div th:text="${message}"></div>
</body>
</html>

新建controller类com.rhett.controller.TestController

@Controller
public class TestController {
    @GetMapping("/hello")
    public String hello(Model model){
        model.addAttribute("message","hello thymeleaf!");
        return "demo1";
    }
}

启动程序,访问/hello资源,看到页面正确输出。

基本语法

Thymeleaf语法可以参考 https://www.cnblogs.com/itdragon/archive/2018/04/13/8724291.html

基本语法就是在html标签中使用th:**属性,里面使用表达式。

表达式

Variable Expressions: ${...}

Selection Variable Expressions: *{...}

Message Expressions: #{...}

Link URL Expressions: @{...}

Fragment Expressions: ~{...}

th:action

定义后台控制器路径,类似

<

form>标签的action属性。

<form id="login-form" th:action="@{/test/hello}">
    <button>提交</button>
</form>

表示提交的请求地址为/test/hello

th:each

对象遍历,功能类似jstl中的<c:forEach>标签。

实体类:

public class User {
    private Integer id;
    private String name;
    private String address;
    //..get..set
}

Controller添加数据

/***
 * 访问/test/hello  跳转到demo1页面
 * @param model
 * @return
 */
@RequestMapping("/hello")
public String hello(Model model){
    model.addAttribute("hello","hello welcome");

    //集合数据
    List<User> users = new ArrayList<User>();
    users.add(new User(1,"张三","深圳"));
    users.add(new User(2,"李四","北京"));
    users.add(new User(3,"王五","武汉"));
    model.addAttribute("users",users);
    return "demo1";
}

thymeleaf页面:

<table>
    <tr>
        <td>下标</td>
        <td>编号</td>
        <td>姓名</td>
        <td>住址</td>
    </tr>
    <tr th:each="user,userStat:{users}">
        <td>
            下标:<span th:text="{userStat.index}"></span>,
        </td>
        <td th:text="{user.id}"></td>
        <td th:text="{user.name}"></td>
        <td th:text="${user.address}"></td>
    </tr>
</table>

其中user代表当前遍历到的对象,userStat存储了一些遍历的相关信息,例如当前下标。

th:each还可用于遍历Map、数组。

th:if

后台添加年龄

//if条件
model.addAttribute("age",22);

页面输出

<div>
    <span th:if="${(age>=18)}">终于长大了!</span>
</div>

Date输出

后台添加日期

//日期
model.addAttribute("now",new Date());

页面输出

<div>
    <span th:text="${#dates.format(now,'yyyy-MM-dd hh:ss:mm')}"></span>
</div>

原创文章,作者:彭晨涛,如若转载,请注明出处:https://www.codetool.top/article/springboot%e6%95%b4%e5%90%88%e6%a8%a1%e6%9d%bf%e5%bc%95%e6%93%8ethymeleaf/

发表评论

电子邮件地址不会被公开。