SpringMVC使用thymeleaft解决js、css等引用路径问题

墨蓝 2022-05-16 14:13 279阅读 0赞

### SpringMVC使用thymeleaft解决js、css等引用路径问题 ###

*  一、前言
 *  二、/和./和../的含义
 *  三、遇到的问题
 *  四、问题分析
 *   *  尝试解决一
     *  尝试解决二
 *  五、比较完美解决方案使用thymeleaf的标签。

# 一、前言 #

最近做项目，使用的是springmvc框架，前期开发各种css，js的引用使用的是相对路径。  
先普及一些路径的基础知识点

# 二、/和./和…/的含义 #

“/”表示根目录开始；  
“./”表示当前同级目录开始；  
“…/”表示上一级目录开始；

# 三、遇到的问题 #

例如某个html页面中的引用：

这样看视没什么问题。前端页面可以单独浏览，由于我们要做的是动态网站，不需要前后分离。于是，我将程序打好的名为test.war包丢在tomacat的webapps目录下，运行时发现各种css和js404,遇到这问题。

# 四、问题分析 #

遇到这个问题，一看就是资源文件找不到，

## 尝试解决一 ##

刚开始使用的是根路径，尝试解决，例如我的页面是：[http://localhost:8080/test/login.html][http_localhost_8080_test_login.html]

使用这样引入：

这样，我在这个页面可以引入js，不报404，因为程序会自动找到我的项目中的

http://localhost:8080/test/res/js/login/login.js

目录，但是如果我请求了一个接口路径变化成

http://localhost:8080/test/login/login.html

这样我们js的加载路径就变成：

[http://localhost:8080/test/login/res/js/login/login.js][http_localhost_8080_test_login_res_js_login_login.js]

这样路径就找不到了，js就404了。**这样不行**

## 尝试解决二 ##

想起以前前端使用jsp页面时，经常定义一个base，加上base就可以解决相对路径问题。  
例如：

<%   
    String path = request.getContextPath();   
    String basePath = request.getScheme()+"://" +request.getServerName()+":" +request.getServerPort()+path+"/" ;   
    %> 
    
    <base href="<%=basePath%>" >

引用时候，就可以正常引用了

但是现在是html，不是jsp，无法使用jsp的标签语法和代码。  
**这种也适用**  
网上找了很多方案，感觉都不是很好。

# 五、比较完美解决方案使用thymeleaf的标签。 #

我在项目中使用了thymeleaf模板框架。集成thymeleaf就不多介绍了。  
这里主要介绍前端。  
第一步：使用@\{\}th:src标签将项目中的js引用换成：

第二步：使用@\{\}和th:href标签将项目中的css引用换成

替换好以后，部署war包，访问路径，ok没问题，不会404了。  
换个应用名部署，访问也没问题。

问题解决，我个人觉得这种方案还是挺好的，分享给大家试试。

[http_localhost_8080_test_login.html]: http://localhost:8080/test/login.html
[http_localhost_8080_test_login_res_js_login_login.js]: http://localhost:8080/test/login/res/js/login/login.js