[Rest API] rest api 연습 (앞단+뒷단) (Memo)

https://intheham.tistory.com/102

[Rest API] 기본 규칙, POSTMAN

 

Entity (Memo.java)

package com.example.demo.memo;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.SequenceGenerator;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.ToString;

@Entity
@Setter
@Getter
@ToString
@NoArgsConstructor
@AllArgsConstructor
public class Memo {
	@Id
	@SequenceGenerator(name="seq_gen", sequenceName="seq_memo", allocationSize=1)
	@GeneratedValue(strategy=GenerationType.SEQUENCE, generator="seq_memo")
	private int num;
	
	private String title;
	private String content;
}

 

 

Dto (MemoDto.java)

package com.example.demo.memo;

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.ToString;

@Setter
@Getter
@ToString
@NoArgsConstructor
@AllArgsConstructor
public class MemoDto {
	private int num;
	private String title;
	private String content;

}

 

 

Dao (MemoDao.java)

package com.example.demo.memo;

import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface MemoDao extends JpaRepository<Memo, Integer> {

}

 

Service (MemoService.java)

package com.example.demo.memo;

import java.util.ArrayList;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class MemoService {
	@Autowired
	private MemoDao dao;
	
	// 추가, 수정
	public MemoDto save(MemoDto dto) {
		Memo entity = dao.save(new Memo(dto.getNum(), dto.getTitle(), dto.getContent()));
		return new MemoDto(entity.getNum(), entity.getTitle(), entity.getContent());
	}
	
	// 번호로 검색
	public MemoDto getMemo(int num) {
		Memo m = dao.findById(num).orElse(null);
		if(m == null) {
			return null;
		}
		return new MemoDto(m.getNum(), m.getTitle(), m.getContent());
	}
	
	// 전체 검색
	public ArrayList<MemoDto> getAll(){
		ArrayList<Memo> list = (ArrayList<Memo>) dao.findAll();
		ArrayList<MemoDto> dtolist = new ArrayList<MemoDto>();
		for (Memo m:list) {
			dtolist.add(new MemoDto(m.getNum(), m.getTitle(), m.getContent()));
		}
		return dtolist;
	}
	
	// 삭제
	public void delMemo(int num) {
		dao.deleteById(num);
	}
}

 

 

Controller (MemoController.java)

package com.example.demo.memo;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
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.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController // rest api controller
@CrossOrigin(origins = "*") // 모든 id로부터 요청 받기 허용
@RequestMapping("/memos") // 기본 url: memos 
public class MemoController {
	
	@Autowired
	private MemoService service;
	
	// 글 하나 추가
	// 처리 결과를 ajax(json)로 보내고 받는다.
	@PostMapping("") // /memos
	public Map add(MemoDto dto) { // Spring은 json을 Map으로 보낸다.
		Map map = new HashMap();
		MemoDto dto2 = null;
		boolean flag = true; // 요청 데이터가 올바른지 아닌지 확인 용도.
		try {
			dto2 = service.save(dto);
		} catch(Exception e) {
			flag = false;
		}
		map.put("flag", flag);
		map.put("dto", dto2);
		return map;
	}
	
	// 전체검색
	/* { "flag" : true, 
	 *   "list" : [ { "num" : 1, 
	 *   			  "title" : "제목",
	 *   			  "content" : "내용" },
	 *   			{ "num" : 2,
	 *    			  "title" : "제목",
	 *   			  "content" : "내용" } ]
	 * }
	 * */
	@GetMapping("") // /memos
	public Map getAll() {
		Map map = new HashMap();
		boolean flag = true;
		ArrayList<MemoDto> list = null;
		try {
			list = service.getAll();
		} catch(Exception e) {
			flag = false;
		}
		map.put("flag", flag);
		map.put("list", list);
		return map;
	}
	
	// 글번호로 검색
	// @PathVariable("num") -> ("/{num}") -> int num
	@GetMapping("/{num}")
	public Map getByNum(@PathVariable("num") int num) {
		Map map = new HashMap();
		boolean flag = true;
		MemoDto dto = null;
		try {
			dto = service.getMemo(num);
		} catch(Exception e) {
			flag = false;
		}
		map.put("flag", flag);
		map.put("dto", dto);
		return map;
	}
	
	// 전체 컬럼 수정
	@PutMapping("") // 번호 커맨드객체로 받아올거임~~
	public Map edit(MemoDto dto) {
		Map map = new HashMap();
		MemoDto dto2 = null;
		boolean flag = true;
		try {
			dto2 = service.save(dto);
		} catch(Exception e) {
			flag = false;
		}
		map.put("flag", flag);
		map.put("dto", dto2);
		return map;
	}
	
