Break Out of Your Comfort Zone

[thymeleaf] 3. spring boot + thymeleaf crud 구현하기

 
  • Mar 27, 2021


목차

  1. [Create] Controller에 Thymeleaf Form 데이터 전송하기
  2. [Read] table에서 th:each를 이용하여 반복문 사용하기
  3. [Update] Get, Post를 모두 사용하여 학생 정보 업데이트하기
  4. [Delete] 목록에서 Ajax를 이용하여 학생 정보 삭제하기



이번 글에서는 실습을 통해 앞에서 정리한 타임리프 사용법을 익혀보려고 한다.

Student 객체를 생성하고 Spring Controller와 Tymeleaf를 이용하여 학생 정보를 CRUD 하는 간단한 예제를 실습해 볼 예정이다.

Spring Boot와 Thymeleaf 사용법 익히기
- Create : form과 th:field를 이용하여 Controller에 데이터 전송하기
- Read : table과 th:each를 이용하여 List 읽기
- Update : Get, Post 방식으로 데이터 전송하기
- Delete : Ajax를 이용한 학생 정보 삭제 - th:each 내부의 특정 id 전달하기



디렉토리 구조

스크린샷 2021-03-31 오후 9 46 37



1. [Create] Controller에 Thymeleaf Form 데이터 전송하기

form에서 학생 정보 Student(“21000004”, “Lauv”, 26, “1994-08-08”)를 입력 후 컨트롤러에서 학생 목록 페이지로 리다이렉트 시켜보았다.


1) Controller - 입력 화면(insertStudentInfo)으로 이동
// StudentController.java
@RequestMapping("/insertStudentInfo")
ModelAndView insertStudntInfo() {
  // templates 폴더 아래 html 경로 입력(확장자 생략)
  ModelAndView mav = new ModelAndView("student/insertStudentInfo");

  mav.addObject("student", new Student());

  return mav;
}


2) 입력 - student/insertStudent.html

입력 후 Controller에서 /student/selectAllStudentInfo로 리다이렉트

스크린샷 2021-03-31 오후 11 49 11


<!-- insertStudentInfo.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>insertStudentInfo</title>
    <style>
      span {
        display: inline-block;
        width: 50px;
        margin-top: 15px;
        margin-left: 10px;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <form action="insertStudentInfoForm" , method="post">
      <span>ID</span>
      <input type="text" th:field="${student.id}" /> <br />
      <span>Name</span>
      <input type="text" th:field="${student.name}" /> <br />
      <span>Age</span>
      <input type="text" th:field="${student.age}" /> <br />
      <span>Birth</span>
      <input type="date" th:field="${student.birth}" /> <br />

      <input type="submit" />
    </form>
  </body>
</html>


개발자 도구를 이용하여 코드를 살펴보면 th:field가 id와 name을 자동으로 생성해주는 것을 확인해볼 수 있다 :)

스크린샷 2021-04-01 오전 12 30 25


3) Controller - insertStudentForm

결과 - selectAllStudentInfo 리다이렉트

스크린샷 2021-04-01 오전 12 03 48

// StudentController.java
@PostMapping("/insertStudentInfoForm")
ModelAndView insertStudentInfoRedirect(@ModelAttribute("student") Student student) {
  // 학생 목록 화면으로 리다이렉트
  ModelAndView mav = new ModelAndView("redirect:/student/selectAllStudentInfo");

  log.info(student.toString());

  studentSerivce.insertStudent(student);	// DB - Student 테이블에 입력

  return mav;
}




2. [Read] table에서 th:each 반복문 사용하기]

thymleaf에서는 th:each 를 사용해서 List, Map 등을 반복 접근할 수 있다.

th:each를 이용한 객체 접근과 ~~stat를 이용하여 index, count 접근 방법들을 살펴보려고 한다.

Controller에서 List<Student> 를 넘기고, 타임리프에서 모든 Student 정보를 출력하는 예제를 진행해보았다.


1) StudentController.java
package com.example.spring.controller;

import lombok.extern.slf4j.Slf4j;

import java.util.List;

import com.example.spring.model.Student;
import com.example.spring.service.StudentService;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Slf4j
@Controller
@RequestMapping("student")
public class StudentController {

    @Autowired
    StudentService studentSerivce;

    @RequestMapping("/selectAllStudentInfo")
    ModelAndView selectAllStudentInfo() {
        ModelAndView mav = new ModelAndView("student/selectAllStudentInfo");
        
        List<Student> studentList = studentSerivce.selectStudentList();
        
        mav.addObject("title", "selectStudentInfo()");
        // 여기서 지정한 이름(studentList)를 이용하여 타임리프에서 데이터에 접근할 수 있다.
        mav.addObject("studentList", studentList);
        
        return mav;
    }
}


2) student/selectAllStudentInfo.html
<!DOCTYPE html>
<html>
  <head>
    <title>Student List</title>
  </head>
  <body>
    <div>
      <table id="studentTable">
        <tr>
          <th>순서</th>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
          <th>Birth</th>
        </tr>
        <!-- th: each를 이용하면 반복문을 이용할 수 있다. -->
        <!-- th:each="student, studentStat: ${studentList}" 와 동일하며
				  status를 명시하지 않더라도 앞의 "오브젝트명stat" 를 이용하여 접근 가능하다. -->
        <tr th:each="student: ${studentList}">
          <td th:text="${studentStat.index+1}"></td>
          <td th:text="${student.id}"></td>
          <td th:text="${student.name}"></td>
          <td th:text="${student.age}"></td>
          <td th:text="${student.birth}"></td>
        </tr>
      </table>
    </div>
  </body>
</html>


결과 화면

스크린샷 2021-03-31 오후 9 50 52




3. [Update] Get, Post를 모두 사용하여 학생 정보 업데이트하기




4. [Delete] 목록에서 Ajax를 이용하여 학생 정보 삭제하기




<a href="https://hits.seeyoufarm.com"><img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https://sujinhope.github.io/2021/03/27/Thymeleaf-3.-Spring-Boot-+-Thymeleaf-CRUD-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0.html%2F&count_bg=%2379C83D&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=views&edge_flat=false"/></a>
Search