<!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")，css就不再应用，尽管抽认卡列表仍然以纯文本形式存在.这就是为什么我 comments 了@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()章没有帮助有什么 idea 吗？