Подключить js-скрипты к Spring Boot - проекту

128
27 октября 2019, 23:20

Использую библиотеку Spring Boot. Сверстал элементарную html-страницу(не смотрите на этот код, знаю, он плох, я никогда не верстал да и вряд ли буду, вынужден просто в данный момент). И теперь мне надо подключить js-скрипт из внешнего файла. Почитал, изучил. Сделал следующим образом.

Вот структура проекта в Intellegi idea:

И на всякий случай путь до скрипта проводнике:

Так что папка в IDE static.js - это просто сокращение пути в самой IDE.

Далее сама страничка:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Getting Started: Serving Web Content</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" th:src="@{js/test.js}" src="js/text.js"></script>
</head>
<style>
    body {
        font: 11px 'Verdana';
        margin: 0;
        padding: 0;
    }
    ul {
        display: block;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul:after {
        display: block;
        content: ' ';
        clear: both;
        float: none;
    }
    ul.menu > li {
        float: left;
        position: relative;
    }
    ul.menu > li > a {
        display: block;
        padding: 10px;
        color: white;
        background-color: darkgray;
        text-decoration: none;
    }
    ul.menu > li > a:hover {
        background-color: black;
    }
    ul.submenu {
        display: none;
        position: absolute;
        width: 120px;
        top: 30px;
        left: 0;
        background-color: white;
    }
    ul.submenu > li {
        display: block;
    }
    ul.submenu > li > a {
        display: block;
        padding: 10px;
        color: white;
        background-color: darkgray;
        text-decoration: none;
    }
    ul.submenu > li > a:hover {
        text-decoration: underline;
    }
    ul.menu > li:hover > ul.submenu {
        display: block;
    }
    ul.submenu > li > a:hover {
        background-color: black;
        text-decoration: none;
    }
    div.blockMenu{
        background-color: darkgray;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
    }
</style>
<body>
<div class = "blockMenu">
<ul class="menu">
    <li><a class="#" >Файл</a>
        <ul class="submenu">
            <li><a href=# onclick="messageBox()" >Открыть</a></li>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 2</a>
        <ul class="submenu">
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
        </ul>
    </li>
</ul>
</div>
<p th:text="'Hello, ' + ${name} + '!'" />
</body>
</html>

Простейший код, пока это обычная проба пера. В коде есть обработчик клика по кнопке:

onclick="messageBox()"

Эта функция берется из скрипта. Сам скрипт подключается здесь:

<script type="text/javascript" th:src="@{js/test.js}" src="js/text.js"></script>

И сам код скрипта test.js:

function messageBox(){
    alert('Test message');
}

Вот и всё. Как и следовало ожидать - функция не вызывается, потому что, как мне кажется, система не может найти скрипт. Вопрос: как правильно прописать путь к скрипту? Или, возможно, как правильно создать систему каталогов, чтобы система определяла скрипт? Спасибо большое.

P.S.: тестировал без spring boot, т.е. обычная web-страница и подключенный скрипт, всё работает без проблем, по кнопке вызывался alert.

UDP1

Также, вот ответ браузера:

Answer 1

Сталкивался с такой проблемой. Необходимо явно указать, где искать js/css Пример основного класса

 @SpringBootApplication
    public class Application implements WebMvcConfigurer {
        public static void main(String[] args) {
            SpringApplication.run(Application.class, args);
        }
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");
        }
    }

Либо создать класс с аннотацией @Configuration, в котором переопределить метод addResourceHandlers.

Вот пример со Spring Boot и Css/js, можете там посмотреть - https://github.com/KonstantinPM/FileStatistic

Answer 2

Исследуя эту проблему, я пришел ко мнению, что данная проблема встречается весьма редко. Первое, что я добавил - это немного исправленный код, который посоветовал Константин Полищук, за что ему огромное спасибо:

@SpringBootApplication
public class Application implements WebMvcConfigurer {
    private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {
            "classpath:/META-INF/resources/", "classpath:/resources/",
            "classpath:/static/", "classpath:/public/"
    };
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations(CLASSPATH_RESOURCE_LOCATIONS);
    }
}

Здесь явно указываются пути ко всем местам, где могут лежать статические ресурсы(где ищет Spring). Далее, я добавил аннотацию RequestMapping, в класс контроллер:

@RequestMapping
@Controller
public class DfdController {
    // TODO
}

Сделано это потому, что контроллер по неведомым мне причинам блокирует путь к папке с ресурсами. Поэтому она не загружалась.

Вкупе два метода помогли наконец загрузить внешние скрипты(и в будущем стили). Надеюсь, кому - то это поможет, ибо я провел в поисках и попытках ровно сутки.

READ ALSO
смена расположений блоков js, vanilla [закрыт]
javascript

смена расположений блоков js, vanilla [закрыт]

есть два абзаца, условно A и B, только при нажатии на верхний блок, на сам абзац он меняется местами с нижним, то есть кликабельный только верхнийвсегда...

 126
Как проверять объект на пустоту
javascript

Как проверять объект на пустоту

 131
Почему код не срабатывает, хотя он написан с соблюдением разных стандартов (ECMAScript)?
javascript

Почему код не срабатывает, хотя он написан с соблюдением разных стандартов (ECMAScript)?

Почему код не срабатывает, хотя он написан с соблюдением разных стандартов (ECMAScript) ? Вот код:

 118
Не работает вывод данных с API RandomUser
javascript

Не работает вывод данных с API RandomUser

Нужно выводить рандомно данные с сайта https://randomuserme/ , но что-то пошло не так, на ютубе смотрел как это делают, но у меня ругается консоль

 104