[Spring] 쇼핑몰 - 23 등록된 상품 수정

Map쓰기전 쿼리를 하나 리턴시켜서 Ajax에서 html을 뽑아낸 화면.

 

---

item_managa.htm

a href 태그와 onclick 버튼을 함께쓰면 링크를 두개 타게 될텐데 <a href="javacript:void(0);"> 하면

a태그를 안타면서 글씨체가 변화되는 것을 볼 수 있다.

클릭을 하였을 때, onclick 속성을 주면서 itemCode의 값을 js로 넘겨준다.

 

IntercepterConfig 인터셉터

 

item_manage.js

따라서, 컨트롤러 경로 뒤에 반드시 Ajax를 함께 추가해줘야한다.그리고 받아온 itemCode를 컨트롤러로 넘겨준다.

 

AdminController 컨트롤러

받아온 itemCode 값만 매개변수로 넣어주고, 아래 List와 return 은 잠시 무시하자.

바로 mapper로 가서 쿼리를 먼저 생성해주면 된다.

 

<form>
            <div class="row">
               <div class="col-9 sub-title">
                  상품 기본 정보
               </div>
               <div class="col-3 sub-title d-grid">
                  <button type="button" class="btn btn-primary">
                      수 정
                  </button>
               </div>
            </div>
            <div class="row">
               <div class="col-1"></div>
               <div class="col-11">
                  <div class="row update-content">
                     <label class="col-3 col-form-label text-end">카테고리</label>
                     <div class="col-9">
                        <select id="" name="" class="form-select">
                           <option value="">전체</option>
                        </select>
                     </div>
                     <label class="col-3 col-form-label text-end">상품명</label>
                     <div class="col-9">
                        <input type="text" class="form-control">
                     </div>
                     <label class="col-3 col-form-label text-end">판매가격</label>
                     <div class="col-9">
                        <input type="text" class="form-control">
                     </div>
                     <label class="col-3 col-form-label text-end">상품소개</label>
                     <div class="col-9">
                        <textarea class="form-control" rows="3"></textarea>
                     </div>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col-9 sub-title">
                  상품 판매 정보
               </div>
            </div>
            <div class="row">
               <div class="col-1"></div>
               <div class="col-11">
                  <div class="row update-content">
                     <label class="col-3 col-form-label text-end">상품상태</label>
                     <div class="col-9">
                        <select id="" name="" class="form-select">
                           <option value="">전체</option>
                        </select>
                     </div>
                     <label class="col-3 col-form-label text-end">재 고</label>
                     <div class="col-9">
                        <input type="text" class="form-control">
                     </div>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="col sub-title">
                  상품 이미지 정보
               </div>
            </div>
            <div class="row">
               <div class="col-1"></div>
               <div class="col-11">
                  <div class="row update-content">
                     <label class="col-3 col-form-label text-end">메인 이미지</label>
                     <div class="col-9">
                        <input type="file" class="form-control">
                     </div>
                     <label class="col-3 col-form-label text-end">상세 이미지</label>
                     <div class="col-9">
                        <input type="file" class="form-control">
                     </div>
                  </div>
               </div>
            </div>
         </form>

html 파일은 아래 빨간 박스 안에 표시되는 내용이다.

 

 

첨부된 파일명(ATTACHED_FILE_NAME) 과 원본 파일명(ORIGIN_FILE_NAME) 모두 들고 와준다.

admin-mapper

위 쿼리 밑의 4개는 ITEM_IMG 테이블에 있는 것이다. 그리고 SEELECT에서 ITEM_CODE는 SHOP_ITEM의 코드를 불러온다는 것이다.

ItemVO

 ItemVO에 들어가면 ImgVO가 있다. 여기서 데이터를 끌어올 수 있어서 mapper에도 적용시킬 수 있다.

item-mapper.xml

<collection property="imgList" resultMap="img"></collection>  아이템과 이미지의 관계는 1:M 관계로, 1대1일땐 association을 쓰지만, 위 빨간 박스처럼 1대다 관계에서는 collection 을 써줘야한다. 이때 resultMap은 ImgVO의 id값으로 받아온다.

 

item-mapper에 DB와 연동시켜 줄 ImgVO를 만들어주고, id 값인 img를 밑에 collection의 resultMap과 일치하는지 확인한다.

AdminService , AdminServiceImpl서비스

조회 리스트인데, 아이템VO 하나는 이미지 정보 여러개를 가질 수 있으니까 다 받아 올 수 있어서 리턴 타입으로 ItemVO를 사용한다.

AdminController 컨트롤러

만들었던 쿼리를 itemCode에 넣어 return 시켜주면 html에서 결과를 확인할 수 있다.

 

이와 같이 html 파일에서 F12를 눌러 개발자 모드에서 상품4를 클릭하면,

ITEM_004로 itemCode 값이 잘 들어온 것을 확인할 수 있다.

콘솔창에도 조회되는 데이터의 item_code의 값이 ITEM_004로 해당 객체 VO를 잘 받아오는 것도 확인할 수 있다.

이제 이 데이터를 뿌려줄 일만 남아있다.

item_manage.html

html에서 해당 div의 열을 보면 id 값으로 itemDetailDiv가 있다.

빨간색으로 박스 쳐준 것이 다음 html이 들어올 곳이다.

item_manage.js

itemDetailDiv를 호출한 뒤에,

replaceChildern메소드를 넣어주며, 선택한 부모 노드의 특정 자식 노드를 다른 노드로 교체한다.

이렇게 result에 저장된 itemVO 객체의 변수들을 뽑아내주면 성공적으로 오른쪽 html과 같이 화면에 데이터들이 나타난다.

이런식으로  js파일에서 if 문을 이용해 itemStatusStr을 하드코딩해서 적용시켜주었다.

cateList에 저장되어있는 제품의 상세정보도 조회하기 위해서 컨트롤러에서 데이터를 리턴시켜주고싶었다.

AdminService 컨트롤러

이렇게 카테고리 리스트도 리턴시켜줘야 하는데, 이미 itemCode가 리턴되었다.

리턴을 2개이상 시켜줄 수 없다.

Map을 써야하는데, 다음 포스팅에서는 map에 대해 알아보자