<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Flashcards</title>
<link rel="stylesheet" th:href="@{css/style.css}">
</head>
<body>
<div class="game_container">
<!-- TITLE -->
<h1>Flashcards</h1>
<!-- CARDS CONTAINER -->
<div class="cards_container">
<!-- FIRST CARD -->
<div class="cards">
<div class="card">
<div class="front"><p>France</p></div>
<div class="back"><p>Francoise Meyers</p></div>
</div>
</div>
<!-- ...OTHER CARDS -->
</div>
</div>
<!-- SCRIPT FOR CARD ROTATION -->
<script>
// Select all elements with the class "card"
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
// Add event listener for click
card.addEventListener('click', () => {
// Toggle styles on click
if (card.style.transform === 'rotateY(180deg)') {
// If already rotated, revert back to original state
card.style.transform = 'rotateY(0deg)';
} else {
// Otherwise, rotate the card
card.style.transform = 'rotateY(180deg)';
}
});
});
</script>
</body>
</html>
如您所见，我在上面的 html 文件中为 css 提供了一些 href，它适用于默认端点 -
localhost:8080"api/v1/flashcards"@RequestMapping@RequiredArgsConstructor
@Controller
//@RequestMapping(path = "api/v1/flashcards")
public class FlashcardController {
private final FlashcardService flashcardService;
public String listFlashcards(Model model) {
List<FlashcardDto> flashcards = flashcardService.getFlashcards();
model.addAttribute("flashcards", flashcards);
return "flashcards-list";
}
}
我尝试将
@GetMapping(path = "api/v1/flashcards", produces = "text/html")listFlashcards()我通过在 href 开头添加
/之前：
<link rel="stylesheet" href="css/style.css">之后：
<link rel="stylesheet" href="/css/style.css">我不太明白为什么它会起作用。