[SpringBoot] 1-3. 메뉴 추가(insert) - POST 방식

1. 메뉴 추가

 

=> POST 방식

▶ index.jsp

			<!-- 2. POST -->
			<div class="menu-test">
                <h4>메뉴 등록하기(POST)</h4>
                <form id="menuEnrollFrm">
                    <input type="text" name="restaurant" placeholder="음식점" class="form-control" />
                    <br />
                    <input type="text" name="name" placeholder="메뉴" class="form-control" />
                    <br />
                    <input type="number" name="price" placeholder="가격" class="form-control" />
                    <br />
                    <div class="form-check form-check-inline">
                        <input type="radio" class="form-check-input" name="type" id="post-kr" value="kr" checked>
                        <label for="post-kr" class="form-check-label">한식</label>&nbsp;
                        <input type="radio" class="form-check-input" name="type" id="post-ch" value="ch">
                        <label for="post-ch" class="form-check-label">중식</label>&nbsp;
                        <input type="radio" class="form-check-input" name="type" id="post-jp" value="jp">
                        <label for="post-jp" class="form-check-label">일식</label>&nbsp;
                    </div>
                    <br />
                    <div class="form-check form-check-inline">
                        <input type="radio" class="form-check-input" name="taste" id="post-hot" value="hot" checked>
                        <label for="post-hot" class="form-check-label">매운맛</label>&nbsp;
                        <input type="radio" class="form-check-input" name="taste" id="post-mild" value="mild">
                        <label for="post-mild" class="form-check-label">순한맛</label>
                    </div>
                    <br />
                    <input type="submit" class="btn btn-block btn-outline-success btn-send" value="등록" >
                </form>
            </div>
            
            <script>
            	$("#menuEnrollFrm").submit( e => {
            		e.preventDefault(); // 기본 이벤트 방지
            		
            		const $frm = $(e.target);
            		
            		const restaurant = $frm.find("[name=restaurant]").val();
            		const name = $frm.find("[name=name]").val();
            		const price = $frm.find("[name=price]").val();
            		const type = $frm.find("[name=type]:checked").val();
            		const taste = $frm.find("[name=taste]:checked").val();
            		
            		// 키값과 변수명이 같을 때는 하나로 합쳐서 사용할 수 있다.
            		const menu = {
            				restaurant,
            				name,
            				price,
            				type,
            				taste
            		};
            		
            		// application/json , charset=UTF-8 명시해야 axios 방식으로 전달이됨(spring에서는 생략가능했지만 spring boot에서는 안됨)
            		// complete 함수 재정의
            		$.ajax({
            			url : '${contextPath}/menu',
            			data : JSON.stringify(menu),
            			contentType : "application/json; charset=UTF-8",
            			method : 'post',
            			success(data){
            				console.log(data)
            			},
            			error : console.log, 
            			complete(){
            				e.target.reset();
            			}
            		});
            	})

 

=> index.jsp 에 추가

 

 

▶ MenuController.java

 

- @RequestBody 요청시 전달한 값중 body에 작성된 "JSON"문자열을 JAVA의 객체로 변환시켜주는 어노테이션

	// RequestBody 어노테이션이 필요함 파싱하기위해서는
//	메뉴 추가
	@PostMapping("/menu")
	public Map<String, Object> insertMenu(@RequestBody Menu menu) {
		int result = menuService.insertMenu(menu);
		
		Map<String, Object> map = new HashMap();
		
		if(result > 0) {
			map.put("msg", "메뉴 등록 성공");
		}else {
			map.put("msg", "메뉴 등록 실패");
		}
		return map;
	}

 

 

▶ MenuService.java

//	메뉴 추가
	int insertMenu(Menu menu);

 

 

▶ MenuServiceImpl.java

//	메뉴 추가
	@Override
	public int insertMenu(Menu menu) {
		return menuDao.insertMenu(menu);
	}

 

 

▶ MenuDao.java

//	메뉴 추가
	public int insertMenu(Menu menu) {
		return session.insert("menuMapper.insertMenu", menu);
	}

 

 

▶ menu-mapper.xml

	<!-- 메뉴 추가 -->
	<!-- type은 한글로 해야하는데 이때 typeHandler 이용 -->
	<insert id="insertMenu" parameterType="menu">
		INSERT INTO MENU
		VALUES (
			seq_menu_id.NEXTVAL,
			#{restaurant},
			#{name},
			#{price},
			#{type , typeHandler=menuTypeHandler},
			#{taste}
		)
	</insert>

 

 

▶ 결과

 

 

=> 등록을 클릭하면 내가 입력한 값이 정상적으로 추가된 것을 확인