thymeleaf中js怎么写

在Thymeleaf中编写JavaScript的最佳实践包括：直接嵌入、外部文件引用、动态数据绑定、数据格式化

Thymeleaf是一种用于模板引擎的Java库，通常与Spring框架结合使用。在Thymeleaf模板中编写JavaScript，可以直接嵌入JavaScript代码、引用外部JavaScript文件、动态绑定数据。例如，直接在HTML模板中嵌入JavaScript代码。直接嵌入适用于页面特定的脚本逻辑或者动态绑定数据的场景。

一、直接嵌入JavaScript代码

直接在Thymeleaf模板中嵌入JavaScript代码是最简单的方法，适用于页面特定的脚本逻辑。可以在HTML的<script>标签中编写JavaScript代码。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf with JavaScript</title>
</head>
<body>
    <h1>Welcome to Thymeleaf</h1>
    <script type="text/javascript">
        console.log('This is a JavaScript code embedded in Thymeleaf template');
    </script>
</body>
</html>

在这种方式中，JavaScript代码直接写在Thymeleaf模板的HTML文件中，适用于简单的脚本和页面逻辑。

二、引用外部JavaScript文件

引用外部JavaScript文件是更为常见和推荐的做法，因为它可以保持HTML文件的简洁和代码的可维护性。可以在Thymeleaf模板中使用<script>标签引用外部JavaScript文件。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf with External JavaScript</title>
    <script type="text/javascript" th:src="@{/js/myScript.js}"></script>
</head>
<body>
    <h1>Welcome to Thymeleaf</h1>
</body>
</html>

在这种方式中，JavaScript文件被放置在项目的静态资源目录中，如/src/main/resources/static/js/。这种方式可以保持HTML文件的简洁和代码的可维护性。

三、动态绑定数据

Thymeleaf允许在JavaScript代码中动态绑定数据，这在需要将服务器端的数据传递到客户端时非常有用。可以使用Thymeleaf的表达式语言在JavaScript代码中插入变量。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf with Dynamic Data</title>
</head>
<body>
    <h1>Welcome to Thymeleaf</h1>
    <script type="text/javascript">
        var userName = /*[[${user.name}]]*/ 'defaultName';
        console.log('User Name: ' + userName);
    </script>
</body>
</html>

在这种方式中，user.name是从服务器端传递过来的变量，可以在JavaScript中使用。Thymeleaf的表达式会在渲染页面时被解析并替换为实际的值。

四、数据格式化

在Thymeleaf中，可以使用JavaScript对数据进行格式化，例如日期和数字的格式化。可以使用JavaScript的内置函数或第三方库（如Moment.js）进行数据格式化。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf with Data Formatting</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
    <h1>Welcome to Thymeleaf</h1>
    <script type="text/javascript">
        var date = /*[[${date}]]*/ '2023-01-01';
        var formattedDate = moment(date).format('MMMM Do YYYY');
        console.log('Formatted Date: ' + formattedDate);
    </script>
</body>
</html>

在这种方式中，使用了Moment.js库来格式化日期。Thymeleaf的表达式会在渲染页面时被解析并替换为实际的值。

五、条件渲染和循环

在Thymeleaf中，还可以在JavaScript代码中使用条件渲染和循环。可以使用Thymeleaf的表达式和属性来控制JavaScript代码的执行。

条件渲染

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf with Conditional Rendering</title>
</head>
<body>
    <h1>Welcome to Thymeleaf</h1>
    <script type="text/javascript">
        /* th:if="${user.isLoggedIn}" */
        console.log('User is logged in');
        /* /th:if */
        /* th:if="${!user.isLoggedIn}" */
        console.log('User is not logged in');
        /* /th:if */
    </script>
</body>
</html>

循环

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf with Loop</title>
</head>
<body>
    <h1>Welcome to Thymeleaf</h1>
    <script type="text/javascript">
        /* th:each="item : ${items}" */
        console.log('Item: /*[[${item}]]*/');
        /* /th:each */
    </script>
</body>
</html>

在这些示例中，使用了Thymeleaf的条件和循环表达式来控制JavaScript代码的执行。这在需要根据服务器端的数据动态生成JavaScript代码时非常有用。

六、与Spring Boot集成

Thymeleaf通常与Spring Boot结合使用，可以在Spring Boot项目中轻松集成Thymeleaf模板和JavaScript代码。以下是一个简单的Spring Boot项目示例：

创建Spring Boot项目

首先，创建一个Spring Boot项目，并添加Thymeleaf依赖：

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

创建控制器

创建一个简单的控制器，向视图传递数据：

package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class DemoController {
    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("user", new User("John Doe", true));
        model.addAttribute("date", "2023-01-01");
        return "hello";
    }
}

创建Thymeleaf模板

创建一个Thymeleaf模板文件hello.html：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf with Spring Boot</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
    <h1>Welcome to Thymeleaf</h1>
    <script type="text/javascript">
        var userName = /*[[${user.name}]]*/ 'defaultName';
        var date = /*[[${date}]]*/ '2023-01-01';
        var formattedDate = moment(date).format('MMMM Do YYYY');
        console.log('User Name: ' + userName);
        console.log('Formatted Date: ' + formattedDate);
        /* th:if="${user.isLoggedIn}" */
        console.log('User is logged in');
        /* /th:if */
        /* th:if="${!user.isLoggedIn}" */
        console.log('User is not logged in');
        /* /th:if */
    </script>
</body>
</html>

运行项目

运行Spring Boot项目，访问http://localhost:8080/hello，可以在浏览器的开发者工具中查看JavaScript代码的执行结果。

七、使用项目管理系统

在实际开发中，项目团队通常会使用项目管理系统来协作和管理任务。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。这些工具可以帮助团队更好地管理项目进度、分配任务和协作开发。

PingCode

PingCode是一款专为研发团队设计的项目管理系统，提供了丰富的功能，如需求管理、任务跟踪、缺陷管理等。使用PingCode可以提高团队的工作效率和项目管理的透明度。

Worktile

Worktile是一款通用的项目协作软件，适用于各种类型的团队和项目。它提供了任务管理、文档协作、即时通讯等功能，帮助团队成员更好地协同工作。

总结

在Thymeleaf中编写JavaScript的最佳实践包括直接嵌入JavaScript代码、引用外部JavaScript文件、动态绑定数据、数据格式化、条件渲染和循环等。与Spring Boot结合使用时，可以轻松集成Thymeleaf模板和JavaScript代码。此外，使用项目管理系统如PingCode和Worktile可以帮助团队更好地管理项目和协作开发。通过这些方法，可以在Thymeleaf模板中编写高效、可维护的JavaScript代码，提高开发效率和项目质量。