目录
问题描述
IDEA里Springboot+thymeleaf项目无法找到外部js和css的问题
问题分析
我们之前在html中的引入方式都是像下面这样:
<link rel="stylesheet" href="plugin/css/bootstrap.3.3.7.css" type="text/css">
<script src="plugin/js/bootstrap3.3.7.min.js" type="text/javascript"></script>
但是现在使用了springboot+thymeleaf,方式自然不同。
1、在IDEA下的springboot项目中,页面一般放置于templates目录下,而js和css文件一般放置于static目录下,因此想从页面寻找js和css文件首先要向上返回一级目录才能开始向下去找文件。
2、thymeleaf的一个宣传点就是实现了前后端的分离开发,听起来很不错,但是导致了一个新的问题就是,运用上面那种方式是可以引用到js和css,但仅限于静态页面开发,当部署到tomcat上时,js和css则不能被加载。提示信息为找不到相关css和js文件。因此,如果想在服务器上运行时,就要用thymeleaf的方式再添加一遍js和css文件。
(这里仅仅提出问题分析,并不表示贬低thymeleaf。不喜勿喷。)
问题解决
-
头文件引入相关标签
<html lang="en" xmlns:th="http://www.thymeleaf.org">
-
文件引入时使用两种方式同时引入文件
<!-- 引入css文件 -->
<link rel="stylesheet"
th:href="@{/plugin/css/bootstrap.3.3.7.css}" href="../static/plugin/css/bootstrap.3.3.7.css"
type="text/css">
<!-- 引入js文件 -->
<script
th:src="@{/plugin/js/bootstrap-table.js}"
src="../static/plugin/js/bootstrap-table.js"
type="text/javascript">
</script>
①使用形如:【th:href th:src】这样的方式,将js和css文件引入是为了部署到服务器上时可以找到对应的文件
②使用正常的方式,如:【href="" scr=""】,将js和css文件静态引入,即编辑静态页面的时候也可以使用js和css文件。
至此,问题解决,欢迎交流。
(推荐)2019/9/2更新:
如果springboot项目仅需要部署在tomcat上运行,推荐使用以下方法:
<link href="/mall/css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/mall/js/common.js"></script>
因为springboot项目默认js和css文件会放置在resources/static路径下;html网页则放置在resources/templates路径下,而且事实上我们也会把相关文件放在这个路径下,像是下面这样:
因此,在tomcat上部署完并运行的时候,href="/mall/css/index.css" 这段代码会被自动补全,会到resources下的static下的mall文件夹里去找一个叫index.css的文件并加载该文件。
注意:此方法不能展示静态页面。(不能在不启动tomcat的情况下展示页面)
当然有人会觉得html页面可能需要修改样式什么的,不能静态展示页面修改之后要一遍一遍的重启tomcat更麻烦。
这里推荐解决办法:idea中springboot项目的热部署