Thymeleaf 中如何引入 js

技术文摘

2025-01-09 15:41:46 小编

Thymeleaf 中如何引入 js

在Web开发中，Thymeleaf是一款非常流行的模板引擎，它与Spring框架集成紧密，为开发者提供了便捷的页面渲染和数据绑定功能。在Thymeleaf模板中引入JavaScript（js）文件是常见的需求，下面将详细介绍几种常见的方法。

直接引入外部js文件

最常见的方式是在HTML页面中使用<script>标签直接引入外部的js文件。在Thymeleaf中，操作与普通HTML类似。假设我们有一个名为main.js的js文件存放在static/js目录下（这是Spring Boot项目的默认静态资源目录结构），可以在Thymeleaf模板文件中这样引入：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf引入js示例</title>
    <script th:src="@{/js/main.js}"></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

这里的th:src属性是Thymeleaf的特殊属性，@{/js/main.js}表示根据项目的上下文路径来定位js文件的位置。

内联JavaScript代码

有时候，我们可能只需要在页面中嵌入少量的JavaScript代码，这时可以使用内联的方式。例如：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf内联js示例</title>
</head>
<body>
    <button onclick="alert('Hello Thymeleaf!')">点击我</button>
</body>
</html>

在上述代码中，onclick属性中的JavaScript代码会在按钮被点击时执行。

注意事项

确保js文件的路径正确，特别是在使用相对路径时要注意文件的实际位置。
注意js代码的加载顺序，有些js代码可能依赖于其他js文件或页面元素的加载完成，因此需要合理安排<script>标签的位置。

通过以上方法，我们可以在Thymeleaf中顺利地引入js文件或编写内联js代码，从而实现丰富的前端交互功能。在实际开发中，根据项目的需求和结构选择合适的引入方式，能够提高开发效率和代码的可维护性。

TAGS: Thymeleaf js引入 Thymeleaf与js Thymeleaf配置js

万千站长工具

技术文摘