ccran 的个人博客 ccran 的个人博客

记录精彩的程序人生

目录
SpringBoot之Thymeleaf
/    

SpringBoot之Thymeleaf

SpringBoot之Thymeleaf

虽然目前Web项目大多前后端分离了,前端通过后端提供Restful接口协作完成任务。

但是,还是存在许多无需分离的项目,后端写写JS就能完成任务。

比如说:我们需要一个表格来展示用户的信息,就可以使用常用的表格控件bootstrapTable,后端提供接口做成bootstrapTable所需要的格式就行。

又或者说:前端要展示用户的详细信息,只需要简单的textview就行,这时候只需要简单赋值,模板引擎就可以登场了。

1. 简介

网上介绍很多,就不多说了,附上Thymeleaf官网

而模板引擎很多,为什么选择它呢,因为SpringBoot官方推荐。

而本篇博客说Thymeleaf的主要原因是最近项目中用到了Ruoyi框架,并且在其中看到了非常有意思的代码,所以决定记录下来。

其实就用法上和jsp差不多,模板引擎做的事,就是将我们控制器里面的model数据填充到页面上而已。

2. demo

简单演示一下Thymeleaf的使用:

  1. Thymeleaf访问Controller中设置好的数据
  2. Thymeleaf内置对象的使用
  3. Thymeleaf调用Bean(很有意思的代码)

环境:

  • SpringBoot 2.2.1.RELEASE
  • IDEA

2.1 pom文件

<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
  • 引入依赖后通过SpringBoot的"约定优于配置"理念就能使用Thymeleaf了
  • 其实是ThymeleafAutoConfiguration帮我们做的

2.2 java文件

IndexController.java

package com.ccran.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.Date;
import java.util.Map;

@Controller
public class IndexController {
    @GetMapping("/")
    public String index(Map map) {
        map.put("name", "ccran");
        map.put("birth", new Date());
        return "index";
    }
}
  • 放入name与birth数据
  • 视图定位到resources/templates/index.html

CalcService.java

package com.ccran.demo.service;
import org.springframework.stereotype.Service;
@Service
public class CalcService {
    public int add(int a, int b) {
        return a + b;
    }
}
  • 简单的加法Service,返回a+b的结果

2.3 html文件

在resources文件夹=>templates文件夹=>建立index.html文件

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<!--访问属性-->
<h1 th:text="${name}">hello,world</h1>
<!--内置对象-->
<div th:text="${#dates.format(birth, 'yyyy年MM月dd日 HH:mm')}">birth</div>
<!--调用bean-->
<div>1+1=<span th:text="${@calcService.add(1,1)}">?</span></div>
</body>
</html>
  • 访问Controller中设置的name数据
  • 通过内置对象dates格式化birth数据
  • 调用calcService对象的add方法

2.4 结果

Thymeleaf.png

3. 总结

  1. 可以看到我们的前端文件是HTML,可以直接调整样式或者JS逻辑,而不像JSP那样严重依赖于我们的Servlet容器才能调试。
  2. Thymeleaf很多内置对象方便我们使用。

标题:SpringBoot之Thymeleaf
作者:ccran
地址:https://ccran.online/articles/2019/12/13/1576248297484.html