67일차

1. ajax restful 게시판 update 만들기

RestBoardController

package edu.ict.ex.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.DeleteMapping;
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.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

import edu.ict.ex.service.BoardService;
import edu.ict.ex.vo.BoardVO;
import lombok.extern.slf4j.Slf4j;




@Slf4j
@RestController
@RequestMapping("/boards")
public class RestBoardController {
	
	@Autowired
	private BoardService boardService;
	
	
	@GetMapping("/list")
	public List<BoardVO>list(){
		log.info("list()..");
		
		return boardService.getList();
	}

	
	@GetMapping("/{bid}") 
	public BoardVO content(BoardVO boardVO){
		log.info("content()..");
		
		return boardService.get(boardVO.getBid());
	}

	@GetMapping("/shop/{id}/{product}") 
	public String content(@PathVariable int id,@PathVariable String product){
		System.out.println("아이디 ======"+ id);
		
		return "<h1>"+ "상품번호는 " + id+ product+"</h1>";
	}
	
	@GetMapping("/{bid}/{bname}/{btitle}")
	public BoardVO bidcontent(BoardVO boardVO){
	
		return boardVO;
	}
	
	@GetMapping("/rest") //경로 변수
	public ModelAndView rest(){
		ModelAndView mv= new ModelAndView();
		mv.setViewName("rest/rest");
		return mv;
	}
	
	
	@PostMapping("/") 
	public ResponseEntity<String> write(@RequestBody BoardVO board){
		log.info("write");
		log.info("board" + board);
		
		ResponseEntity<String>entity=null;
		
		try {
			boardService.writeBoard(board);
			entity = new ResponseEntity<String>("SUCCESS",HttpStatus.OK);
		} catch (Exception e) {
			e.printStackTrace();
			entity = new ResponseEntity<String>(e.getMessage(),HttpStatus.BAD_REQUEST);
		}

		return entity;
	}
	
	@DeleteMapping("/{bid}") 
	public ResponseEntity<String> delete(BoardVO board){
		log.info("write");
		log.info("board" + board);
		
		ResponseEntity<String>entity=null;
		
		try {
			int rn=boardService.remove(board.getBid());
			boardService.remove(board.getBid());
			
			log.info("delete 넘어온 숫자::" + rn);
			entity=new ResponseEntity<String>(String.valueOf(rn),HttpStatus.OK);
		} catch (Exception e) {
			e.printStackTrace();
			
			entity = new ResponseEntity<String>(e.getMessage(),HttpStatus.BAD_REQUEST);
		}

		return entity;
	}
	@PutMapping("/") 
	public ResponseEntity<String> update(@RequestBody BoardVO board){
		log.info("update");
		log.info("board" + board);
		
		ResponseEntity<String>entity=null;
		
		try {
			int rn=boardService.updateBoard(board);
			
			log.info("delete 넘어온 숫자::" + rn);
			entity=new ResponseEntity<String>(String.valueOf(rn),HttpStatus.OK);
		} catch (Exception e) {
			e.printStackTrace();
			
			entity = new ResponseEntity<String>(e.getMessage(),HttpStatus.BAD_REQUEST);
		}

		return entity;
	}
}

board.js

/*
 * boardService 
 * 모듈 구성하기
 *    
 * 모듈 패턴은 쉽게 말해서 Java의 클래스처럼 JavaScript를 이용해서 메서드를 가지는 객체를 구성한다. 
 * 모듈 패턴은 JavaScript의 즉시 실행함수와 '{}'를 이용해서 객체를 구성한다. 
 *  
 * 
 * */

console.log("board 모듈..");

let boardService = function() {
	/*console.log("안녕하세요");*/
	function list() {
		$.ajax({
			type: "GET",
			url: "/boards/list",
			success: function(result) {
				console.log(result);
			},
			error: function(e) {
				console.log(e);
			}
		});
	}
	
	function get(id) {
		$.ajax({
			type: "GET",
			url: "/boards/" + id,
			success: function(result) {
				console.log(result);
			},
			error: function(e) {
				console.log(e);
			}
		});
	}
	
	function add(board) {
		$.ajax({
			type: "POST",
			url: "/boards/" ,
			contentType:'application/json; charset=utf-8',
			data: JSON.stringify(board),
			success: function(result) {
				if(result=="SUCCESS")
				console.log(result);
			},
			error: function(e) {
				console.log(e);
			}
		});
	}
	
	function del(bid) {
			$.ajax({
				type: "DELETE",
				url: "/boards/" + bid,

				success: function(result) {
					if(result=="SUCCESS")
					console.log("삭제된 갯수" + result);
				},
				error: function(e) {
					console.log(e);
				}
			});
		}

	**function update(board) {
				$.ajax({
					type: "PUT",
					url: "/boards/",
					contentType:'application/json; charset=utf-8',
					data: JSON.stringify(board),
					success: function(result) {
						console.log("업데이트된 갯수" + result);
					},
					error: function(e) {
						console.log(e);
					}
				});
			}
	return {
		list: list,
		get : get,
		add : add,
		del : del,
		update:update

	}

}

rest.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="${pageContext.request.contextPath}/js/board.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		
		let board = boardService();

		
		let hey ={
				bname : "히히",
				bcontent : "히히하오",
				btitle : "헤이~"
		}

		
		let upd ={
				bid :"3064", 
				bname : "첫번째",
				bcontent : "컨텐츠",
				btitle : "두둥!"
		}
		
		
		board.update(upd);
		
	});
</script>


</head>
<body>
	<h1>Restful 게시판 연습</h1>

</body>
</html>

BoardService

package edu.ict.ex.service;

import java.util.List;

import org.springframework.stereotype.Service;

import edu.ict.ex.page.Criteria;
import edu.ict.ex.vo.BoardVO;


@Service
public interface BoardService {
	
	int updateBoard(BoardVO board);

BoardServiceImpl

package edu.ict.ex.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import edu.ict.ex.mapper.BoardMapper;
import edu.ict.ex.page.Criteria;
import edu.ict.ex.vo.BoardVO;
import lombok.extern.slf4j.Slf4j;


@Slf4j
@Service
public class BoardServiceimpl implements BoardService {
	@Autowired
	private BoardMapper boardMapper;

	@Override
	public int updateBoard(BoardVO board) {
		log.info("updateBoard()..");
		return boardMapper.updateBoard(board);
		
	}

}

결과

2. restful 방식이란?

Restful(Representational State Transfer) API

웹에 존재하는 모든 자원에 고유한 URI를 부여해 활용하는 것으로, 자원을 정의하고 자원에 대한 주소를 지정하는 방법론을 의미합니다.

스프링에서의 REST API

REST는 Reoresentational State Transfer의 약어로 하나의 URI는 하나의 고유한 리소스를 대표하도록 설계된다는 개념에 전송방식을 결합해 원하는 작업을 지정합니다.

예를 들어 /board/123은 게시물 중에서 123번이라는 고유 의미를 가지도록 설계하고 이에 대한 처리를 GET, POST 등으로 결정합니다.

3. 아래를 설명하시오.

ResponseEntity 객체

@RestController

Controller가 REST 방식을 처리하기 위한 것임을 명시

@ResponseBody

일반적인 JSP와 같은 뷰로 전달되는 게 아니라 데이터 자체를 전달하기 위한 용도

@PathVariable

URL 경로에 있는 값을 파라미터로 추출할 때 사용

@CrossOrigin

Ajax의 크로스 도메인 문제를 해결해주는 어노테이션

@RequestBody

JSON 데이터를 원하는 타입으로 바인딩 처리