Let's create a TODO application in Java 6 Implementation of search function

Hello. This time I would like to implement the search function in Spring.

TODO application creation link collection

1: Brief description of MVC 2: I want to make a template with Spring Initializr and make a Hello world 3: Save temporary data in MySQL-> Get all-> Display on top 4: Implementation of posting function 5: Switch the display of TODO 6: Implementation of search function (here and now)

Implementation flow

Search word is entered in search.html

↓

The controller receives the search word and sends it to the service class

↓

In the service class, ask the repository for search processing

↓

Repository returns results to service

↓

Service returns results to controller

↓

Controller returns results in search.html

↓

Displayed on html

It's like ...!

Editing repository classes

@Repository
public interface TodoRepository extends JpaRepository<TodoEntity, Long> {

    //↓ Add
    List<TodoEntity> findByTitleContaining(String searchWord);

}

Jpa has multiple methods that are convenient for searching. FindByTitleContaining By doing this, the title column will search for the wording in the argument.

Edit service class

   public List<TodoEntity> findToDoByTitle(String searchWord) {
        return todoRepository.findByTitleContaining(searchWord);
    }

Add this function.

The argument searchWord, which is a string, is sent to the function in the repository. The return value is List .

Edit controller

    @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";
    }

Add these two.

The upper / search is for displaying the search screen, and the lower / serach / result is for displaying the search results.

You can send the acquired data to the html file by using model.addAtrribute (). This time, we are sending a SearchResult of type List .

Creating a TodoSearchForm class

Create a class of vessels that handles the characters entered during the search.

`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 is an annotation of Lombok. It omits getters, setters, etc. The important thing this time is that you can store the String search Word.

Create search.html

<!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">Search</button>
        </div>
    </form>
</div>

<div th:if="!${#lists.isEmpty(searchResults)}" class="container mt-5">
    <p>Search results are<span  th:text="${#lists.size(searchResults)}"></span>There are cases</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">Deadline:<span  th:text="${todo.deadline}"></span></p>
                <p class="mb-1">Creation date:<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">
Edit
                </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">Done</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">Incomplete</h3>
                </div>
            </div>
        </div>
    </div>
</div>
<!--read 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>

The point is that you can show how many search results there are by doing the following!

<div th:if="!${#lists.isEmpty(searchResults)}" class="container mt-5">
    <p>Search results are<span  th:text="${#lists.size(searchResults)}"></span>There are cases</p>
</div>

Summary

How was it?

I think the important point this time is the Jpa repository.

There is a reference in here, so check it out. I think!