2017-04-01 20 views
0

私のディレクトリ構造があるthymeleaf:静的リソースのどれも与えて404エラー

ディレクトリ構造

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>タグをチェックしないでください上記のレイアウトでは、リンクタグに異なる場所を使用していますが、いずれもgiv 404 errorなぜそうですか?

enter image description here

上の画像を見てください、私はリソース/静的/ CSS /フォルダ内のCSSやJSファイルを持っているとJSが間違って何が起こっているかint型/リソース/静的/のJS /フォルダのですか?いくつかの静的リソースでChromeが404エラーを表示しないのはなぜですか?

TD; LR静的リソースは、私のthymeleafレイアウトにロードされていないが

+0

エラーが発生する特定の例を挙げることができますか? – benkuly

+0

'bootstrap.min.css'は' static/css/'にあるので、他のリンクされたリソースはchrome devtoolで404エラーを表示するはずです。 – piechuckerr

+0

カスタムリソースハンドラを追加しましたか? – benkuly

答えて

1

ブートストラップのCSSとJSのネットワークリクエストは、応答が成功したため200を返していますが、内容は期待した内容ではありません。レスポンスを調べると、CSSとJSリクエストごとに、HTMLページwelcome.htmlが返されていることがわかります。

これは、コントローラのマッピングがリソース要求をオーバーライドしているためです。正しい属性ではないマッピングにnameパラメータを使用しています。代わりにvalueを使用してください。g:

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

この変更により、CSSとJSのリクエストで404が返されます。これは進歩です。

また、MvcConfigはこの動作がそのままの状態で提供されているため、削除してください。

最後に、このようなあなたのリソースへのパスを調整します

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

を今すぐCSSやJSの要求が適切なコンテンツで正常に戻ります。

+0

あなたの解決策はたくさんありました。ところで、名前と価値の違いは何ですか? – piechuckerr

+0

名前はマッピングの識別子として使用されます。ただし、URLパターン(「/」、「/ **」、「/ home」、「/ about」など)をハンドラーメソッド(例:HomeController.gethomePage())に一致させるために値が使用されます。 http://docs.spring.io/spring/docs/current/javadoc-api/org/springframework/web/bind/annotation/RequestMapping.html –

+0

@KyleAnderson私は自分のブートストラップファイルに多くの順列をリンクしてみました。あなたの答えの一つを含めて、私は考えることができます。なぜこれが404を返すのか知っていますか?私はすべてのマッピングに 'value'を使っています。 – justinraczak

0

静的あなたは私からも分かるように<

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

ええ、私は知っているが、それは動作していません。 – piechuckerr

0

リソースパスに静的追加する必要はありませspringbootのデフォルトのリソースマッピングでありますあなたのポストはCSSファイルやjsファイルのような全種類の静的コンテンツを持っていて、それらのリンクのパスを変更すると正しく配信されないということです。

つまり、これらのリンクのパスを変更すると、動作は変化せず、予期しない結果が発生しています。

あなたの質問に対する答え、なぜ私がそのような行動を取るのかはかなり簡単です。

あなたは春ブーツを使用して、あなたの期待される結果を得るためには、ブラウザのキャッシュをバストする必要があることを意味お使いのブラウザが古い動作し、古い要求の古いレスポンスをキャッシュされ静的コンテンツ、を提供しようとすると、リンクパスを変更するとき。

あなたのapplication.propertiesファイルに次の設定を追加することによってそれを行うことができます:あなたはここで自分のドキュメントに春のブートを使用している間、静的なコンテンツを提供する方法についていくつかのより多くの情報を見つけることができ

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

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

+0

私はあなたのソリューションをチェックしていないが、私のレポをチェックするplzは非常に欲求不満https://github.com/PieChuckerr/gateApp – piechuckerr

+0

私のソリューションをチェックアウトする必要はありません、私はあなたの問題が数回あった後に解決した読んだ後に+春のドキュメンテーション –

関連する問題