Spring Boot 8-SpringBoot Web Thymeleaf模板引擎

最新推荐文章于 2025-06-18 16:06:49 发布

转载最新推荐文章于 2025-06-18 16:06:49 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zengpingtang/p/10809138.html

文章标签：

#java #javascript #测试 #ViewUI

博客展示了Java的Spring Boot依赖配置，以及HTML页面结合Thymeleaf模板引擎的代码。页面中引用了CSS和JavaScript文件，还包含JavaScript内联代码用于输出信息。整体涉及Java后端和JavaScript前端的代码示例。

1、springboot的对web的开发支持。

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

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


springboot支持大量模板引擎（Thymeleaf、FreeMaker、Velocity、Groovy、Mustache）。
springboot建议使用这些模板引擎，避免使用jsp（springboot有的功能jsp无法支持）。
其中在SpringBoot中Thymeleaf可以完全替代jsp，作为mvc的web应用的view层。

下面介绍一下Thymeleaf的使用：
2、thymeleaf的引入。
2.1、命名空间xmlns:th="http://www.thymeleaf.org，要进行动态处理的元素以th开头。
2.2、通过@{}引用web静态资源。
2.3、通过${}访问model下的属性。
2.4、js取model值[[${}]]，th:inline="javascript"
2.5、遍历集合th:each="infos:${list}"

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<link th:src="@{css/bootstrap.min.css}" rel="stylesheet">
<title>Insert title here</title>
</head>
<body>
<h1 th:text="${mymodel.title}"></h1>
<ul th:each="infos:${list}" class="list-group">
　　<li th:text="${infos}" class="list-group-item"></li>
</ul>
<script type="text/javascript" th:src="@{js/jquery-3.3.1.slim.min.js}"></script>
<script type="text/javascript" th:src="@{js/bootstrap.min.js}"></script>
</body>
<script th:inline="javascript">
　　var myinfo = [[${mymodel.title}]];
　　console.log(myinfo);
</script>
</html>

3、springboot配置文件配置thymeleaf（cache默认true，开发时请关闭）
对应properties类ThymeleafProperties.java

spring:
  thymeleaf:
    cache: false
    prefix: classpath:/templates/
    suffix: .html
    encoding: UTF-8
    mode: HTML5

转载于:https://www.cnblogs.com/zengpingtang/p/10809138.html