springBoot整合thymeleaf(超简单)

codeSniping

已于 2022-04-20 19:01:09 修改

阅读量2.1w

点赞数 13

文章标签： java html spring boot

于 2022-04-16 17:03:02 首次发布

本文链接：https://blog.csdn.net/baobei_ll/article/details/124213027

版权

本文介绍了如何在SpringBoot项目中集成Thymeleaf模板引擎，包括添加依赖、配置、创建HTML文件、编写控制器接口以及展示后端数据的方法。适合初学者学习和个人项目使用。详细步骤包括pom.xml添加依赖、配置properties文件、创建HTML模板、编写控制器并演示了如何在后台传递数据到前端展示。

摘要由CSDN通过智能技术生成

Thymeleaf是一款现代的服务器端 Java 模板引擎，可以轻松与SpringMvc、springBoot等web框架进行集成，适用于 Web 和独立环境开发。与jsp、Velocity、FreeMaker功能类似，thymeleaf可以通过thymeleaf标签渲染处理数据用以展示给用户。

目前团队项目基本都是前后端分离模式，但thymeleaf对于行业初学者学习或个人承接项目使用都还是个不错的选择。

前期文章已经介绍springBoot项目的创建过程，此处不再赘述。

传送门：eclipse创建springBoot项目详细教程

springBoot整合thymeleaf步骤：

第一步：pom文件引入thymeleaf依赖

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

第二步：properties或yml文件添加配置

#html存放的具体路径，可进行自定义，示例：resources/templates
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
spring.thymeleaf.suffix=.html
spring.thymeleaf.servlet.content-type=text/html

第三步：在templates目录下添加html文件，示例：templates/demo/demoHtm.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo HTML</title>
</head>
<body>
Hello World!
</body>
</html>

第四步：添加控制器接口

@Controller
public class DemoController {
	@RequestMapping("/getDemoHtml")
	public String getDemoHtml(){
        //此处是需要展示的html在templates下的具体路径
		return "demo/demoHtm";
	}
}

PS：此处需要注意return的路径写法，最前面是没有斜线(/)的，不然可能会出现本地运行正常，但部署到Linux出现404无法访问的情况。

第五步：浏览器请求测试

到此，springBoot整合thymeleaf的过程就算结束了。

展示后端数据库数据，常用的基本有两种方式：

1.在控制器代码中增加返回数据、html文件使用thymeleaf标签展示即可。

2.上述步骤结构不变，html使用jquery调取API数据接口获取数据后通过jquery语法赋值(此种方式不必使用thymeleaf标签)。

以第一种方式为例：

后端修改后：

@Controller
public class DemoController {
	@RequestMapping("/getDemoHtml")
    //返回数据有多种方式，以下只是其中一种
	public String getDemoHtml(Model model){
		HashMap<String,Object> reMap=new HashMap<>();
		reMap.put("userName", "张三");
		reMap.put("userAge", 20);
		model.addAllAttributes(reMap);
		return "demo/demoHtm";
	}
}

前端修改后：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo HTML</title>
</head>
<body>
<span th:text="${userName}"></span>
<span th:text="${userAge}"></span>
</body>
</html>

浏览器请求测试：

超详细的springBoot前后端完整案例：

springBoot整合myBatis详细前后端项目实例

以上，喜欢请点个赞吧~

codeSniping

关注

13
点赞
踩
72

收藏

觉得还不错? 一键收藏
打赏
0
评论
springBoot整合thymeleaf(超简单)

springBoot整合thymeleaf：Thymeleaf是一款现代的服务器端 Java 模板引擎，可以轻松与SpringMvc、springBoot等web框架进行集成，适用于 Web 和独立环境开发。
复制链接

扫一扫