2023-09-13 82일차

2023. 9. 13. 19:24

스프링 부트_Spring Data JPA_2

프로젝트 구조

entity

package org.zerock.ex2.entity;

import lombok.*;

import javax.persistence.*;

@Entity
@Table(name = "tb1_memo")
@ToString
@Getter
@Setter
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class Memo {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long mno;

    @Column(length = 200, nullable = false)
    private String memoText;
}

JPA 관련 application.properties

auto= create 하면 기존 테이블 삭제 후 다시 생성되기떄문에 데이터가 전부 사라짐 ( 테스트 할 때 사용 )

테스트 완료되면 auto = none로 설정을 바꿔줘야 됨

spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.format_sql=true
spring.jpa.show-sql=true

MemoRepository 인터페이스 생성 JpaRepository 상속

사용할 때는 엔티티의 타입 정보 (Memo 클래스 타입)와 @Id의 타입을 지정하게 됨

package org.zerock.ex2;

import org.springframework.data.jpa.repository.JpaRepository;
import org.zerock.ex2.entity.Memo;

public interface MemoRepository extends JpaRepository<Memo, Long> {



}

CRUD 테스트

insert 작업 : save(엔티티 객체)

select 작업 : findById(키 타입), getOne(키 타입)

update 작업 : save(엔티티 객체)

delete 작업 : deleteById(키 타입), delete(엔티티 객체)

package org.zerock.ex2;

import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.zerock.ex2.entity.Memo;

import java.util.stream.IntStream;

@SpringBootTest
class Ex2ApplicationTests {

    @Autowired
    MemoRepository memoRepository;

    @Test
    void contextLoads() {
    }

    @Test
    public void testClass(){

        System.out.println(memoRepository.getClass().getName());

    }

    @Test // insert 테스트 
    public void testInsertDummies(){

        IntStream.rangeClosed(1,10).forEach(i -> {
            Memo memo = Memo.builder().memoText("Sample..." + i).build();
            memoRepository.save(memo);
        });
    }

    @Test // select 테스트
    public void testSelect(){
//        System.out.println(memoRepository.findAll());
//        Long mno = 10L;


    }


}

controller

package org.zerock.ex2.controller;

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.zerock.ex2.MemoRepository;
import org.zerock.ex2.entity.Memo;

import java.util.List;

@Controller
public class TestController {

    @Autowired
    MemoRepository memoRepository;

    @GetMapping("/list")
    public String list(Model model) {

        List<Memo> list = memoRepository.findAll();
        model.addAttribute("list", list);

        return "test";
    }



}

JSP

<%--
  Created by IntelliJ IDEA.
  User: 1
  Date: 2023-09-12
  Time: 오전 11:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
나옴

    <ul>

        <c:forEach var="memo" items="${list}">
           <li>${memo.memoText}</li>

        </c:forEach>
    </ul>




</body>
</html>

Ajax Json Jquery fetch

@Entity

package org.zerock.ajax1.entity;

import lombok.*;

import javax.persistence.*;

@Entity
@ToString
@Getter
@Setter
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class Memo {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long mno;

    @Column(length = 200, nullable = false)
    private String memoText;
}

JpaRepository

package org.zerock.ajax1.repository;

import org.springframework.data.jpa.repository.JpaRepository;
import org.zerock.ajax1.entity.Memo;

public interface MemoRepository extends JpaRepository<Memo, Long> {
}

Controller

package org.zerock.ajax1.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.zerock.ajax1.repository.MemoRepository;

@Controller
public class TestController {

    @Autowired
    MemoRepository memoRepository;

    @GetMapping("/ajax")
    public String ajax1(){
        return "ajaxTest";
    }

    @GetMapping("/ajax2")
    public String ajax2(){
        return "ajaxTest2";
    }
}

package org.zerock.ajax1.controller;

import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.zerock.ajax1.entity.Memo;
import org.zerock.ajax1.repository.MemoRepository;

import java.util.Optional;

@RestController
@Slf4j
public class MyController {

    @Autowired
    MemoRepository memoRepository;

    @GetMapping("memo/{id}")
    public ResponseEntity<Optional<Memo>> getList(@PathVariable("id") Long id){
        log.info("id: {}", id);
        return new ResponseEntity<>(memoRepository.findById(id), HttpStatus.OK);
    }

    @PostMapping("/input") // @RequestBody : JSON형식
    public ResponseEntity<Long> reqister(@RequestBody Memo memo){
        log.info("memo: {}", memo);
        memoRepository.save(memo);
        return new ResponseEntity<>(memo.getMno(), HttpStatus.OK);
    }
}

Jquery

<%--
  Created by IntelliJ IDEA.
  User: 1
  Date: 2023-09-13
  Time: 오전 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
</head>
<body>
<div id="here">
</div>

<input type="text" id="memoId" />
<button id="btn">클릭</button>

<label>
    <p>
        <input type="text" name="memoText" />
        <button id="btn2">입력</button>
    </p>
</label>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    /*jquery 값 가져오기*/
    $(document).ready(function (){
       $("#btn").on("click", function (){
          let id = $('#memoId').val();

          $.getJSON('/memo/'+id, function (data){


              console.log(data);

              let str;
              str = "<p>" + data.mno+"<br/>"+data.memoText+"</p>";
              $("#here").html(str);
          });
       });
    });

    /* jquery 값 넣기*/
    $(document).ready(function (){

        $('#btn2').on("click", function (){
            let memo = {
                memoText: $('input[name="memoText"]').val()
            };
            console.log(memo);

            $.ajax({

                url: '/input/',
                method: 'post',
                data: JSON.stringify(memo),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',

                success: function (data){
                    console.log(data);
                }

            });
        });
    });




</script>

</body>
</html>

fetch

<%--
  Created by IntelliJ IDEA.
  User: 1
  Date: 2023-09-13
  Time: 오전 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
</head>
<body>
<div id="here">
</div>

<input type="text" id="memoId" />
<button id="btn">클릭</button>

<label>
    <p>
        <input type="text" name="memoText" id="id2" />
        <button id="btn2">입력</button>
    </p>
</label>

<script>

    /*패치 select */
    let btn = document.querySelector("#btn");
    let id = document.querySelector("#memoId");
    let here = document.querySelector("#here");
    let btn2 = document.querySelector("#btn2");


    btn.addEventListener("click", function (){

        let val = id.value;
        console.log(val);

        fetch("/memo/"+val, {

            method: "GET",
        })
            .then((response) => response.json())
            .then((data) => {
                console.log(data);
                here.innerHTML = "<p>"+data.mno+"<br/>"+data.memoText+"</p>"
            })
    });

    /*패치 insert */
    btn2.addEventListener("click", function (){
       const val = document.querySelector("#id2").value;
       let memo = {
           memoText: val,
       };

       fetch("/input/", {
           method: "POST",
           headers: {
               "Content-Type" : "application/json",
           },
           body : JSON.stringify(memo),
       })
           .then((response) => response.json())
           .then((data) => console.log(data));
    });

</script>

</body>
</html>

저작자표시

'프로젝트 기반 자바(JAVA) 응용 SW개발자 취업과정' 카테고리의 다른 글

2023-09-15 84일차 (0)	2023.09.21
2023-09-14 83일차 (0)	2023.09.14
2023-09-12 81일차 (0)	2023.09.12
2023-09-11 80일차 (0)	2023.09.11
2023-09-08 79일차 (0)	2023.09.08

CO_JUN 개발일지