상품 수정하기

수정할때 필요한 것들

1. product 객체

2. 카테고리(과일,채소) 리스트

 

 

 

상품은 DB에서 id로 가져온다

Product product = productRepo.getById(id);

 

카테고리는 모두 가져온다

List categories = categoryRepo.findAll();

 

 

 

edit.html는 add.html 복붙하고 

th:action="@{/admin/products/edit}"
까먹지 말기!!

 

 

수정페이지로 갈때 이미지가 안불러짐 → img태그에 경로 넣기

이미지 불러오는 이유? 수정 전 현재 이미지와 새로 수정한 이미지를 비교하기 위해 

<label for="">현재 이미지</label>
<img th:src="@{'/media/'+${__product.image__}}" style="width: 200px;"/>

언더바 두개 써도안써도 상관은 없음.

상품 페이지에 카테고리 이름 불러올때는 id는 넣길래 그냥 넣어봤다.

 

<br>
<table >
<tr>
  <th> 
    <label for="">현재 이미지</label>
  </th>
  <th> 
    <label for="">수정 이미지</label>
  </th>
</tr>
<tr>
  <td>
    <img th:src="@{'/media/'+${__product.image__}}" style="width: 200px;"/>
  </td>
  <td>
    <img src="#" id="imgPreview"/>
  </td>
</tr>
</table>

---

post 매핑

 

add매핑과 비슷하니 복붙한다.

 

 

수정 전 상품을 불러와서 (상품 id로 불러온다 = product.getId() )

이미지는 수정할게 있으면 수정 전 상품을 삭제하고,  수정할 게 없으면 원래 이미지 그대로 수정가능하도록

//수정 전 상품 불러오기(id로 검색) -> 수정할게 있다면 삭제하도록
Product currentProduct = productRepo.getById(product.getId());

 

IF절에 else에서

최종적으로 슬러그, 이미지 저장할 때 

슬러그는 저장하고 이미지만 수정할게 있을 경우의 if절 추가한다.

//수정 할 이미지 파일이 있다
if(!file.isEmpty()) { 
    //수정 전 이미지 주소 삭제
    Path currentPath = Paths.get("src/main/resources/static/media/"+ currentProduct.getImage());
    Files.delete(currentPath);

    //다시 올라간 수정한 이미지로 저장
    product.setImage(fileName);
    Files.write(path, bytes);
}else { //수정할 이미지가 없다
    product.setImage(currentProduct.getImage());
}

수정전 이미지를 삭제하고 수정 한 이미지를 저장하기 위한 코드

 

 

 

- 수정을 안했을때 이미지 파일 확장자 오류가 뜬다 (이미지를 jpg 또는 png를 사용하세요)

if(fileName.endsWith("jpg")||fileName.endsWith("png")) {
    fileOk = true;
}

이 부분을 아래처럼 수정 

 

- (새 이미지를  jpg 또는 png를 사용하세요. 새 이미지가 없으면 기존 이미지를 사용.)

새 이미지 파일이 있을때 
if(!file.isEmpty()) {
    if(fileName.endsWith("jpg") || fileName.endsWith("png")) {
        fileOk = true; // 확장자가 .jpg .png 만 ok
    }
}else { // 수정 안하면
    fileOk  = true; //기존이미지 사용
}

사실 기존에 있는 이미지도 불러와서 fileName이 있을텐데 왜 오류가 뜨지?

 

 

 

- 이미지 수정을 안했는데도 이미 등록한 상품이 있다는 오류가 뜬다 

 

Product productExists = productRepo.findByName(product.getName());

이 부분을 아래처럼 고쳐준다.

수정 안했을때 똑같은 상품명이어도 id로도 같이 검색해서 id는 not으로

Product productExists = productRepo.findBySlugAndIdNot(slug, product.getId());

 

 

---

오류 ( unable to find ~ id 0 )

 

해결

edit.html 에 수정을 위한 id를 입력해야함

<input type="hidden" th:field="*{id}">

 

---

 

수정 직후 이미지 파일이 안보임..

새로고침하면 나옴

 

이미지 파일의 경로가 문제가 있는지 WebConfig 에 가본다

 

WebConfig에서 백슬래시를 슬래시로 바꿔주니 새로고침 없이 바로 화면에 이미지가 뜬다

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    // 저장된 파일(이미지)의 경로를 지정한다. (이미지를 사용하기 위함)
    registry
    .addResourceHandler(".media/**")
    .addResourceLocations("C://SPRINGBOOT//Spring-workspace//uglyMarket//src//main//resources//static//media");
}

 

파일경로는 윈도우의 경우 역슬래시가 파일 Path 기본 표현이라고 했는데 

검색해보니 파일경로는

파일 처리를위한 Java 라이브러리를 사용하면 / 모든 플랫폼에서 안전하게 백 슬래시가 아닌 슬래시를 사용할 수 있습니다 

라고 나왔다..

백슬래시보다 슬래시로 적는걸로!!