thymeleaf-引用静态资源路径,热部署

Spring boot官方推荐使用Thymeleaf,挺方便的

前后端分离开发,JSP不利于前端开发,毕竟不能像HTML一样可以用浏览器预览

而Thymeleaf是HTML页面,前端写好了,后端直接拿来用即可

只要会EL表达式,Thymeleaf也是差不多的

引入Thymeleaf依赖

1
2
3
4
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

上面依赖里包含有spring-boot-starter-web,所以可以去掉此依赖,保持Maven清洁

添加配置

添加到 application.properties

1
2
3
4
5
6
7
8
9
10
11
#thymeleaf start
#默认严格检查
#spring.thymeleaf.mode=HTML5

#非严格检查
spring.thymeleaf.mode=LEGACYHTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.content-type=text/html
#开发时关闭缓存,不然没法看到实时页面
spring.thymeleaf.cache=false
#thymeleaf end

关于严格检查和非严格检查

严格检查HTML5,对HTML语法要求很严格,只要元素缺少结束符号,就会启动报错:

1
org.xml.sax.SAXParseException: 元素类型 "<div>" 必须由匹配的结束标记 "

非严格检查LEGACYHTML5,与其相反,需添加依赖支持

1
2
3
4
5
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
<version>1.9.22</version>
</dependency>

热部署

修改HTML和Java代码无需重启

引入依赖

1
2
3
4
5
6
<!-- optional=true 开启 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>

修改IDEA设置

按Shift+Ctrl+Alt+/,选择Registry

找到红框处勾上

静态资源URL设置

在html页面中引入thymeleaf命名空间

1
<html xmlns:th=http://www.thymeleaf.org></html>

Thymeleaf对于URL的处理是通过语法 @{…} 来处理

如@{/js/html5.js}会自动引入/static目录下的/js/html5.js文件

1
2
3
<a th:href="@{http://localhost:8080}">绝对路径</a>
<a th:href="@{/}">相对路径</a>
<a th:href="@{css/customer.css}">Content路径,默认访问static下的css文件夹</a>
  • 如无法自动引入static下的文件,检查配置文件是否关闭了资源处理
    1
    2
    #是否开启默认的资源处理,默认true
    #spring.resources.add-mappings=false

举例

比如HTML里引入JS的路径为:

1
<script type="text/javascript" src="../static/js/html5.js"/>

在Thymeleaf里就写为:

1
<script type="text/javascript" src="../static/js/html5.js" th:src="@{js/html5.js}"/>

也可以去掉src,只留下th:src,项目启动的时候会自动解析路径

写上src的好处就是可以在不启动项目的情况下预览到页面

如果是href就用th:href,其他的链接地址都一样

如果是css样式里带有图片地址,比如:

1
<li style="background-image:url(../static/images/1.jpg);">

这种情况就写成:

1
<li style="background-image:url(../static/images/1.jpg);" th:style="'background:url(' + @{/images/1.jpg} + ');'">

IDEA会在表达式上划红色波浪线,无视即可

绝对路径

上面的是相对路径,在某种情况下会出现路径错误的问题

比如你的HTML目录结构是这种:

用户在进行登录的时候,走Controller进行效验,密码错误,要返回msg到view层

1
return "system/login"

这种情况用相对路径就会出错,地址栏会显示为localhost:8080/system/login

Thymeleaf会把system解析到路径里,就会出现资源404

原本是/images/1.jpg ,变成/system/images/1.jpg

只要在表达式前加上 ‘~’ 即可解决

1
th:href="@{~/images/1.jpg}"


最后结构图

按照上面的写法,新加项目名称和不加,路径都不需要更改,类似JSP的contentPath

------本文结束感谢阅读------

本文标题:thymeleaf-引用静态资源路径,热部署

文章作者:churuo

原始链接:https://www.xuchuruo.cn/spring-boot之thymeleaf的路径详解.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%