	// 삭제 
	@DeleteMapping("/{num}")
	public Map del(@PathVariable("num") int num) {
		Map map = new HashMap();
		boolean flag = true;
		try {
			service.delMemo(num);
		} catch(Exception e) {
			flag = false;
		}
		map.put("flag", flag);
		return map;
	}
}

 

index.html

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

</style>
<script>
$(document).ready(function() {
	let editnum = 0; // 수정글 번호 담을 전역변수 선언 -- 여러 메서드에서 공통 사용 가능 
	
	// 전체검색
	$.ajax({
		url: '/memos',
		type: 'get',
		dataType: 'JSON',
		success: function(result){
			/* { "flag" : true, 
			 *   "list" : [ { "num" : 1, 
			 *   			  "title" : "제목",
			 *   			  "content" : "내용" },
			 *   			{ "num" : 2,
			 *    			  "title" : "제목",
			 *   			  "content" : "내용" } ]
			 * }
			 * */
			let flag = result.flag;
			let txt = '';
			if(flag){
				let arr = result.list;
				for (let memo of arr) {
					txt += `
						<div id = "${memo.num}">
						<ul>
		                 <li>num : ${memo.num}</li> 
		                 <li>title : ${memo.title}</li> 
		                 <li>content : ${memo.content}</li>
		                 </ul>
		                  <input type = "button" value = "수정" class= "editfbtn" num="${memo.num}">
		                  <input type = "button" value = "삭제" class= "delbtn" num="${memo.num}"> </div>
		                `;  
				}
				$('#list').html(txt);
			} else {
				alert('목록을 불러오지 못했습니다.');
			}
		},
		error: function(req, status){
			alert(status);
		}
	});
	
	// 글 추가
	$('#savebtn').click(function(){
		$.ajax({
			url: '/memos',
			type: 'post',
			data: {'title':$('#title').val(), 'content':$('#content').val()}, // 전송할 데이터 (파람)
			dataType: 'JSON',
			success: function(result){ 
				let flag = result.flag;
				let txt = '';
				if(flag){
					let memo = result.dto;
					txt += `
						<div id = "${memo.num}">
						<ul>
		                 <li>num : ${memo.num}</li> 
		                 <li>title : ${memo.title}</li> 
		                 <li>content : ${memo.content}</li>
		                 </ul>
		                  <input type = "button" value = "수정" class= "editfbtn" num="${memo.num}">
		                  <input type = "button" value = "삭제" class= "delbtn" num="${memo.num}"> </div>
		                `;   
					$('#list').append(txt);
				
					$('#title').val('');
					$('#content').val('');
				} else {
					alert('글 작성 실패');
				}
                
			},
			error: function(req, status){
				alert(status);
			}
		});
	});
	
	// 수정폼 띄우기 
	// ajax로 번호로 검색 요청 -> 응답받은 값을 수정폼에 넣어주기 
	// 수정폼을 클릭 위치에 div로 수정폼 띄우기 
	$(document).on('click', '.editfbtn', function(e){
		let num = $(this).attr("num");
		editnum = num; // 수정글 번호 담음 
		$.ajax({
			url: '/memos/'+num,
			type: 'get',
			dataType: 'JSON',
			success: function(result){ 
				if(result.flag){
					let memo = result.dto;
					if(memo == null){
						alert('없는 메모');
					} else {
						$('#newtitle').val(memo.title);
						$('#newcontent').val(memo.content);
                    
                		// 마우스 위치에 뜨게 하기 
						$('#editform').css('top', e.pageY);
						$('#editform').css('left', e.pageX);
						$('#editform').css('display', 'block');
					}
				} else {
					alert('글 검색 실패');
				}
			},
			error: function(req, status){
				alert(status);
			}
		});
	});
	
	// 수정 취소
	$('#cancle').click(function(){
		$('#newtitle').val('');
		$('#newcontent').val('');
		$('#editform').hide();
	});
	
	// 찐 수정
	$('#edit').click(function(){
		$.ajax({
			url: '/memos',
			type: 'put',
			data: {'num':editnum, 'title':$('#newtitle').val(), 'content':$('#newcontent').val()}, // 전송할 데이터 (파람)
			dataType: 'JSON',
			success: function(result){ 
				let flag = result.flag;
				let txt = '';
				if(flag){
					let memo = result.dto;
					txt += ` 
						<ul>
	                 	<li>num : ${memo.num}</li> 
	                 	<li>title : ${memo.title}</li> 
	                 	<li>content : ${memo.content}</li>
	                 	</ul>
	                  	<input type = "button" value = "수정" class= "editfbtn" num="${memo.num}">
	                  	<input type = "button" value = "삭제" class= "delbtn" num="${memo.num}"> 
	                  	`;
					
	                $('#'+memo.num).html(txt);
					$('#newtitle').val('');
					$('#newcontent').val('');
					$('#editform').hide();
				} else {
					alert('글 수정 실패');
				}
                
			},
			error: function(req, status){
				alert(status);
			}
		});
	});
	
	// 글 삭제
	$(document).on('click', '.delbtn', function(){
		let num = $(this).attr("num");
		$.ajax({
			url: '/memos/'+num,
			type: 'delete',
			dataType: 'json',
			success: function(result){ 
				if(result.flag){
					$('#'+num).remove();
					alert(num+"번글 삭제");
				} else {
					alert('삭제 실패');
				}
			},
			error: function(req, status){
				alert(status);
			}
		});
	});
});
</script>
</head>
<body>
<h3>메모장</h3>

