IntelliJ IDEA 学习SpringBoot（2） thymeleaf 资源访问和路径写法

      上一篇文件 我们介绍了 IntelliJ  IEDA工具创建 SpringBoot 以及 模板引擎 thymeleaf的简单用法。今天这篇 介绍 如何使用 thymeleaf 访问静态资源 如css，js，图片之类的。

       这次我们打算写一个登录页面，那么我们需要导入css，js之类的东西。首先静态资源默认放在哪呢？

       

       默认static放资源，如css，js，图片等。 templates放html。这些都是 springboot默认配置。我们这里不做修改，默认就默认呗。你改了位置也不见得有多了不得。

       我们知道html文件如果引用css或者js，通常是采用相对路径，如下：

<link href="../../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

               效果图就是下面这样：

但是如果是web应用，我们用localhost的形式访问，又会发生什么呢。

这说明什么，说明在web应用中，static就是根路径了，所以不能出现static。

  那这又怎么解决呢。 thymeleaf是这样解决的。

<link href="../../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>

补上th:href

th:href="@{/bootstrap/css/bootstrap.min.css}"/>

就相当于所有的关于路径都有前面加上 th: 什么的。事实上还有 th:src,th:attr什么的。

那么接下来又发生什么呢。

如果是本地打开html，识别不了的th:href就直接展示，因为html元素的属性是可以任意拓展的，识别不了就直接展示。那接下来看localhost:8080访问是怎样的呢

    完美解决。当然js同样道理

<link href="../../static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
<link href="../../static/layer/skin/layer.css" rel="stylesheet" type="text/css" th:href="@{/layer/skin/layer.css}"/>
<link href="../../static/login/form-elements.css" rel="stylesheet" type="text/css" th:href="@{/login/form-elements.css}"/>
<link href="../../static/login/style.css" rel="stylesheet" type="text/css" th:href="@{/login/style.css}"/>

<script type="text/javascript" src="../../static/jquery-1.11.0.min.js" th:src="@{/jquery-1.11.0.min.js}"></script>
<script type="text/javascript" src="../../static/layer/layer.js" th:src="@{/layer/layer.js}"></script>
<script type="text/javascript" src="../../static/login/jquery.backstretch.min.js"
        th:src="@{/login/jquery.backstretch.min.js}"></script>

那么资源访问，这块感觉使用thymeleaf模板引擎是要比jsp引擎要好，至少可以做到本地可以直接浏览页面效果，做到前段和后端的分离。

   那么是不是所有问题都解决了呢。我原本也这样以为，但突然我用了一个插件jquery.backstretch.min.js。用来让图片全屏作为背景的。那么这个是要在脚本中访问图片url。我们看看遇到怎样的难题。

<script type="text/javascript">
    $(document).ready(function () {
        $.backstretch("../../static/login/1413012235-43G.png");

这是 插件的基本用法

$.backstretch("图片路径")

但是这就头疼了。如果写成上面，本地的可以，但localhost:8080方式肯定不行。

$.backstretch("/login/1413012235-43G.png");

如果这样，localhost:8080的方式肯定可以，但是本地的相对路径就是错误的。

那么这个问题，我们难道就只能二者选择其一吗？ 有解决办法的。

 我们可以使用类似jsp中的contextpath来解决。解决方法如下。定义如下标签。

<a href="../../static"
   th:href="@{${#httpServletRequest.getScheme()}+ '://' + ${#httpServletRequest.getServerName()}+ ':'+${#httpServletRequest.getServerPort()}+${#httpServletRequest.getContextPath()}+'/' }"
   id="contextPath"></a>

这个a标签是不用展示在页面上的。 我们看到 我写了 href和th:href。相当于本地和服务器两种方式。稍微解释一下。@{ }是thymeleaf访问url路径的写法。${}访问变量值的写法。 那么既然jsp有9大内置对象，thymeleaf同样也有类似内置对象的说法，不只9个哦。

@{

  ${#httpServletRequest.getScheme()}

  + '://' + ${#httpServletRequest.getServerName()}

  + ':'+${#httpServletRequest.getServerPort()}

  + ${#httpServletRequest.getContextPath()}+'/' 

}

上面的就是获得web应用的contextPath。看到我给上述a标签一个id为contextPath了吗？那么脚本中访问就 简单多了。

var contextPath = $('#contextPath').attr('href');
$.backstretch(contextPath+"/login/1413012235-43G.png")// 完美解决

那么路径问题也就完美解决了。

好了，本篇关于 thymeleaf 资源和路径 的相关问题 就记录到这了。