Spring [11] 책 게시판 2-(2) : JSON

• https://jsonplaceholder.typicode.com/
• 연습용사이트

책 삭제

BookRepository

@Repository
public interface BookRepository { 
   public void deleteById(Long id);
}

BookMapper.xml

	<delete id="deleteById">
		DELETE FROM BOOK WHERE ID=#{id}
	</delete>

BookService

    public void remove(Long id){
        bookRepository.deleteById(id);
    }

BookRestController

    // 책 삭제
    @DeleteMapping("/book/{id}") //?id=1
    // <Rest API 명세서>
    // request(요청)
    // DELETE : http://localhost:8081/s02/api/book/{id}
    // id : 삭제할 책 번호
    // response(응답) : Ok
    public String remove(@PathVariable Long id){
        bookService.remove(id);
        return "Ok";
    }

list.js

• 삭제 버튼 만들기
  

html+="<td><button class='btn btn-sm btn-warning' onclick='goDelete("+book.id+")'>삭제</button></td>";
// 백틱이용시 
// html+=`<td><button class='btn btn-sm btn-success' onclick='goDelete("${book.id}")'>삭제</button></td>`;

function goDelete(id){
    console.log(id);
    // DELETE : http://localhost:8081/s02/api/book/{id}
    let deleteURL="http://localhost:8081/s02/api/book/"+id;
    fetch(deleteURL,{
        method : "DELETE"
    })
    .then(response=>{
         if(!response.ok){  // ok=true, false
            throw new Error("Network response was not ok");
         }
         // 다시 리스트 페이지로~~
         location.href="/s02/list";
    })
    .catch(error=>{
        console.log(error);
    });
}

책 등록

list.jsp

• 등록 버튼 만들기

      <button class="btn btn-primary btn-sm" onclick="toggle()">등록</button>
      <div id="book_register" class="mt-4" style="display:none;">
        <!-- 책 등록 폼 -->
        <form>
          <div class="form-group">
            <label for="title">제목:</label>
            <input type="text" class="form-control" placeholder="Enter title" name="title" id="title">
          </div>
          <div class="form-group">
            <label for="price">가격:</label>
            <input type="number" class="form-control" placeholder="Enter price" name="price" id="price">
          </div>
           <div class="form-group">
             <label for="author">저자:</label>
             <input type="text" class="form-control" placeholder="Enter author" name="author" id="author">
           </div>
           <div class="form-group">
             <label for="page">페이지:</label>
             <input type="number" class="form-control" placeholder="Enter page" name="page" id="page">
           </div>
          <button type="submit" class="btn btn-primary btn-sm" onclick="register()">등록</button>
          <button type="reset" class="btn btn-danger btn-sm">취소</button>
        </form>

list.js

• 등록 버튼 토글 기능

function toggle() {
    var reviewForm = document.getElementById("book_register");
    if (reviewForm.style.display === "none" || reviewForm.style.display === "") {
      reviewForm.style.display = "block";
    } else {
      reviewForm.style.display = "none";
    }
}

list.js

• 받아온 데이터들을 json으로 변경해주어야 한다!!

function register(){
    // title, price, author, page -> JSON으로 변경
    let title = document.getElementById("title").value;
    let price = document.getElementById("price").value;
    let author = document.getElementById("author").value;
    let page = document.getElementById("page").value;
    // Object
    let formData = {
        title : title,
        price : price,
        author : author,
        page : page
    }; // Dic
    console.log(formData); // Object -> JSON(String)
    // POST : http://localhost:8081/s02/api/book

    fetch("http://localhost:8081/s02/api/book", {
        method : "POST",
        headers : {
            "Content-Type" : "application/json"
        },
        body : JSON.stringify(formData)
    })
    .then(response=>{
        if(!response.ok){  // ok=true, false
          throw new Error("Network response was not ok");
        }
        location.href="/s02/list";
    })
    .catch(error=>{
       console.log(error);
    });
 }

책 상세보기

BookRestController

// 책 상세보기
    @GetMapping("/book/{id}")
    /* request(요청)
     GET : http://localhost:8081/s02/api/book/{id}
     id : 책번호
     response(응답) : {"id":2,"title":"Python","price":40000,"author":"사과파이","page":400}
     */
    public Book getByBook(@PathVariable long id){
        // Book book = bookService.view(id);
        return bookService.view(id);
    }

list.js

• 책 제목 클릭 시 상세보기(VIEW)로 넘어가기

html+=`<td><a href="/s02/view/${book.id}">${book.title}</a></td>`;

RouteController

	// 책 상세보기
    @GetMapping("/view/{id}")
    public String view(@PathVariable Long id, Model model){
        model.addAttribute("id",id);
        return "view"; // view.jsp
    }

view.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="cpath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>view</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <script src="${cpath}/resources/js/view.js"></script>
  <script>
    bookView("${id}");
  </script>
</head>
<body>
    <div class="container mt-4">
     <h2>Restful Service(SOA), Rest API</h2>
	  <div class="card mt-3">
	    <div class="card-header">Book</div>
	    <div class="card-body" id="bookView">
	    </div>
	    <div class="card-footer">AISCHOOL2024 - Fighting :]</div>
	  </div>
	</div>
</body>
</html>

view.js

• 책 정보 보기

function bookView(id){
    console.log(id);
    // GET : http://localhost:8081/s02/api/book/{id}
    fetch("http://localhost:8081/s02/api/book/"+id)
    .then(response=>response.json())
    .then(book=>{
        let html="";
        html+="<table class='table table-bordered'>";
        html+="<tr>";
        html+="<td>번호</td>"
        html+=`<td>${book.id}</td>`
        html+="</tr>";
        html+="<tr>";
        html+="<td>제목</td>"
        html+=`<td>${book.title}</td>`
        html+="</tr>";
        html+="<tr>";
        html+="<td>가격</td>"
        html+=`<td>${book.price}</td>`
        html+="</tr>";
        html+="<tr>";
        html+="<td>저자</td>"
        html+=`<td>${book.author}</td>`
        html+="</tr>";
        html+="<tr>";
        html+="<td>페이지</td>"
        html+=`<td>${book.page}</td>`
        html+="</tr>";
        html+="</table>"
        document.getElementById("bookView").innerHTML=html;
    })
    .catch(error=>{
        console.log(error);
    });
}