web-dev-qa-db-ja.com

Spring BootはHTMLとJavaScriptを追加します

HTML5とJavaScriptを使用してSpringブートアプリを実行しようとしていますが、問題があります。

私はこのようなプロジェクト構造を持っています：

enter image description here

私のSpring MVCコントローラーはファイルoffer.htmlを呼び出していますが、それはうまくいきます。

私のoffer.htmlファイルは次のようになります。

<!DOCTYPE html>
<html lang="en" ng-app="coByTu">
<head>
    <title>Page</title>
    <script type="text/javascript" src="../js/lib/angular.js" />
    <script type="text/javascript" src="../js/src/offer.js" />
</head>
<body>

</body>
</html>

そして、アプリのURLを入力しているとき http：// localhost：8080/offerView

サーバーからの応答：

enter image description here

アプリにこのスクリプトファイルが表示されない理由はわかりませんが、私が何を間違えたかは誰にもわかりませんか？

javascriptspring-mvcspring-boot
18
zaqpiotr

基本的に、静的に提供する必要があるすべてのコンテンツ（javascriptファイルなど）は、静的フォルダーの下に配置する必要があります。 https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot

私はそれがどのように行われるかを示すために簡単な作業例をまとめました： https://github.com/ericbv/staticContentWithSpringBoot

ファイル構造： enter image description here

HTMLファイル：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page</title>
    <script type="text/javascript" th:src="@{/js/lib/angular.js}" />
    <script type="text/javascript" th:src="@{/js/src/offer.js}" />
</head>
<body>

Th：srcを使用すると、リンクがコンテキスト対応であることを確認できます

編集：th：srcを追加して、参照コンテキストを認識できるようにしました

38
Eric

静的jsファイルを静的フォルダーに配置する必要があります。詳細はこちら： https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot

4
jny

誰でも同じ問題のこのページを見つけることができます。 「スクリプトが実行されない」問題を解決する方法は非常に簡単でした。

単に交換：

<script type="text/javascript" src="js/src/Test.js" />

と

<script type="text/javascript" src="js/src/Test.js" ></script>

（テストは 'static/js/src'にあります）うまくいけば、これは私以外の誰にも役立つでしょう:)

乾杯

2
Chris

Jsディレクトリ（およびコンテンツ）を（テンプレートに入れるのではなく）静的ディレクトリに移動する必要があると思います。

1
robjwilkins

Spring Bootの初心者には、同様の問題がありました。私のjQueryコードは、HTMLドキュメント（thymeleafテンプレート）の下部にある<script>タグ内で正常に機能していましたが、まったく同じコードをstatic/jsフォルダーの外部.jsドキュメントに入れると、応答しなくなりました。非常に簡単な修正-.jsのすべてのドキュメントコードをこの中に配置する必要がありました：$（document）.ready（function（）{... code ...}）;そして、それはうまく働きました。これが誰かを助けることを願っています。

1
Forrest

追加した spring.mvc.static-path-pattern=/static/**をapplication.propertiesファイルに追加して、動作するようになりました。

Htmlでは、_src="/static/js/jQuery.min.js"

0
Andry Max

ConfigurableEmbeddedServletContainer.setDocumentRoot(File documentRoot) を使用して、静的ファイルを提供するためにWebコンテキストで使用されるドキュメントルートディレクトリを設定します。

作業例：

package com.example.config;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.context.embedded.ConfigurableEmbeddedServletContainer;
import org.springframework.boot.context.embedded.EmbeddedServletContainerCustomizer;
import org.springframework.boot.web.servlet.ServletContextInitializer;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.env.Environment;
import org.springframework.util.StringUtils;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import Java.io.File;
import Java.nio.file.Paths;

@Configuration
public class WebConfigurer implements ServletContextInitializer, EmbeddedServletContainerCustomizer {
    private final Logger log = LoggerFactory.getLogger(WebConfigurer.class);

    private final Environment env;
    private static final String STATIC_ASSETS_FOLDER_PARAM = "static-assets-folder";
    private final String staticAssetsFolderPath;

    public WebConfigurer(Environment env, @Value("${" + STATIC_ASSETS_FOLDER_PARAM + ":}") String staticAssetsFolderPath) {
        this.env = env;
        this.staticAssetsFolderPath = staticAssetsFolderPath;
    }

    @Override
    public void onStartup(ServletContext servletContext) throws ServletException {
        if (env.getActiveProfiles().length > 0) {
            log.info("Web application configuration, profiles: {}", (Object[]) env.getActiveProfiles());
        }
        log.info(STATIC_ASSETS_FOLDER_PARAM + ": '{}'", staticAssetsFolderPath);
    }

    private void customizeDocumentRoot(ConfigurableEmbeddedServletContainer container) {
        if (!StringUtils.isEmpty(staticAssetsFolderPath)) {
            File docRoot;
            if (staticAssetsFolderPath.startsWith(File.separator)) {
                docRoot = new File(staticAssetsFolderPath);
            } else {
                final String workPath = Paths.get(".").toUri().normalize().getPath();
                docRoot = new File(workPath + staticAssetsFolderPath);
            }
            if (docRoot.exists() && docRoot.isDirectory()) {
                log.info("Custom location is used for static assets, document root folder: {}",
                        docRoot.getAbsolutePath());
                container.setDocumentRoot(docRoot);
            } else {
                log.warn("Custom document root folder {} doesn't exist, custom location for static assets was not used.",
                        docRoot.getAbsolutePath());
            }
        }
    }

    @Override
    public void customize(ConfigurableEmbeddedServletContainer container) {
        customizeDocumentRoot(container);
    }

}

コマンドライン またはプロファイル（src/main/resources/application-myprofile.yml：static-assets-folder: myfolder）：

> Java -jar demo-0.0.1-SNAPSHOT.jar --static-assets-folder="myfolder"
> Java -jar demo-0.0.1-SNAPSHOT.jar --spring.profiles.active=myprofile
0
wildloop