thymeleaf：使用布局时未加载静态资源答案

【问题标题】：thymeleaf: Static resources are not loading in while using layoutsthymeleaf：使用布局时未加载静态资源
【发布时间】：2017-04-01 19:47:47
【问题描述】：

我的目录结构是

目录结构

src/
  main/
    resources/
        static/
             CSS/
             JS/
             images/

        template/
           fragments/
                         header.html
                         footer.html
                         navBar.html
            layouts/
                         appLayout.html
                         baseLayout.html
                 welcome.html

appLayout.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

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

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


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


   <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap.min.css"
        th:href="@{/webjars/bootstrap/2.3.0/css/bootstrap.min.css}" rel="stylesheet" />


</head>
<body>

<div th:replace="/fragments/header :: header"></div>
<div th:replace="/fragments/navbar :: navbar"></div>
<div class="container">
    <div layout:fragment="content">
    <p>Content goes here...</p>
    </div>
    <footer>
    <div th:replace="/fragments/footer :: footer"></div>
    </footer>
</div>
</body>
</html>

请检查上面布局中的<links>标签，我使用了不同的位置链接标签，没有给出404 error为什么会这样？

请看上图，我在 resources/static/css/ 文件夹中有 css 和 js 文件，而 JS 是 int /resources/static/js/ 文件夹这是怎么回事？为什么chrome对某些静态资源不显示404错误？

【问题讨论】：

你能举一个你认为会出错的具体例子吗？
bootstrap.min.css 位于 static/css/ 中，因此其他链接资源应在 chrome devtool 上显示 404 错误。
您是否添加了自定义资源处理程序？
没有。我使用的是spring boot的默认设置
您是否通过控制器映射了welcome.html？如果不添加控制器来映射您的 HTML 页面的 URL

标签： spring-boot thymeleaf

【解决方案1】：

Bootstrap CSS 和 JS 网络请求返回 200，因为响应成功，但内容不是您所期望的。如果您查看响应，您会看到对于每个 CSS 和 JS 请求，它都会返回 HTML 页面welcome.html。

这是因为您的控制器映射覆盖了资源请求。您正在使用 name 参数进行映射，这不是正确的属性。请改用value，例如：

@RequestMapping(value="/", method=RequestMethod.GET)

此更改将导致您的 CSS 和 JS 请求返回 404。这是进步。

此外，请删除您的 MvcConfig，因为此行为是开箱即用的。

最后，像这样调整资源的路径：

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

现在 CSS 和 JS 请求将成功返回并带有适当的内容。

【讨论】：

名称用作映射的标识符。但是 value 用于将 URL 模式（例如“/”、“/**”、“/home”、“/about”等）与处理程序方法（例如 HomeController.gethomePage()）进行匹配。 docs.spring.io/spring/docs/current/javadoc-api/org/…
@KyleAnderson 我已经尝试了尽可能多的链接到我的引导文件的排列，包括你的答案。你知道为什么这可能会返回 404 吗？我的所有映射都使用了value。

【解决方案2】：

我从您的帖子中了解到，您拥有一整套静态内容，例如 CSS 文件和 js 文件，当您更改这些链接的路径时，这些内容无法正确提供。

换句话说，当您更改这些链接的路径时，行为并没有改变，您会得到意想不到的结果。

这个问题的解决方案，或者你的问题的答案，为什么我会得到这种行为是相当简单的。

当您使用 Spring boot 并尝试提供 静态内容 时，您的浏览器正在缓存您的旧行为和旧请求的旧响应，这意味着您需要当您更改链接路径时，破坏浏览器缓存以获得预期结果。

您可以通过将下一个配置添加到您的 application.properties 文件来做到这一点：

spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

您可以在此处的文档中找到有关如何在使用 Spring Boot 时提供静态内容的更多信息：

http://docs.spring.io/spring-boot/docs/1.5.2.RELEASE/reference/htmlsingle/#boot-features-spring-mvc-static-content

【讨论】：

不需要，看看我的解决方案，我遇到过几次你的问题，在这样做+阅读Spring文档后解决了

【解决方案3】：

static是springboot中默认的资源映射，不需要在资源路径中添加static

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

【讨论】：