1. 본사-메뉴-삭제

1. 요구사항.

피자브랜드 본사직원이 메뉴를 관리하는 게시판

우측 수정/삭제 컬럼에서 수정과 삭제를 선택하여 사용할 수 있도록 요청.

 -- 수정 : 화면을 띄워서 수정하고 완료를 누르면 관리창으로 돌아와 맨위에 위치함.

 -- 삭제 : 해당화면에서 바로 삭제.

 

스프링을 사용하여 삭제요청이 송신되면, 수신-처리 과정을 진행하였다. 

삭제요청 HTML

<td>  
    <div class="d-grid gap-2 col-md-6">
        <button type="button" class="btn btn-warning" onclick="menuUpdateForm(${vo.menuIndex})">수정</button>
        <button type="button" class="btn btn-info" onclick="alert(' 메뉴카드미리보기 / 구현중입니다.')">미리보기</button>
        <button type="button" class="btn btn-danger" onclick="menuDelete(${vo.menuIndex})">삭제</button>
    </div>
</td>

삭제요청이 들어오면, onclick event로 JavaScript로 보내 method에서 삭제이벤트를 controller에 요청하도록 하였다. 

function menuDelete(menuIndex) {
		if(confirm("해당 메뉴를 삭제하시겠습니까?"))
		
	$.ajax({
		type:'post',
		url:'menuDelete?menuIndex='+menuIndex,
		datatype:'json',
		success:function (data) { 
			// location.reload();	
		    $('#t_menuselect').load('menuList #t_menuselect');		
		},error:function() {
			alert("삭제 실패")
		}	
		
		})// ajax
	}//menuDelete(menuIndex)

 

	@RequestMapping(value = "/menuDelete")
	public ModelAndView menuDelete(ModelAndView mv,MenuVO vo) {
					
		if(menuService.menuDelete(vo) > 0) 
     	     mv.addObject("success", "T");
		else mv.addObject("success", "F");
		mv.setViewName("jsonView"); 
		return mv;
		
	} //mupdate

코드분석 : 요청명menuDelete(menuIndex) => menuIndex를 매개변수로 가져오는 menuDelete메서드요청이 들어올시 실행된다. => 최초 요청 받을시 삭제 여부를 확인받는다.

그리고 ajax로 이동하지 않고 바로 그자리에서 삭제 할 수 있도록 controller에 요청을보내 DB삭제를 요청하고, view는 그 즉시 삭제한다. 만약 삭제가 실패 됐을 시에는 controller에서 message를 "F"로 표시하여 통신은 성공하였더라도, 

삭제가 실패됐다는 success 를 표기해준다. 

 

진행하면서 어려웠던 점. 

 

본디 코딩에 어수룩했던지라 전반적인 것부터 다 어려웠으나, 이번 기능 작성시에는 Delete 할때 ajax 에서 어떻게 깔끔하고 간결하게 처리할 것인가를 많이 고민했던 것 같다. 그로인해 알게된 .load() 함수를 통해서 삭제를 간결하게 할 수 있다는 것을 인지했고, Spring의 get방식을 통해 Spring의 요청명만을 요구하는 특성을 이용한다는 점을 알게됐다.