Bonjour. Cette fois, je voudrais implémenter la fonction de recherche au printemps.
1: Brève description de MVC 2: Je veux créer un modèle avec Spring Initializr et créer un Hello world 3: Enregistrer les données temporaires dans MySQL-> Tout obtenir-> Afficher en haut 4: Implémentation de la fonction de publication 5: Changer l'affichage de TODO 6: Implémentation de la fonction de recherche (ici et maintenant)
Le mot de recherche est entré dans search.html
↓
Le contrôleur reçoit le mot de recherche et l'envoie à la classe de service
↓
Dans la classe de service, demandez au référentiel de traiter la recherche
↓
Le référentiel renvoie le résultat au service
↓
Le service renvoie les résultats au contrôleur
↓
Le contrôleur renvoie les résultats dans search.html
↓
Affiché sur html
C'est comme ...!
@Repository
public interface TodoRepository extends JpaRepository<TodoEntity, Long> {
//↓ Ajouter
List<TodoEntity> findByTitleContaining(String searchWord);
}
Jpa dispose de plusieurs méthodes pratiques pour la recherche: FindByTitleContaining En faisant cela, la colonne de titre recherchera le libellé de l'argument.
public List<TodoEntity> findToDoByTitle(String searchWord) {
return todoRepository.findByTitleContaining(searchWord);
}
Ajoutez cette fonction.
L'argument searchWord, qui est une chaîne de caractères, est envoyé à la fonction dans le référentiel précédent. La valeur de retour est List
@GetMapping("/search")
public String showSearch() {
return "search";
}
@GetMapping("/search/result")
public String searchResult(Model model, @ModelAttribute TodoSearchForm searchForm) {
List<TodoEntity> searchResult = todoService.findToDoByTitle(searchForm.getSearchWord());
model.addAttribute("searchResults", searchResult);
return "search";
}
Ajoutez ces deux.
La partie supérieure / recherche affiche l'écran de recherche et la partie inférieure / serach / résultat est là pour afficher les résultats de la recherche.
Vous pouvez envoyer les données acquises vers le fichier html en utilisant model.addAtrribute (). Cette fois, nous envoyons un SearchResult de type List
Créez une classe de navires qui gèrent les caractères saisis pendant la recherche.
TodoSearchForm
package com.example.todo;
import lombok.Data;
import javax.validation.constraints.NotNull;
import javax.validation.constraints.Size;
@Data
public class TodoSearchForm {
private Long id;
@NotNull
@Size(min = 0, max = 30)
private String searchWord;
}
@Data est une annotation Lombok. Il omet les getters, les setters, etc. La chose importante cette fois est que vous pouvez stocker le mot de recherche de chaîne.
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>hello</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head><body>
<!-- Header -->
<div class="container mt-5">
<form th:action="@{/search/result}" method="GET">
<div class="row">
<input type="text" name="searchWord" class="col-8">
<button type="submit" class="ml-3 col-3 btn-primary w-25 btn-lg">Chercher</button>
</div>
</form>
</div>
<div th:if="!${#lists.isEmpty(searchResults)}" class="container mt-5">
<p>Les résultats de la recherche sont<span th:text="${#lists.size(searchResults)}"></span>Il y a des cas</p>
</div>
<div th:each="todo: ${searchResults}" class=" w-75 h-25 my-1 mx-auto pt-5">
<div class="container">
<div class="row">
<div class="col-5 pl-5">
<p th:text="${todo.title}" class="mb-1"></p>
<p class="mb-1">Date limite:<span th:text="${todo.deadline}"></span></p>
<p class="mb-1">Date de création:<span th:text="${todo.createTime}"></span></p>
</div>
<div class="col-2 d-flex justify-content-start align-items-center px-0">
<a th:href="@{/edit/{id}(id=${todo.id})}" class="h-100 w-75 btn btn-info pt-4">
Éditer
</a>
</div>
<div th:if="${todo.status}" class="col-2 d-flex px-0">
<div class="h-100 w-75 badge bg-success text-white d-flex align-items-center">
<h3 class=" my-1 mx-auto">Terminé</h3>
</div>
</div>
<div th:unless="${todo.status}" class="col-2 d-flex px-0">
<div class="h-100 w-75 badge bg-danger text-white d-flex align-items-center">
<h3 class=" my-1 mx-auto">Incomplet</h3>
</div>
</div>
</div>
</div>
</div>
<!--lire bootstrap js-->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Le fait est que vous pouvez afficher le nombre de résultats de recherche en procédant comme suit!
<div th:if="!${#lists.isEmpty(searchResults)}" class="container mt-5">
<p>Les résultats de la recherche sont<span th:text="${#lists.size(searchResults)}"></span>Il y a des cas</p>
</div>
Comment était-ce?
Je pense que le point important cette fois est le référentiel Jpa.
Il y a une référence dans ici, alors vérifiez-la. Je pense!