관리자 :: 상품 수정

상품 수정을 클릭하면

해당 상품의 정보가 들어간 팝업창을 띄어주고

수정한 데이터를 저장해주도록 해주자

(팝업창은 상품추가할 때의 팝업창 이용하기)

 

product.js

'수정' 버튼을 클릭했을 때에도 상품 추가 팝업창이 나오도록 만들어주었다

 

그리고 이제 수정하기 버튼을 클릭하면 해당 데이터가 입력된 팝업창을 띄어줄 것이며 (select),

수정한 내용을 저장(update)하는 코드 2개를 동시에 진행 할 것이다.

 

mapper.xml 부터 시작하자

 

ProductMapper.xml

ProductMapper.java

ProductService.java

 

ProductAPIController.java

API 에서 해당 seq에 대한 데이터를 get 하고,

수정하는 vo를 patch하는 mapping을 작성해준다!

 

arc를 이용해서 상품 정보를 잘 가지고 오는지 확인하자

확인완료~!

 

이제 js로 가볼까 ....

 

product.js

getmapping으로 가져온 데이터를

입력칸에 데이터를 넣어준다.

그리고 사진이 있을 경우에 그 사진을 미리보기에서 보여준다.

 

사이트로 돌아가서 수정하기 버튼을 클릭했을 때,

 

이렇게 데이터를 가져와준다.

 

지금은 상품 추가 팝업창을 활용하고 있으므로,

수정하기 팝업창으로 바꿔주자

 

이부분은 너~!~~!~!~!~ 무 프론트 이긴한데 ..

그래도 혼자 하는 프로젝트이니까 하나부터 열까지 내가 해야하는거긴 한데 ..나는 백엔드 개발자 .. 준비생 ..잊지말자 ..

 

여기서 작업해준거는 팝업창에 수정하기 버튼을 추가해주었다.

(새로 팝업창을 만들어주지 않고, 기존의 추가하기 팝업창을 활용하는 획기적인(나에게 엄청 획기적임) 방법이다 ..)

 

두번째 js 캡쳐본을 확인하면, 

'상품 추가'버튼을 클릭했을때

팝업창을 띄어주며

save버튼을 보여주고, modify버튼은 숨긴다.

그리고 팝업창의 h1을 '상품 추가'로 해준다.

 

그 아래의 js를 보면

'수정' 버튼을 클릭해서 팝업창을 띄어서 보면

save버튼을 숨기고, modify버튼을 보여준다.

그리고 팝업창의 h1을 '상품 수정'으로 해준다.

 

(선생님이 수업시간에 해준건데 유용하게 잘 사용했습니다...!

수업할 땐 이해 못했는데 ... 다시보니까 아 그때 이렇게 했었구나 깨닫게 되었어요 ..^^하하하하하ㅏ핳하)

 

그래서 잘 적용한 결과는 아래와 같다.

 

 

이제 팝업창에서 상품 정보를 수정하고

하단의 '수정하기' 버튼을 클릭했을 때

수정한 데이터를 update할 수 있도록 만들어주자

 

우선 이 작업은 .. 그냥 상품 추가하는 방법과 굉장히 유사하다.

 

product.js

js에서 저장하기 커튼을 클릭했을 때 실행되는 함수를 그래도 가져올거다

save버튼 클릭시 실행되는 함수를 전체 복사하고

save 버튼을 modify 버튼으로 변경해주자(안의 함수는 그대로)

 

그리고 modify 안의 ajax를 수정해줄 것이다.

 

type과 url을 변경해준다.

 

그리고 modify 버튼을 클릭했을 때의 seq값을 mod-seq라는 이름으로 저장한다.

 

이 mod-seq값은 수정할 때 seq값으로 지정해준다 !!

(새로운 데이터를 추가하는게 아닌, 기존의 데이터의 값을 수정하는 것이기에

seq 값을 꼭 찾아서 넣어줘야한다!)

 

수정했을 시, 사진이 삭제되는 경우가 있어서

이 부분을 추가해주었다.

 

상품 정보가 잘 수정되었음을 확인할 수 있다 !!!!!