Hello. This time I would like to do the posting function part of the TODO application in Java.
By the way, I didn't touch on validation this time, but I will introduce the method only for normal processing because it will appear in a later article.
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 (here and now)
First of all, I would like to prepare a container for data when the user registers TODO. This time I would like to implement it in the TodoForm class.
I think that the hierarchy for creating classes should be the same as TodoContoroller.
java/com/example/todo/TodoForm.java
@Data
public class TodoForm {
private long Id;
@NotNull
@Size(min = 1, max =30)
private String title;
@DateTimeFormat(pattern = "yyyy-MM-dd")
private LocalDate deadline;
private boolean status;
}
↑ It should be like this.
It seems that the specifications have changed from Spring 2.3, so you need to add it manually in order to use validation annotations.
build.gradle
dependencies {
compile group: 'javax.validation', name: 'validation-api', version: '2.0.1.Final'
}
If you add the above to dependencies, you can use @Size and so on!
Next is the editing of Service.
java/com/example/todo/TodoService.java
@Service
@RequiredArgsConstructor
public class TodoService {
private final TodoRepository todoRepository;
//~ Abbreviation ~
public void setTodo(TodoForm formData) {
TodoEntity todo = new TodoEntity();
todo.setTitle(formData.getTitle());
todo.setDeadline(formData.getDeadline());
todoRepository.save(todo);
}
}
Since we only register this time, the return value is void.
Set the TodoForm type formData passed as an argument to the newly created TodoEntity and save it. Since set ~~ and get ~~ are attached with @Data in each class, LomBok can automatically create and use setters and getters.
It may be difficult to understand this area suddenly when using Lombok, so if you want to understand more deeply, you should investigate the concept of getter setter.
Finally, save it with the function save of the Repository class and save it in the DB!
Now that the Service class has been implemented, let's call it from the controller!
python
@Controller
@RequiredArgsConstructor
public class TodoController {
// ~Abbreviation~
@PostMapping("/register")
public String register(@ModelAttribute TodoForm formData) {
todoService.setTodo(formData);
return "redirect:/top";
}
}
What I would like to pay attention to here is the @ModelAttribute annotation!
This annotation has different uses depending on whether it is used as an argument or immediately before a method!
The usage this time is to make the data sent from the front side into TodoForm type so that it can be used in the function.
Please refer to the here site for easy-to-understand explanations.
Register TODO in DB by sending formData to setTodo created earlier.
Also, when the processing is finished, it will transition to / top.
Finally, let's edit the front side!
python
~Abbreviation
<body>
<!--Post form-->
<div class=" w-75 h-auto my-1 mx-auto pt-5">
<p class="pl-5">Create a new task</p>
<form th:action="@{/register}" th:object="${ToDoForm}" 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" placeholder="Enter ToDo within 30 characters" class="col-9">
</label>
<label class="row my-0">
<span class="col-2 text-center">Deadline</span>
<input type="date" id="date" name="deadline" class="col-9 my-0">
</label>
</div>
<button class="btn btn-primary w-25 col-2 mr-3" type="submit">Add ToDo</button>
</form>
</div>
</body>
I am trying to skip the registration contents to the function of the controller mapped to / register with th: action.
Also, since method = "POST", detailed specifications such as POST and / register functions are specified.
This idea is very important for understanding the nature of HTTP methods, so you may want to refer to the here site.
th: object is used to specify a container for the transmitted data.
The submitted data is inserted into the TodoForm object created at the very beginning of this article.
When the registration button is pressed
<input type="text" name="title" placeholder="Enter ToDo within 30 characters" class="col-9">
The content entered in name = "title" is stored in the variable with the same name (of course, title) of the FormData class.
How was it? To summarize briefly ...
It is like this!
I think you could gradually understand the flow of MVC.
Next time, I would like to touch on the edit page. See you again!
Recommended Posts