thymeleaf模板配置

最新推荐文章于 2025-06-09 21:27:45 发布

原创最新推荐文章于 2025-06-09 21:27:45 发布 · 424 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在Spring Boot项目中整合Thymeleaf模板引擎，包括依赖导入、配置、Controller设置及页面展示数据的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导入依赖

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

applocation.yml进行模板配置

spring:
  thymeleaf:
    cache: false
    #默认配置
	#prefix: classpath:/templates/
	#check-template-location: true
	#suffix: .html
	#encoding: utf-8
	#mode: HTML5

Controller文件引用@Controller注解

    @RequestMapping("/test")
    public String test(Model model){
        User u = userService.getUserInfo(1);
        model.addAttribute("msg",u);
        return "login";
    }

<script th:inline="javascript">
    var msg = [[${msg}]]
    console.log(msg)
</script>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>个人详情页</title>
</head>
<body>
<div class="container">
    <div class="starter-template">
        <h2>个人信息</h2>
        <div class="form-group">
            <label>姓名</label>
            <input type="text" class="form-control" th:value="${msg.userName}" disabled/>
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="text" class="form-control" th:value="${msg.passWord}" disabled/>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    var msg = [[${msg}]]
    console.log(msg)
</script>
</html>
<style type="text/css">
    body {
        padding-top: 15%;
        padding-left: 40%;
    }

    .starter-template {
        width: 200px;
        padding: 40px 15px;
        text-align: center;
        border: solid 1px #0f0f0f;
    }
</style>