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

一、前言

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

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

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

三、遇到的问题

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

<script src="../../js/login/login.js"></script>

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

四、问题分析

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

尝试解决一

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

使用这样引入：

<script src="/res/js/login/login.js"></script>

这样，我在这个页面可以引入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

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

尝试解决二

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

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

<base href="<%=basePath%>" > 

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

<script src="/res/js/login/login.js"></script>

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

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

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

<script th:src="@{/res/js/login/login.js}"></script>

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

<link rel="stylesheet" th:href="@{/res/css/login.css}"/>

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

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