Hello. This time I would like to implement the editing function part of TODO posted in Java Spring.
1: [Understanding the super basics] A brief description of MVC 2: [Prepare a template] I want to create a template with Spring Initializr and do Hello world 3: [Connection / Settings / Data display with MySQL] Save temporary data in MySQL-> Get all-> Display on top 4: [POST function] Implementation of posting function 5: [PATCH function] Switch TODO display 6: [Easy to use JpaRepository] Implementation of search function [7: [Common with Thymeleaf template fragment] Create Header] (https://qiita.com/nomad_kartman/items/8c33eca2880c43a06e40) 8: [PUT function] Implementation of editing function (here and now)
First of all, I would like to briefly explain the flow of editing functions!
Search the TODO data you want to edit by ID and display it on the front.
Enter your edits and send them to the controller via PUT
Process internally and save.
As you might expect, it looks like this!
Let's start by displaying the TODO you want to edit on the front desk!
@GetMapping("/edit/{id}")
public String showEdit(Model model, @PathVariable("id") long id ) {
TodoEntity editTarget = todoService.findTodoById(id);
model.addAttribute( "editTarget" , editTarget);
return "edit";
}
First, search the ID of the TODO you want to edit in the TodoEntity you have been using before and pack it.
And by setting model.addAttribute ("variable name", the object you want to pass), you can use this object on the front side.
This time, I will use it as it is with the name editTarget.
Since the transition to the edit page is made by return "edit";, create the edit page.
python
<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Edit</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 -->
<header th:replace="common/header :: header_fragment()"></header>
<!--Edit form-->
<div class=" w-75 h-auto my-1 mx-auto pt-5">
<p class="pl-5">Update tasks</p>
<form th:action="@{'/edit/' + *{id} + '/complete'}" th:object="${editTarget}" method="post" class="container d-flex w-auto my-0 mx-auto">
<div class="w-100">
<label class="row">
<span class="col-2 text-center">ToDo name</span>
<input type="text" name="title" th:value="${editTarget.title}" class="col-9">
</label>
<label class="row my-0">
<span class="col-2 text-center">Deadline</span>
<input type="date" name="deadline" th:value="${editTarget.deadline}" class="col-9 my-0">
</label>
</div>
<input type="hidden" name="_method" value="put">
<button class="btn btn-primary w-25 col-2 mr-3" type="submit">update</button>
</form>
</div>
<!--/Edit form-->
<!--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>
It may be a little long and hard to see, but it is an edit page.
th:action
↓ The first point is the export part of the edit form ↓
python
<form th:action="@{'/edit/' + *{id} + '/complete'}" th:object="${editTarget}" method="post" class="container d-flex w-auto my-0 mx-auto">
th:action="@{'/edit/' + *{id} + '/complete'}"
The contents of the form are sent to the specified URL.
This time
/edit/{id}/complete
I will send it to the URL. This process will be described later.
th:objects
th:object="${editTarget}"
This is the editTarget you just sent from the showEdit function. By doing this, you can use editTarget in this form.
I think this is the point that tends to get stuck in this process.
This time, I want to use the PUT method for editing, so with method = "put"! ?? You might think that.
(Actually I did that at first)
But HTML5 can't handle PUT / DELETE methods!
Therefore, the following processing is required.
You may wonder why such a troublesome thing is ... but for now it seems that there is no choice but to do this.
so
python
<input type="hidden" name="_method" value="put">
By preparing an input that is not displayed on the front side, POST is converted to PUT.
However, in fact, this alone will cause an error, so add the following to application.properties.
resources/application.properties
spring.mvc.hiddenmethod.filter.enabled=true
This will eliminate the error.
By the way Handling HTTP PUT / DELETE method in SpringBoot2.2 + Thymeleaf If you are interested, please read this article as it will deepen your understanding.
Next, we will implement the part that processes the edited contents.
java/com/example/todo/TodoController.java
@PutMapping("/edit/{id}/complete")
public String edit(@ModelAttribute TodoForm formData, @PathVariable("id") long id) {
todoService.editToDo(formData);
return "redirect:/top";
}
Add PUT Mapping to your controller.
Store the data sent from the front with @ModelAttribute in the TodoForm class.
↓ And I will send the object to editTodo of service class ↓
java/com/example/todo/TodoService.java
public void editToDo(TodoForm formData) {
TodoEntity todoEntity = findTodoById(formData.getId());
todoEntity.setTitle(formData.getTitle());
todoEntity.setDeadline(formData.getDeadline());
todoEntity.setStatus(formData.isStatus());
todoRepository.save(todoEntity);
}
Get TODO from id and rewrite the value to formData which is the edited content.
Since there is no return value this time, it is set to void.
This completes the implementation of the editing process!
Recommended Posts