каким-то образом мой CSS-файл не входит в мой тимили-шаблон.
Прежде всего мне нужно объяснить рабочий процесс:
- Пользователь нажимает на форму-Отправить, чтобы отправитьa POST to / historyDetails / {history_id}
- Некоторые данные будут получены из базы данных с использованием history_id
- Данные будут отображены в history-detail-view.html
Это мой DispatcherServlet:
@Configuration
@EnableWebMvc
@ComponentScan("*")
public class DispatcherServlet extends WebMvcConfigurerAdapter {
@Autowired
private WebApplicationContext ctx;
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
/*
* resolve path to static ressources (images, stylesheets, javascript-files)
*/
registry.addResourceHandler("img/**").addResourceLocations("/WEB-INF/static/img/");
registry.addResourceHandler("css/**").addResourceLocations("/WEB-INF/static/css/");
registry.addResourceHandler("js/**").addResourceLocations("/WEB-INF/static/js/");
}
@Bean
public ThymeleafViewResolver getViewResolver() {
ThymeleafViewResolver vr = new ThymeleafViewResolver();
vr.setTemplateEngine(getTemplateEngine());
return vr;
}
@Bean
public SpringTemplateEngine getTemplateEngine() {
SpringTemplateEngine te = new SpringTemplateEngine();
te.setTemplateResolver(getTemplateResolver());
te.setEnableSpringELCompiler(true);
return te;
}
@Bean
public SpringResourceTemplateResolver getTemplateResolver() {
SpringResourceTemplateResolver tr = new SpringResourceTemplateResolver();
tr.setApplicationContext(ctx);
tr.setOrder(1);
/*
* resolve path to html to WEB-INF/<name>.html
*
* name can be something like templates/xxx.html
*/
tr.setPrefix("WEB-INF/");
tr.setSuffix(".html");
return tr;
}
}
Моя структура проекта (из корневого каталога):
Этоhtistory-detail-view.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
type="text/css"
th:href="@{css/style.css}"/>
<script type="text/javascript"
th:src="@{https://code.jquery.com/jquery-3.4.1.min.js}"></script>
<script type="text/javascript"
th:src="@{js/utilities.js}"></script>
</head>
<body>
<div th:replace="fragments/grid :: grid(${grid}, 'HISTORY_DETAIL')"></div>
<div th:replace="fragments/paging :: paging(${grid})"></div>
</body>
<div th:replace="fragments/general :: footer"></div>
</html>
Хотя index.html отображается с помощью css, history-detail-view.html - это не просто обычный HTML.
Сообщение об ошибке, которое я взял на вкладке сети в Firefox:
Loading failed for the <script> with source “http://localhost:9080/MyProject/historyDetails/js/utilities.js”.
Причина, по которой я поместил DispatcherServlet в этот поток, заключается в том, что он отвечает за разрешение путей к статическим ресурсам. При сравнении пути из структуры проекта с путем в сообщении об ошибке DispatcherServlet, похоже, не работает должным образом, но я не знаю, как заставить его разрешить правильный путь.
Единственное отличие, которое я вижу здесьэто переменная пути.
РЕДАКТИРОВАТЬ: Я предоставляю свой index.html, так как он работает правильно здесь:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
type="text/css"
th:href="@{css/style.css}"/>
<script type="text/javascript"
th:src="@{https://code.jquery.com/jquery-3.4.1.min.js}"></script>
<script type="text/javascript"
th:src="@{js/utilities.js}"></script>
</head>
<body>
<div th:replace="fragments/grid :: grid(${grid}, 'HISTORY')"></div>
<div th:replace="fragments/paging :: paging(${grid})"></div>
</body>
<div th:replace="fragments/general :: footer"></div>
</html>