쇼핑몰 프로젝트(9) - 상품 관리 (수정)

상품 기본(상세) 정보 화면에서

수정 버튼 클릭 시 상품 정보 수정 기능.(ajax 사용 x)

 

상품 수정 쿼리

	<!-- 상품 수정 -->
	<update id="updateItem">
		UPDATE SHOP_ITEM
		SET
			CATE_CODE = #{cateCode}
			, ITEM_NAME = #{itemName}
			, ITEM_PRICE = #{itemPrice}
			, ITEM_INTRO = #{itemIntro}
			, ITEM_STATUS = #{itemStatus}
			, ITEM_STOCK = #{itemStock}
		WHERE ITEM_CODE = #{itemCode}
	
	</update>

AdminService

	//상품 수정(관리자페이지)
	void updateItem(ItemVO itemVO);

AdminServiceImpl

	//상품 수정(
	@Override
	public void updateItem(ItemVO itemVO) {
		sqlSession.update("adminMapper.updateItem", itemVO);
	}

item_manage.js에서 상품 정보 나오는 테이블 form 태그에 감싸야 함. form 태그 속성 작성

수정 버튼 submit으로 수정.

수정 버튼 누를 때 해당 상품 정보 수정되어야 하기 때문에 input 태그 hidden 속성으로 itemCode 넘겨줌.

//상품 정보 나올 테이블
let str = '';


str += `   <form action="/admin/updateItem" method="post">  `;  
str += `      <input type="hidden" name="itemCode" value="${result['item'].itemCode}">  `;                                                          
str += `    <div class="row">                                                           `;
str += `       <div class="col-9 sub-title">                                            `;
str += `          상품 기본 정보                                                        `;
str += `       </div>                                                                   `;
str += `       <div class="col-3 sub-title d-grid">                                     `;
str += `          <button type="submit" class="btn btn-primary">                        `;
str += `              수 정                                                             `;
str += `          </button>                                                             `;
str += `       </div>                                                                   `;

 

각 input 태그 name 속성 맞춰주기

str += `    </div>                                                                      `;
str += `    <div class="row">                                                           `;
str += `       <div class="col-1"></div>                                                `;
str += `       <div class="col-11">                                                     `;
str += `          <div class="row update-content">                                      `;
str += `             <label class="col-3 col-form-label text-end">카테고리</label>      `;
str += `             <div class="col-9">                                                `;
str += `                <select id="" name="cateCode" class="form-select">              `;
                        for(const e of result['cateList']){
                        const selected = result['item'].cateCode == e.cateCode ? 'selected' : ''; //같으면 selected
str += `                   <option value="${e.cateCode}" ${selected}>${e.cateName}</option>  `;
                            //카테코드 같으면 selected 변수에 selected 담아옴. selected 속성 반영 `;
                            }

str += `                </select>                                                       `;
str += `             </div>                                                             `;
str += `             <label class="col-3 col-form-label text-end">상품명</label>        `;
str += `             <div class="col-9">                                                `;
str += `                <input type="text" class="form-control" name="itemName" value="${result['item'].itemName}">  `;
str += `             </div>                                                             `;
str += `             <label class="col-3 col-form-label text-end">판매가격</label>      `;
str += `             <div class="col-9">                                                `;
str += `                <input type="text" class="form-control" name="itemPrice" value="${result['item'].itemPrice}"> `;
str += `             </div>                                                             `;
str += `             <label class="col-3 col-form-label text-end">상품소개</label>      `;
str += `             <div class="col-9">                                                `;
str += `                <textarea class="form-control" rows="3" name="itemIntro">${result['item'].itemIntro}</textarea> `;
str += `             </div>                                                             `;
str += `          </div>                                                                `;
str += `       </div>                                                                   `;
str += `    </div>                                                                      `;
str += `    <div class="row">                                                           `;
str += `       <div class="col-9 sub-title">                                            `;
str += `          상품 판매 정보                                                        `;
str += `       </div>                                                                   `;
str += `    </div>                                                                      `;
str += `    <div class="row">                                                           `;
str += `       <div class="col-1"></div>                                                `;
str += `       <div class="col-11">                                                     `;
str += `          <div class="row update-content">                                      `;
str += `             <label class="col-3 col-form-label text-end">상품상태</label>      `;
str += `             <div class="col-9">                                                `;
str += `                <select id="" name="itemStatus" class="form-select">            `;

                            if(result['item'].itemStatus == 1){
                            str += `<option value="1" selected>판매중</option>            `;
                            str += `<option value="2">준비중</option>                     `;
                            str += `<option value="3">품절</option>                       `;
                            }else if(result['item'].itemStatus == 2){
                            str += `<option value="1">판매중</option>                     `;
                            str += `<option value="2" selected>준비중</option>            `;
                            str += `<option value="3">품절</option>                       `;
                            }else{
                            str += `<option value="1">판매중</option>                     `;
                            str += `<option value="2">준비중</option>                     `;
                            str += `<option value="3" selected>품절</option>              `;
                            }                 

str += `                </select>                                                       `;
str += `             </div>                                                             `;
str += `             <label class="col-3 col-form-label text-end">재 고</label>         `;
str += `             <div class="col-9">                                                `;
str += `                <input type="text" class="form-control" name="itemStock" value="${result['item'].itemStock}"> `;
str += `             </div>                                                             `;
str += `          </div>                                                                `;
str += `       </div>                                                                   `;
str += `    </div>                                                                      `;

 

AdminController 작성

//상품 수정
@PostMapping("/updateItem")
public String updateItem(ItemVO itemVO) {
    adminService.updateItem(itemVO);

    return "redirect:/admin/cateManage";
}