<div id="savef">
<h4>글작성폼</h4>
title: <input type="text" name="title" id="title"><br/>
content: <input type="text" name="content" id="content"><br/>
<input type="button" value="저장" id="savebtn">
</div>

<h3>메모 목록</h3>
<div id="list"></div>

<div id="editform" style="position: absolute; top: 100px; left: 300px; border: 1px solid black; display: none; background-color:white">
new title:<input type="text" name="title" id="newtitle"><br/>
new content:<input type="text" name="content" id="newcontent"><br/>
<input type="button" value="수정완료" id="edit">
<input type="button" value="취소" id="cancle">
</div>

</body>
</html>

 

1. 글 하나 추가 (POST)

 

// 글 하나 추가
@PostMapping("")
public Map add(MemoDto dto) { 
	Map map = new HashMap();
	MemoDto dto2 = null;
	boolean flag = true;
	try {
		dto2 = service.save(dto);
	} catch(Exception e) {
		flag = false;
	}
	map.put("flag", flag);
	map.put("dto", dto2);
	return map;
}

// 글 추가
$('#savebtn').click(function(){
	$.ajax({
		url: '/memos',
		type: 'post',
		data: {'title':$('#title').val(), 'content':$('#content').val()}, // 전송할 데이터 (파람)
		dataType: 'JSON',
		success: function(result){ 
			let flag = result.flag;
			let txt = '';
			if(flag){
				let memo = result.dto;
				txt += `
					<div id = "${memo.num}">
					<ul>
		            <li>num : ${memo.num}</li> 
		            <li>title : ${memo.title}</li> 
					<li>content : ${memo.content}</li>
					</ul>
					<input type = "button" value = "수정" class= "editfbtn" num="${memo.num}">
					<input type = "button" value = "삭제" class= "delbtn" num="${memo.num}"> </div>
					`;   
				$('#list').append(txt);
				
				$('#title').val('');
				$('#content').val('');
			} else {
				alert('글 작성 실패');
			}
		},
		error: function(req, status){
			alert(status);
		}
	});
});
    
<div id="savef">
<h4>글작성폼</h4>
title: <input type="text" name="title" id="title"><br/>
content: <input type="text" name="content" id="content"><br/>
<input type="button" value="저장" id="savebtn">
</div>

<h3>메모 목록</h3>
<div id="list"></div>

 

 

 

2. 전체 검색 (GET) --> 리스트 띄우기

// 전체검색
@GetMapping("") // /memos
public Map getAll() {
	Map map = new HashMap();
	boolean flag = true;
	ArrayList<MemoDto> list = null;
	try {
		list = service.getAll();
	} catch(Exception e) {
		flag = false;
	}
	map.put("flag", flag);
	map.put("list", list);
	return map;
}

$(document).ready(function() {
	// 전체검색
	$.ajax({
		url: '/memos',
		type: 'get',
		dataType: 'JSON',
		success: function(result){
			let flag = result.flag;
			let txt = '';
			if(flag){
				let arr = result.list;
				for (let memo of arr) {
					txt += `
						<div id = "${memo.num}">
						<ul>
		                <li>num : ${memo.num}</li> 
		                <li>title : ${memo.title}</li> 
		                <li>content : ${memo.content}</li>
		                </ul>
		                <input type = "button" value = "수정" class= "editfbtn" num="${memo.num}">
		                <input type = "button" value = "삭제" class= "delbtn" num="${memo.num}"> </div>
		                `;  
				}
				$('#list').html(txt);
			} else {
				alert('목록을 불러오지 못했습니다.');
			}
		},
		error: function(req, status){
			alert(status);
		}
	});
});

