如何在SpringBoot中使用thymeleaf引入js文件

时间: 2024-05-19 09:12:27 浏览: 155

SpringBoot2整合thymeleaf3及thymeleaf3语法.md

## springboot整合thymeleaf ### 1. 导入起步依赖 ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> ``` ### 2. 更改引入版本 ```xml <properties> <springboot-thymeleaf.version>3.0.2.RELEASE</springboot-thymeleaf.version> <thymeleaf-layout-dialect.version>2.1.1</thymeleaf-layout-dialect.version> </properties> ``` > 1. springboot自带的thymeleaf依赖为2.1.3版本，使用thymeleaf-layout-dialect版本为2以下版本。 > 2. 使用3或3以上的thymeleaf时，需要thymeleaf-layout-dialect的版本为2或以上。 > 3. 锁定thymeleaf版本时不能使用thymeleaf.version标签，会和springboot内部的依赖标签冲突。应当使用springboot-thymeleaf.version标签来锁定版本。 ### 3. 配置文件配置 ```properties spring.thymeleaf.prefix=classpath:/templates/ spring.thymeleaf.check-template-location=true spring.thymeleaf.suffix=.html spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.content-type=text/html spring.thymeleaf.mode=HTML spring.thymeleaf.cache=false ``` > spring.thymeleaf.cache为缓存，需要热部署时，需要设置为false ## 语法 ### 1. 替换标签体内容 ```html  <div th:text="${Hello}">显示欢迎</div>  <div th:utext="${Hello}">显示欢迎</div> ``` ### 2. 替换属性 ```html <div id="div01" th:id="${Hello}" th:class="${Hello}" th:text="${Hello}">显示欢迎</div> <div style="background-color: yellow" th:style="'background-color:green'"></div> ``` ### 3. 在表达式中访问属性域 ```html <h3>访问属性域</h3> <p th:text="${attrRequestScope}">访问请求域方式一</p> <br> <p th:text="${#httpServletRequest.getAttribute('attrRequestScope')}">访问请求域方式二</p><br/> <h3>访问Session域</h3> <p th:text="${session.atttrSessionScope}">访Session域方式一</p><br/> <p th:text="${application.attrAppSocpe}">访问Application域方式一</p> ``` ### 4. 解析url地址 ```html <h3>解析URL地址，获取ContextPath的值</h3> <p th:text="@{/success}">@{}是把ContextPath的值附加到指定的地址前</p> <a th:href="@{/test}">@{}是把ContextPath的值附加到指定的地址前</a> ``` ### 5. 直接执行表达式 ```html <h3>直接执行表达式</h3> <p>无转义效果 : [[${attrRequestScope}]] </p> <p>有转义效果 : [(${attrRequestScope})] </p> ``` ### 6. 分支与迭代 #### 1. if 判断 ```html <h3>if判断字符串是否为空</h3> <p th:if="${not #strings.isEmpty(attrRequestScope)}">attrRequestScope不为空显示</p> ~~~<p th:if="${#strings.isEmpty(attrRequestScope)}">attrRequestScope为空显示</p>~~~~ ``` #### 2. 测试循环 ```html <h3>测试循环</h3> <div> <p th:text="${str}" th:each="str :${list}"></p> </div> ``` > 1. 使用th:each进行集合数据迭代 > 2. th:each="声明变量:${集合}" > 3. th:each 用在哪个标签上，哪个标签就会出现多次 ### 7. 引入外部代码 1. 要被引入的代码 include/part.html ```html <html xmlns:th="http://www.thymeleaf.org"> <div th:fragment="myFirstPart"> <p> 被包含的内容1111 </p> </div> <div th:fragment="mySecondPart"> <p> 被包含的内容2222 </p> </div> <div th:fragment="myThirdPart"> <p> 被包含的内容3333 </p> </div> ``` 2. 需要引入的页面 ```html <div th:insert="~{include/part :: myFirstPart }"></div> <div th:replace="~{include/part :: mySecondPart }" style="background-color: yellow"></div> <div th:include="~{include/part ::myThirdPart }" style="background-color: red"></div> ``` 3. 渲染后的页面源码 ```html <div> <div> <p> 被包含的内容1111 </p> </div> </div> <div> <p> 被包含的内容2222 </p> </div> <div style="background-color: red"> <p> 被包含的内容3333 </p> </div> ``` > 1. " :: "左边的值拼前后缀后必须能够找到要包含的文件。 > 2. " :: " 右边的值是代码片段的名字，就是th:fragment的值。 > 3. insert将代码原样引入。 > 4. replace使用被引入的代码和属性替换原有的。 > 5. include使用被引入的代码div内部的代码。

在 SpringBoot 中使用 Thymeleaf 引入 JS 文件的步骤如下： 1. 将 JS 文件放置在 SpringBoot 项目的指定目录下，一般情况下是在 static 目录下。 2. 在 HTML 模板中使用 Thymeleaf 语法引入 JS 文件，语法如下： <script type="text/javascript" src="/js/xxx.js"></script> 其中，/js/xxx.js 是 JS 文件的访问路径。注意，Thymeleaf 的语法是在 HTML 中使用，因此 JS 文件引入语句需要放置在 <body> 标签中。 3. 保存 HTML 模板，重新启动 SpringBoot 项目即可。希望这个回答可以帮到你。

阅读全文

如何在SpringBoot中使用thymeleaf引入js文件

相关推荐

SpringBoot整合Thymeleaf详解

基于SpringBoot+Thymeleaf的图书管理系统开发教程

SpringBoot中的Thymeleaf用法

springboot如何使用thymeleaf模板访问html页面

springboot2.7.15+thymeleaf 代码

springboot-thymeleaf

springboot与thymeleaf

springboot + thymeleaf配置

springboot整合thymeleaf完整例子

springboot.zip+springboot使用+spring thymeleaf+semantic UI使用+spring data jpa

springboot-thymeleaf素材.rar

springboot thymeleaf静态css、js文件导入失败

springboot 使用thymeleaf 局部刷新页面怎么实现？

idea+Springboot+thymeleaf+实例

SpringBoot和Thymeleaf搭建的个人博客项目

springboot整合thymeleaf实现滑块功能完整源码

springboot+thymeleaf简易增删改查

SpringBoot+Thymeleaf超市管理系统开发实践

springboot+thymeleaf实现富文本编辑器

最新推荐

SpringBoot页面跳转访问css、js等静态资源引用无效解决.docx

详解Spring Boot 目录文件结构

springboot整合jquery和bootstrap框架过程图解

springmvc转为springboot--干货.docx

给你一个jingqsdfgnvsdljk

正整数数组验证库：确保值符合正整数规则

管理建模和仿真的文件

【损失函数与随机梯度下降】：探索学习率对损失函数的影响，实现高效模型训练

在ADS软件中，如何选择并优化低噪声放大器的直流工作点以实现最佳性能？

系统移植工具集：镜像、工具链及其他必备软件包