Framework/Spring Framework

(22.12.29)Spring 프레임워크: Thymeleaf, JPA, Spring 프레임워크에 dependency하여 활용 및 CRUD

프로그래머 오월 2022. 12. 29.

●● Thymeleaf와 JPA를 이용한 CRUD ●●

    - JSP + EL
    - thymeleaf ( html + Spring EL )
       Natural Templating: DB, Front End

   1. Spring boot 프로젝트 새로 생성
   2. application.properties, pom.xml 복사
   3. application.properties, pom.xml에 thumeleaf 관련 설정 추가

●●Thymeleaf 설정하기●●

-application.properties

# Thymeleaf
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/

templates라는 폴더 경로에
spring.thymeleaf.suffix=.html

확장자가 html
spring.thymeleaf.view-names=thymeleaf/*

thymeleaf 이름으로 시작되는 모든 뷰들

templates라는 폴더 경로에 thymeleaf 이름으로 시작되는 모든 뷰들이 확장자가 html로 저장된다.

-pom.xml

●●Thymeleaf를 활용한 eclipse 에서 html 코딩 예제●●

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

import java.util.*;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import jakarta.servlet.http.HttpServletRequest;
 
@Controller
@RequestMapping("/th")
public class ThymeleafController {
    @GetMapping("/")
    public String index(Model m, HttpServletRequest session) {
        m.addAttribute("greeting", "Hello world!");
        m.addAttribute("url", "th/");
        m.addAttribute("msg", "Happy New Year!");
        m.addAttribute("success", true);
        m.addAttribute("gender", "M");
        m.addAttribute("nums", new int[] { 1, 3, 5, 7, 9 });
        m.addAttribute("scores", Arrays.asList(5, 7, 9, 10));
        m.addAttribute("names", Arrays.asList("smith", "mary", "jone"));
        // asList = List 를 생성해줌
        session.setAttribute("userid", "login-userid");
        m.addAttribute("emp", new Emp(11, "smith", 20, java.sql.Date.valueOf("2022-12-25")));
        Map<String, Integer> map = new HashMap<>();
        map.put("smith", 78);
        map.put("mary", 88);
        map.put("jone", 66);
        m.addAttribute("credit", map);
        return "thymeleaf/index";
    }
}
Colored by Color Scripter

cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>연습장</title>
</head>
<body>
<h3>안녕하세요</h3>
 
<!-- Variable Expression -->
<div th:text="${greeting}"></div>
<div>[[${greeting}]]</div>
<p>
<a href="/th/">index.html</a>
<p>
 
<!-- URL Expression -->
<a th:href="@{'/' + ${url} }">index.html</a>
<p>
<a th:href="${'/' + url }">index.html</a>
<p>
<input type="text" value="1+2">
<p>
<input type="text" th:value="1+2"> <!-- 3표시됨 -->
<p>
<div th:text="${msg}"></div>
<p>
<div th:text="${success} ? '성공' : '실패'" ></div>
<div th:text="${success ? 'true':'false'}" ></div>
 
<p>
<div th:if="${gender=='M'}" >남자</div>
<div th:unless="${gender=='M'}" >여자</div><!-- 표시 안됨 -->
<p>
<!-- switch case -->
<div th:switch="${gender}">
    <span th:case="M">Male</span>
    <span th:case="F">Female</span>
    <span th:case="*">Others</span>
</div>
<!-- 리스트 사이즈 -->
<div th:text="'배열 원소수:' + ${nums.length} + '개'"></div>
<div th:text="${nums[0]}"></div><!-- 배열의 원소 출력 -->
 
<div th:text="'리스트 원소수:' + ${#lists.size(scores)} + '개'"></div>
<!-- 반복문 -->
<div>
   <span th:each="n : ${nums}">
      [[${n}]]
   </span>
</div>
<div> <!-- 상태변수: index, count, size, even/odd, first, last -->
   <span th:each="name, iStat : ${names}">
      [[${iStat.index}]].[[${name}]]
   </span>
</div>
<!-- Map 다루기 -->
<p th:each="user :${credit}">
    <span th:text="${user.key}"></span>
    <span th:text="${user.value}"></span>
</p>
 
<!-- 영역 오브젝트 -->
<p th:text="${param.q}">Test</p> <!--요청 파라미터 localhost/th/메소드getmapping주소명?q=여기에 값이와야함-->
<p th:text="'이용자 아이디:' + ${session.userid}">
 
<!-- 객체의 속성 -->
<p th:text="${emp.empno} +'/'+ ${emp.ename}">
</main>
</body>
</html>
Colored by Color Scripter

cs

●●Thymeleaf, JPA, Spring 프레임워크 활용하여 사원 CRUD 하기●●

@Entity를 위한 VO Class인 Emp.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.SequenceGenerator;
import jakarta.persistence.Table;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;
 
@Data
@ToString
@Entity
@AllArgsConstructor
@NoArgsConstructor
@Table(name="emp5")
public class Emp 
{
    @Id
    @SequenceGenerator(sequenceName = "EMP5_EMPNO_SEQ", allocationSize =1, name="EMP5_EMPNO_GEN" )
    @GeneratedValue(strategy = GenerationType.SEQUENCE, generator="EMP5_EMPNO_GEN")
    private int empno;
    
    @Column(name="ename")
    private String name;
    
    private int deptno;
    private int sal;
    private java.sql.Date hiredate;    
}
Colored by Color Scripter

cs

JpaRepository 를 상속받기 위한 Emp5Repository class

1
2
3
4
5

import org.springframework.data.jpa.repository.JpaRepository;
 
public interface Emp5Repository extends JpaRepository<Emp,Integer>  {
 
}
Colored by Color Scripter

cs

Controller : EmpController

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

import java.util.List;
import java.util.Optional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import lombok.extern.slf4j.Slf4j;
 
@Controller
@Slf4j
@RequestMapping("/jpaemp")
public class EmpController {
    @Autowired
    private Emp5Repository repo;
    
    @GetMapping("/add")
    
    public String add() {
        return "thymeleaf/empAdd";
    }
    @PostMapping("/add")
    public void addemp(Emp emp) {
        repo.save(emp);
    }
    @GetMapping("/list")
    public String list(Model m) {
        
        List<Emp> saved = repo.findAll();
        m.addAttribute("list",saved);
        return "thymeleaf/empList";
    }
    
    @GetMapping("/detail/{empno}")
    
    public String findById(@PathVariable int empno, Model m) {
        Optional<Emp> op = repo.findById(empno);
        if(op.isEmpty()) {
            return empno+"번호로 검색실패";
        }
        m.addAttribute("emp",op.get());
        return "thymeleaf/empDetail";
    }
    @GetMapping("/update/{empno}")
    public String updateByEmpno(@PathVariable int empno, Model m) {
        Optional<Emp> op = repo.findById(empno);
        if(op.isEmpty()) {
            return empno+"번호로 검색실패";
        }
        
        m.addAttribute("emp",op.get());
        return "thymeleaf/empUpdate";
    }
    @PostMapping("/edit")
    @ResponseBody
    public String edit(Emp emp) {
        int empno = emp.getEmpno();
        Optional<Emp> op = repo.findById(empno);
        if(op.isEmpty()) {
            return empno+"번호로 검색실패";
        }
        Emp updateEmp = op.get();
        updateEmp.setDeptno(emp.getDeptno());
        updateEmp.setSal(emp.getSal());
        repo.save(updateEmp);
        return "수정성공";
    }
    
    @GetMapping("/delete/{empno}")
    @ResponseBody
    public String deleteByEmpno(@PathVariable int empno) {
        Optional<Emp> op = repo.findById(empno);
        if(op.isEmpty()) {
            return empno+"번호로 검색실패";
        }
        else repo.deleteById(empno);
        return "삭제성공";
    }
}
Colored by Color Scripter

cs

empAdd.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<form action="/jpaemp/add" method="post" >
    
    <div>
        <label for="name">이름</label> 
        <input id="name" type="text" name="name" value="">
    </div>
    <div>
        <label for="deptno">부서</label> 
        <select id="deptno"  name="deptno">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        </select>
    </div>
    <div><label>급여</label> 
        <input id="sal" type="number" name="sal" value="">
    </div>
    <div><label>입사</label> 
        <input id="hiredate" type="date" name="hiredate" value="">
    </div>
    <div class="btn">
        <button type="reset">취소</button>
        <button type="submit">추가</button>
    </div>
</form>
</body>
</html>
Colored by Color Scripter

cs

실행결과:

empList.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<form action="/jpaemp/add" method="post" >
    
    <div>
        <label for="name">이름</label> 
        <input id="name" type="text" name="name" value="">
    </div>
    <div>
        <label for="deptno">부서</label> 
        <select id="deptno"  name="deptno">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        </select>
    </div>
    <div><label>급여</label> 
        <input id="sal" type="number" name="sal" value="">
    </div>
    <div><label>입사</label> 
        <input id="hiredate" type="date" name="hiredate" value="">
    </div>
    <div class="btn">
        <button type="reset">취소</button>
        <button type="submit">추가</button>
    </div>
</form>
</body>
</html>
Colored by Color Scripter

cs

실행결과 :

empDetail.html

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<p th:text="${emp.empno} +'/'+ ${emp.name}+'/'+ ${emp.deptno}+'/'+ ${emp.sal}+'/'+ ${emp.hiredate}"></p>
<a th:href="@{'/jpaemp/update/'+${emp.empno}}">사원정보수정</a>
<a th:href="@{'/jpaemp/delete/'+${emp.empno}}">사원정보삭제</a>
</body>
</html>
Colored by Color Scripter

cs

실행결과 :

empUpdate.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
<form action="/jpaemp/edit" method="post" >
    <input type="hidden" name="empno" th:value="${emp.empno}">
    <div>
        <label for="empno">사번</label> 
        <p th:text="${emp.empno}"></p>
    </div>
    <div>
        <label for="name">이름</label> 
        <p th:text="${emp.name}"></p>
    </div>
    <div>
        <label for="deptno">부서</label> 
        <select id="deptno"  name="deptno">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        </select>
    </div>
    <div><label>급여</label> 
        <input id="sal" type="number" name="sal" value="">
    </div>
    <div><label>입사일</label> 
        <p th:text="${emp.hiredate}"></p>
    </div>
    <div class="btn">
        <button type="reset">취소</button>
        <button type="submit">수정</button>
    </div>
</form>
</body>
</html>
Colored by Color Scripter

cs

실행결과 :

사원 삭제하기

'Framework > Spring Framework' 카테고리의 다른 글

(23.01.02)Spring 프레임워크: 웹소켓을 이용한 채팅프로그램 만들기 (0)	2023.01.02
(22.12.30)Spring 프레임워크:WebSocket을 사용한 채팅 프로그램 만들기 (1)	2022.12.30
(22.12.28)Spring 프레임워크: JPA 연동하여 프로그래밍 하기 (기초) (0)	2022.12.29
(22.12.27)Spring 프레임워크: Mybatis로 Spring과 Oracle 연동하여 게시판 상세보기, 첨부파일 다운로드하기 (0)	2022.12.27
(22.12.26)Spring 프레임워크: PageHelper를 이용한 고수준 pagination 구현, Mybatis로 Spring과 Oracle 연동하여 게시판 리스트 보기 (0)	2022.12.26

(22.12.29)Spring 프레임워크: Thymeleaf, JPA, Spring 프레임워크에 dependency하여 활용 및 CRUD

●● Thymeleaf와 JPA를 이용한 CRUD ●●

●●Thymeleaf 설정하기●●

-application.properties

-pom.xml

●●Thymeleaf를 활용한 eclipse 에서 html 코딩 예제●●

●●Thymeleaf, JPA, Spring 프레임워크 활용하여 사원 CRUD 하기●●

@Entity를 위한 VO Class인 Emp.java

JpaRepository 를 상속받기 위한 Emp5Repository class

Controller : EmpController

empAdd.html

empList.html

empDetail.html

empUpdate.html

'Framework > Spring Framework' 카테고리의 다른 글

댓글

티스토리툴바