Spring Boot CSS在尝试所有内容后显示空白/未加载

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (30)

我是Spring Boot的新手,我目前正在阅读这本书。Spring Boot在行动中。

我创建并编译了我的第一个Web简单Web应用程序,期望css文件在控制台中显示为空白。我已查看以下帖子:

Spring Boot - CSS没有加载 Spring Boot CSS剥离

我正在使用Thymleaves,我的css文件被放置在静态文件夹中作为帖子和书籍状态,但没有任何显示。我目前的外部链接,似乎也是正确的方法。

 <link rel="stylesheet" th:href="@{/main.css}" />

虽然css似乎显示在控制台的资源中,但css文件仍为空白。以下是我的文件和代码。

文件结构:

模板:

body {
    background-color: #cccccc;
    font-family: arial,helvetica,sans-serif;
}
.bookHeadline {
    font-size: 12pt;
    font-weight: bold;

}
.bookDescription {
    font-size: 10pt;
}
label {
    font-weight: bold;
}

         <html xmlns:th="http://www.springframework.org/schema/data/jaxb">
    <head>
    <title>Reading List</title>
    <link rel="stylesheet" th:href="@{/main.css}" />
    </head>
    <body>
    <h2>Your Reading List</h2>
    <div th:unless="${#lists.isEmpty(books)}">
    <dl th:each="book : ${books}">
        <dt class="bookHeadline">
            <span th:text="${book.title}">Title</span> by
            <span th:text="${book.author}">Author</span>
            (ISBN: <span th:text="${book.isbn}">ISBN</span>)
        </dt>
        <dd class="bookDescription">
    <span th:if="${book.description}"
      th:text="${book.description}">Description</span>
            <span th:if="${book.description eq null}">
    No description available</span>
        </dd>
    </dl>
    </div>
    <div th:if="${#lists.isEmpty(books)}">
    <p>You have no books in your book list</p>
    </div>
    <hr/>
   <h3>Add a book</h3>
    <form method="POST">
    <label for="title">Title:</label>
    <input type="text" name="title" size="50"></input><br/>
    <label for="author">Author:</label>
    <input type="text" name="author" size="50"></input><br/>
    <label for="isbn">ISBN:</label>
    <input type="text" name="isbn" size="15"></input><br/>
    <label for="description">Description:</label><br/>
    <textarea name="description" cols="80" rows="5">
    </textarea><br/>
    <input type="submit"></input>
    </form>
    </body>
    </html>

控制器:

package codenotes;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import java.util.List;

@Controller
@RequestMapping("/")
public class BookController {


private BookRepository bookRepository;

@Autowired
public BookController(BookRepository bookRepository) {
    this.bookRepository = bookRepository;
}

@RequestMapping(value = "/{reader}", method = RequestMethod.GET)
public String readerBooks(
        @PathVariable("reader") String reader,
        Model model) {

    List<Book> readingList =
            bookRepository.findByReader(reader);
    if (readingList != null) {

        model.addAttribute("books", readingList);
    }
    return "readingList";
}

@RequestMapping(value = "/{reader}", method = RequestMethod.POST)
public String addToReadingList(
        @PathVariable("reader") String reader, Book book) {
    book.setReader(reader);
    bookRepository.save(book);
    return "redirect:/{reader}";
}
}

库:

package codenotes;
import java.util.List;
import org.springframework.data.jpa.repository.JpaRepository;
public interface BookRepository extends JpaRepository<Book, Long> {
List<Book> findByReader(String reader);
}
提问于
用户回答回答于

我相信你应该读一下,如何提供静态内容:

http://docs.spring.io/spring-boot/docs/1.4.2.RELEASE/reference/htmlsingle/#boot-features-spring-mvc-static-content

总而言之,您的浏览器正在缓存您的静态资源,例如CSS文件。

为了打破这种行为,请先尝试清理浏览器缓存,然后在google chrome中进行设置,然后清除浏览数据。

其次,将这些行添加到application.properties文件中以便破坏缓存:

spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

或者添加这个:

spring.resources.chain.strategy.fixed.enabled=true
spring.resources.chain.strategy.fixed.paths=/**
spring.resources.chain.strategy.fixed.version=v12
用户回答回答于

请进行以下更改1.将main.css移动到/ static / css文件夹中2.更改

如果不起作用,请告诉我。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励