<h3>메모 목록</h3>
<div id="list"></div>

 

 

 

3. 글번호로 검색 (GET) --> 수정폼에 원글 내용 띄우기

@PathVariable("num")  -->  @GetMapping("/{num}")  -->  int num

// 글번호로 검색
@GetMapping("/{num}")
public Map getByNum(@PathVariable("num") int num) {
	Map map = new HashMap();
	boolean flag = true;
	MemoDto dto = null;
	try {
		dto = service.getMemo(num);
	} catch(Exception e) {
		flag = false;
	}
	map.put("flag", flag);
	map.put("dto", dto);
	return map;
}

$(document).ready(function() {
	let editnum = 0; // 수정글 번호 담을 전역변수 선언 -- 여러 메서드에서 공통 사용 가능 
	$(document).on('click', '.editfbtn', function(e){
		let num = $(this).attr("num");
		editnum = num; // 수정글 번호 담음 
		$.ajax({
			url: '/memos/'+num,
			type: 'get',
			dataType: 'JSON',
			success: function(result){ 
				if(result.flag){
					let memo = result.dto;
					if(memo == null){
						alert('없는 메모');
					} else {
						$('#newtitle').val(memo.title);
						$('#newcontent').val(memo.content);
                    
                		// 마우스 위치에 뜨게 하기 
						$('#editform').css('top', e.pageY);
						$('#editform').css('left', e.pageX);
						$('#editform').css('display', 'block');
					}
				} else {
					alert('글 검색 실패');
				}
			},
			error: function(req, status){
				alert(status);
			}
		});
	});
});

<div id="editform" style="position: absolute; top: 100px; left: 300px; border: 1px solid black; display: none; background-color:white">
new title:<input type="text" name="title" id="newtitle"><br/>
new content:<input type="text" name="content" id="newcontent"><br/>
<input type="button" value="수정완료" id="edit">
<input type="button" value="취소" id="cancle">
</div>

 

 

 

4. 전체 컬럼 수정 (PUT)

// 전체 컬럼 수정
@PutMapping("") // 번호 커맨드객체로 받아올거임~~
public Map edit(MemoDto dto) {
	Map map = new HashMap();
	MemoDto dto2 = null;
	boolean flag = true;
	try {
		dto2 = service.save(dto);
	} catch(Exception e) {
		flag = false;
	}
	map.put("flag", flag);
	map.put("dto", dto2);
	return map;
}

$('#edit').click(function(){
	$.ajax({
		url: '/memos',
		type: 'put',
		data: {'num':editnum, 'title':$('#newtitle').val(), 'content':$('#newcontent').val()}, // 전송할 데이터 (파람)
		dataType: 'JSON',
		success: function(result){ 
			let flag = result.flag;
			let txt = '';
			if(flag){
				let memo = result.dto;
				txt += ` 
					<ul>
	                 <li>num : ${memo.num}</li> 
	                 <li>title : ${memo.title}</li> 
	                 <li>content : ${memo.content}</li>
	                 </ul>
	                  <input type = "button" value = "수정" class= "editfbtn" num="${memo.num}">
	                  <input type = "button" value = "삭제" class= "delbtn" num="${memo.num}"> 
	                  `;
					
	            $('#'+memo.num).html(txt);
				$('#newtitle').val('');
				$('#newcontent').val('');
				$('#editform').hide();
			} else {
				alert('글 수정 실패');
			}
		},
		error: function(req, status){
			alert(status);
		}
	});
});

 

 

 

 

5. 삭제 (Delete)

// 삭제 
@DeleteMapping("/{num}")
public Map del(@PathVariable("num") int num) {
	Map map = new HashMap();
	boolean flag = true;
	try {
		service.delMemo(num);
	} catch(Exception e) {
		flag = false;
	}
	map.put("flag", flag);
	return map;
}

$(document).on('click', '.delbtn', function(){
	let num = $(this).attr("num");
	$.ajax({
		url: '/memos/'+num,
		type: 'delete',
		dataType: 'json',
		success: function(result){ 
			if(result.flag){
				$('#'+num).remove();
				alert(num+"번글 삭제");
			} else {
				alert('삭제 실패');
			}
		},
		error: function(req, status){
			alert(status);
		}
	});
});