thymeleaf js文件

Thymeleaf 是一个用于Web开发的服务器端Java模板引擎，它可以处理HTML、XML、JavaScript、CSS甚至纯文本。Thymeleaf 允许开发者以自然模板的方式创建模板，这意味着模板在浏览器中也可以直接打开并正确显示，而不需要服务器端的处理。

基础概念

Thymeleaf 主要通过在HTML标签中添加特定的属性（以th:开头）来实现模板逻辑。例如，th:text用于设置元素的文本内容，th:if用于条件判断，th:each用于循环等。

优势

自然模板：Thymeleaf 模板在浏览器中可以直接打开，便于前端开发和设计。
表达式语言：提供了丰富的表达式语言，可以方便地进行数据绑定和逻辑处理。
易于集成：可以很容易地与Spring框架集成，适合构建Spring MVC应用。
灵活性：支持多种模板模式，包括HTML、XML、TEXT等。

类型

Thymeleaf 主要有两种模板模式：

HTML模板：用于生成HTML页面。
TEXT模板：用于生成纯文本输出。

应用场景

Web应用：Thymeleaf 广泛应用于Java Web开发，尤其是Spring Boot项目中。
邮件模板：可以用来生成动态内容的电子邮件。
报告生成：可以用来生成PDF或其他格式的报告。

在JavaScript文件中使用Thymeleaf

虽然Thymeleaf 主要用于服务器端模板渲染，但它也可以在客户端JavaScript中使用。通常，你会在HTML文件中嵌入JavaScript，并使用Thymeleaf 表达式来传递数据给JavaScript。

示例代码

假设我们有一个简单的Spring Boot应用，我们想在JavaScript中使用Thymeleaf 来显示当前用户的用户名。

HTML (index.html):

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf in JS Example</title>
    <script th:inline="javascript">
        /*<![CDATA[*/
        var username = [[${user.name}]];
        window.onload = function() {
            document.getElementById('usernameDisplay').innerText = username;
        };
        /*]]>*/
    </script>
</head>
<body>
    <h1>Welcome, <span id="usernameDisplay"></span>!</h1>
</body>
</html>

Controller (HomeController.java):

@Controller
public class HomeController {

    @GetMapping("/")
    public String index(Model model) {
        User user = new User("JohnDoe"); // 假设这是从数据库获取的用户
        model.addAttribute("user", user);
        return "index";
    }
}

User类 (User.java):

public class User {
    private String name;

    public User(String name) {
        this.name = name;
    }

    // Getter and Setter
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

在这个例子中，[[${user.name}]]是一个Thymeleaf 表达式，它在服务器端被解析为用户对象的name属性值，并将其作为JavaScript变量username的值。当页面加载完成后，JavaScript会将这个值设置到页面上的一个元素中。