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

totwo·2024년 9월 18일

AISCHOOL2024 Java Spring

Spring/JPA

목록 보기

12/17

SOA(service-oriented architecture)
: 서비스 지향 아키텍처

책 수정

view.jsp

// 수정버튼
<button type="submit" class="btn btn-primary btn-sm" onclick="register()">등록</button>

view.js

// 책 수정
function goUpdate(id){
    location.href="/s02/update/"+id;
}

RouteController.java

    // 책 수정
    @GetMapping("/update/{id}")
    public String update(@PathVariable Long id, Model model){
        model.addAttribute("id", id);
        return "update"; // update.jsp
    }

update.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>
  <title>update.jsp</title>
  <meta charset="utf-8">
  <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/update.js"></script>
  <script>
      bookUpdateFn("${id}"); // 함수
  </script>
</head>
<body>

<div class="container mt-4">
  <h2>Restful Service(SOA), Rest API</h2>
  <div class="card">
    <div class="card-header">Book Update</div>
     <div class="card-body" id="update">

     </div>
    </div>
    <div class="card-footer">AISCHOOL2024 - Fighting :]</div>
  </div>
</div>
</body>
</html>

update.js

function bookUpdateFn(id){
    fetch("http://localhost:8081/s02/api/book/"+id)
    .then(response=>response.json())
    .then(book=>{
    // 수정폼을 동적으로 만들기
        let html="";
        html+="<form>";
        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><input type='text' id='title' class='form-control' value='${book.title}'/></td>`;
        html+="</tr>";
        html+="<tr>";
        html+="<td>가격</td>";
        html+=`<td><input type='number' id='price' class='form-control' value='${book.price}'/></td>`;
        html+="</tr>";
        html+="<tr>";
        html+="<td>저자</td>";
        html+=`<td><input type='text' id='author' class='form-control' value='${book.author}'/></td>`;
        html+="</tr>";
        html+="<tr>";
        html+="<td>페이지</td>";
        html+=`<td><input type='number' id='page' class='form-control' value='${book.page}'/></td>`;
        html+="</tr>";
        html+="</table>";

        // 수정, 취소 버튼
        html+="<div class='mx-4 mb-4'>";
        html+="<button type='button' class='btn btn-sm btn-primary' onclick='goList()'>목록</button>";
        html+=`<button type='button' class='btn btn-sm btn-info' onclick='goUpdate(${book.id})'>수정</button>`;
        html+="<button type='reset' class='btn btn-sm btn-warning'>취소</button>";
        html+="</div>";
        html+="</form>";
        document.getElementById("update").innerHTML=html;
    })
    .catch(error=>{
       console.log("error", error);
    });
}

function goList(){
    location.href='/s02/list';
}

BookRestController

    // 책 수정
    @PutMapping("/book/{id}")
    public String updateModify(@PathVariable Long id, @RequestBody Book book){
        // id는 들고 오고, 나머지는 json으로 받는 것 : title, price, author, page
        bookService.modify(id,book);
        return "ok";
    }

BookService

    // 책 수정
    public void modify(Long id, Book book){
        // book.setId(id);로 해서 update에 book하나만 받아도 되긴 함.
        bookRepository.update(id, book);
    }

BookRepository

@Repository
public interface BookRepository { 
   public void update(@Param("id") Long id, @Param("book") Book book);
}

BookMapper.xml

	<update id="update">
		UPDATE BOOK
		SET TITLE=#{book.title}, PRICE=#{book.price}, AUTHOR=#{book.author}, PAGE=#{book.page}
		WHERE ID=#{id}
	</update>

update.js

글 수정

// 수정
function goUpdate(id){
  console.log(id); // 번호
  // PUT :  수정 Rest API : 수정번호 + 수정데이터(JSON)
  let title=document.getElementById("title").value;
  let price=parseInt(document.getElementById("price").value); // "price" : 30000
  let author=document.getElementById("author").value;
  let page=parseInt(document.getElementById("page").value);
  let formData={
        title : title,
        price : price,
        author : author,
        page : page
  };

  fetch("http://localhost:8081/s02/api/book/"+id, {
    method : "PUT",
    headers : {
       "Content-Type" : "application/json"
    },
    body : JSON.stringify(formData)
  })
  .then(response=>{
     if(!response.ok){
        throw new Error("Network response was not ok");
     }
     location.href="/s02/view/"+id; // 책 상세보기
   })
  .catch(error=>{
     console.log("error", error);
   });
}