Spring Загрузите HTML и JavaScript

Я пытаюсь запустить приложение загрузки Spring с некоторыми HTML5 и JavaScript, и у меня есть проблема.

У меня есть структура проекта следующим образом:

My Spring MVC Controller вызывает файл 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

Ответ от сервера:

Я понятия не имею, почему мое приложение не видит эти файлы script, может ли кто-нибудь понять, что я сделал неправильно?

Ответы

Ответ 1

В основном весь контент, который должен обслуживаться статически (например, файлы javascript), должен помещаться в статическую папку. https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot

Я собрал быстрый рабочий пример, чтобы показать, как это делается: https://github.com/ericbv/staticContentWithSpringBoot

Структура файла:

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, чтобы сделать контекст ссылок осведомленным

Ответ 2

Вам нужно ставить ваши статические js файлы в статическую папку. Подробнее см. Здесь: https://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot

Ответ 3

Мне кажется, вам нужно переместить каталог (и содержимое) js в статический каталог (вместо того, чтобы иметь его в шаблонах).

Ответ 4

Для начинающих новичков Spring у меня была аналогичная проблема. Мой код jQuery работал нормально внутри <script> в нижней части моего html-документа (шаблон тимелеафа), но когда я помещаю тот же самый код во внешний .js файл в папку static/js, он больше не отвечает. Супер простое исправление - просто нужно поместить весь этот код .js doc внутри этого: $ (document).ready(function() {... code...}); и тогда он работал нормально. Надеюсь, это поможет кому-то.

Ответ 5

Установите корневой каталог документа, который будет использоваться веб-контекстом для обслуживания статических файлов с помощью ConfigurableEmbeddedServletContainer.setDocumentRoot(File documentRoot).

Рабочий пример:

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

Ответ 6

Я добавил spring.mvc.static-path-pattern=/static/** в файл application.properties, и теперь он работает.

В html я использую вот так: src="/static/js/jQuery.min.js"

Ответ 7

просто для всех, чтобы найти эту страницу с той же проблемой. То, как я решил проблему "скрипт не выполнен", было довольно простым.

Просто заменил:

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

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

(Тест находится в 'static/js/src'). Надеюсь, это полезно для всех, кроме меня :)

ура