Bootstrap 4 webjar css не работает с Spring Boot + Thymeleaf - PullRequest
Новая
       115

Bootstrap 4 webjar css не работает с Spring Boot + Thymeleaf

1 голос
/ 01 мая 2020

Я делаю веб-приложение Spring Boot, используя Thymeleaf. Я экспериментировал с Webjars, чтобы использовать такие вещи, как JQuery и Bootstrap на моей веб-странице. Использование Spring Boot 2.2.6.RELEASE и попытка использования Bootstrap Webjar версии 4.1.1-1.

У меня есть несколько разных веб-файлов в моем pom, но я понял, что ни один из файлов css не загружается. Файлы Javascript с веб-сайтов загружаются нормально, но ни один из css не применяется. Просматривая инструмент отладчика для веб-разработчиков, я вижу, что все файлы Javascript есть, но ни один из файлов css отсутствует.

В настоящее время я специально пытаюсь получить вкладки Bootstrap чтобы работать, но, очевидно, без какого-либо из стилей Bootstrap, ни одна из функций Bootstrap не будет работать.

Вот как выглядит мой контроллер: 

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class MyController {

  @RequestMapping(value = "/stats", method = {RequestMethod.GET, RequestMethod.POST})
  public String stats(
      Model model) {

    // some code adding simple attributes to the model

    return "stats";
  }
}

I есть этот класс веб-конфигурации: 

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

  @Override
  public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry
        .addResourceHandler("/webjars/**")
        .addResourceLocations("classpath:/META-INF/resources/webjars/")
        .resourceChain(false);
  }
}

Образец моего pom: 

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.2.6.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
  </parent>

  <!-- artifact info... -->

  <properties>
    <java.version>1.8</java.version>
  </properties>

  <dependencies>

    <!-- some other dependencies -->

    <!-- Webjars -->
    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>bootstrap</artifactId>
      <version>4.4.1-1</version>
    </dependency>

    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>bootstrap-datepicker</artifactId>
      <version>1.7.1</version>
    </dependency>

    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>jquery</artifactId>
      <version>3.5.0</version>
    </dependency>

    <dependency>
      <groupId>org.webjars.npm</groupId>
      <artifactId>popper.js</artifactId>
      <version>1.16.1</version>
    </dependency>

    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>font-awesome</artifactId>
      <version>5.13.0</version>
    </dependency>

    <dependency>
      <groupId>org.webjars</groupId>
      <artifactId>webjars-locator</artifactId>
      <version>0.40</version>
    </dependency>

    <!-- Spring -->

    <!-- some other Spring deps... -->

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-configuration-processor</artifactId>
      <optional>true</optional>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>
  </build>
</project>

Вот пример моей html страницы (статистика. html): 

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8"/>
  <title>My Web App</title>

  <link th:rel="stylesheet" th:href="@{webjars/bootstrap/css/bootstrap.min.css}" type="text.css"/>
  <!--<link th:rel="stylesheet" th:href="@{webjars/bootstrap-datepicker/css/bootstrap-datepicker.min.css}" type="text/css"/>-->
  <link th:rel="stylesheet" th:href="@{webjars/bootstrap-datepicker/css/bootstrap-datepicker.standalone.css}" type="text/css"/>
  <link th:rel="stylesheet" th:href="@{webjars/font-awesome/css/all.css} " type="text/css"/>
  <link href="../static/css/custom-styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
  <script th:src="@{webjars/jquery/jquery.min.js}" type="text/javascript"></script>
  <script th:src="@{webjars/popper.js/1.14.3/umd/popper.min.js}" type="text/javascript"></script>
  <script th:src="@{webjars/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>
  <script th:src="@{webjars/bootstrap-datepicker/js/bootstrap-datepicker.min.js}" type="text/javascript"></script>

  <!-- Other simple web content... -->

  <!-- Example straight from Bootstrap 4 documentation https://getbootstrap.com/docs/4.4/components/navs/#tabs -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
  </ul>

  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
  </div>

</body>

Заголовки вкладок (или элементы навигации) просто отображаются в виде обычного неупорядоченного списка, а все фактическое содержимое вкладок отображается вместе под ним.

Как я уже сказал, как Насколько я могу судить, файлы скриптов загружаются правильно. У меня есть Bootstrap DatePicker, настроенный и работающий на той же странице, но без стилей Bootstrap. Мне нужно использовать файл bootstrap-datepicker.standalone.css, потому что bootstrap-datepicker.min.css не работает.

Вещи, которые я пробовал, чтобы не работало :

  • Удаление WebConfig класс
  • Перемещение ссылок css в тело документа HTML
  • Помещение символа '/' перед @{webjars/...} в тегах ссылки. Технически это работает для Javascript, но со ссылками css не имеет значения. Кроме того, мне нужно оставить начальный символ '/' отключенным, чтобы приложение использовало относительные ссылки на страницы, иначе приложение не будет работать при развертывании в нашей промежуточной среде
  • Указание версии внутри th:href подобно итак: @{/webjars/bootstrap/4.1.1-1/css/bootstrap.min.css}
  • Извлечение других вещей из главной страницы HTML до тех пор, пока она практически не тестирует только вкладки Bootstrap (то есть импортирует только файлы Bootstrap css и Javascript )
  • Удаление th: из элемента ссылки

Одна вещь, которую я сделал, что делает работу, использует BootstrapCDN, как видно на https://getbootstrap.com/: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Если я использую это вместо ссылки, которую я на самом деле имею в HTML, стили применяются и все работает (насколько я могу судить) , Тем не менее, я хотел бы знать, почему я не могу заставить работать webjar, и если у кого-то еще была эта проблема. Или, возможно, я делаю что-то явно не то, что слишком близко, чтобы увидеть?

...