Как добавить статические ресурсы весной с помощью тимелина - PullRequest
0 голосов
/ 07 июня 2019

Я новичок в Spring , и я пытаюсь сделать красивое веб-приложение, и до сих пор я все настраивал, и если я запускаю свою страницу в браузере, она показывает, как предполагается.Но если я запускаю его с tomcat через порт 8080 (я использую Intelijj), он не загружает файлы css и js , даже не изображения.

Я буквально искал эту проблему и открыл все похожие вопросы StackOverflow, я пытался написать файл конфигурации, но он ничего не делает, и я не уверен в этом подходе, потому что я видел примеры людей, которые не сделалинаписать любую конфигурацию, но все же им удалось загрузить все свои статические ресурсы и так далее.Это какие-то секретные свойства приложения, которые нужно написать?Или есть код конфигурации, который должен написать?

Моя папка ресурсов выглядит следующим образом:

-resources
    -static
        -CSS 
            -things.css
        -JS
            -datepicker.js
        -Images
            -many pictures
    -templates
        -Home.html and other pages

А код, который я использовал для ссылки на static-CSS-things.css, выглядит следующим образом:

link href="../static/CSS/things.css" th:href="@{/CSS/things.css}" rel="stylesheet" media="all" type="text/css"

Я думал, что это сделает мой CSS-файл для загрузки, но это не так.То же самое для JS и фотографий.Спасибо!

Ответы [ 2 ]

3 голосов
/ 07 июня 2019
  1. Убедитесь, что ваши файлы CSS и JS имеют следующую структуру:

    SRC / главная / ресурсы / статический / CSS / things.css

    SRC / основные / ресурсы / статические / JS / things.js

  2. Убедитесь, что вы вызываете статические ресурсы со страниц, которые находятся в папке шаблонов весенней загрузки, которая находится в src / main / resources / templates

  3. Всегда обращайтесь к своим ресурсам, используя тег thymeleaf, потому что таким образом, независимо от порта, на котором вы запускаете приложение, оно всегда будет загружаться правильно.

SRC / главная / ресурсы / шаблоны / example.html

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- CSS -->
    <link th:href="@{/css/things.css}" rel="stylesheet"></link>
    <!-- JS -->    
    <script th:src="@{/js/things.js}" type="text/javascript"></script>
</head>
<body>
</body>
</html>

Если все еще не работает, попробуйте использовать функцию проверки из Google Chrome, перейдите на вкладку Сеть и проверьте, какая ошибка возвращается из ваших файлов CSS и JS, а затем оставьте комментарий здесь.

1 голос
/ 07 июня 2019

Предполагая, что у вас есть папка css и js в статической папке, используйте ее так:

<link href="css/custom.css" rel="stylesheet">
<script src="js/custom.js"></script>

ты тоже можешь на это взглянуть -

https://www.springboottutorial.com/spring-boot-with-static-content-css-and-javascript-js https://www.baeldung.com/spring-mvc-static-resources

Стоит отметить, убедитесь, что у вас есть зависимость (и) от тимелина и теги соответственно.

...