상품 등록하기

post매핑

public String add(@Valid Product product, BindingResult bindingResult,
MultipartFile file, RedirectAttributes attr, Model model)

MultipartFile : 실제파일은 따로 보관장소를 만들어 저장

 

실제파일의 데이터와 이름을 media에 저장하려고?
1. bytes 데이터 
2. fileName 이름
3. Path path = Paths.get("mdia의 위치" + 파일이름)
세가지가 필요함

 

1. 파일의 데이터 ( jpg,png 둘다 가능하도록 리스트[] )

byte[] bytes = file.getBytes();

2. 파일 이름  /??getName()은?

String fileName = file.getOriginalFilename();

3. 파일 저장할 경로 + 파일이름

Path path = Paths.get("src/main/resources/static/media/"+fileName);

 

 

 boolean fileOk = false;

// 파일의 확장자 jpg , png
if(fileName.endsWith("jpg") || fileName.endsWith("png")) {
    fileOk = true;
}

endsWith() : 특정문자열로 끝나는지 확인하기 위한 메소드

 

 

- 상품추가 성공적일때

attr.addFlashAttribute("message", "상품이 추가되었습니다.");
attr.addFlashAttribute("alertClass", "alert-success");

위와 관련된 메세지가 뜨도록 html에 추가하기 
<div th:if="${message}" th:class="${'alert ' + alertClass}" th:text="${message}"></div>

 

- 슬러그 설정

String slug = product.getName().toLowerCase().replace(" ", "-");

 

- 이미 등록한 DB에 존재하는 (상품이름으로 메서드 만들기)

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

 

 

---

오류

 

No property 'findbyName' found for type 'Product'! 

 

findByName 으로 메서드 이름 고쳐보자!

 

 

 

- 위에 정해놓은 jpg,png 확장자 파일이 아닐때 false

if(!fileOk) { 
    attr.addFlashAttribute("message", "이미지를 jpg 또는 png를 사용하세요");
    attr.addFlashAttribute("alertClass", "alert-success");

}else if (productExists != null) {//이미 등록한 상품이름 있다
    attr.addFlashAttribute("message", "등록한 상품이 있습니다. 다른 상품을 적으세요");
    attr.addFlashAttribute("alertClass", "alert-success");

}else { //슬러그, 이미지 저장
    product.setSlug(slug);
    product.setImage(fileName);
    productRepo.save(product);

    Files.write(path, bytes);
}

 

상품,이미지 저장할때
Files.write(path, bytes);  

 

 

BindingResult.hasErrors() 관련 오류

이미지 파일 올릴때 input태그에서 문제발견

th:field="*{image}"를 

th:id="file"  th:name="file"로 바꿔주니 해결됨

왜왜왜왜왜왜

 

th:field 는 id, name, value 속성을 자동으로 생성해주지 th:id, th:name 를 생성하는게 아니기 때문!!

 

 

---

 

 

이번엔 이미지 부분에 사진이 보이도록 해보자!!

 

 

- WebConfig 에 media(이미지 저장폴더)를 설정해줌

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

 

 

- index.html 

이미지 사진 변수넣고, 사진크기 조절해줌

 <td >
    <img th:src="@{'/media/'+${product.image}}" style="height: 2em">
</td>

 

결과

 

 

이번엔 가격 부분에  25000.00원이 나오는 부분 수정을 해보자!

가격에 소수점 붙이게 했던 DB에  DECIMAL(8,2) --> INT 로 수정.

근데 일단 dao에는 수정 안해주고 그대로 String

 

 

 

 

카테고리 이름 화면에 보이게 해보자!

 

카테고리name과 id를  map 에 담아서 화면에 보내주면 
카테고리 id로 카테고리 name을 찾을수있도록 한다.

 

@GetMapping
public String index(Model model) {

    List<Product> products = productRepo.findAll();
    List<Category> categories = categoryRepo.findAll();

    model.addAttribute("products", products);

    //map으로 카테고리 id, name을 같이 불러와서 카테고리id으로 name이 화면에 나오도록 
    HashMap<Integer, String> categoryIdAndName = new HashMap<>();
    for(Category category : categories) {
        categoryIdAndName.put(category.getId(), category.getName());
    }
    model.addAttribute("categoryIdAndName", categoryIdAndName);

    return "/admin/products/index";
}

model.addAttribute("categoryIdAndName", categoryIdAndName); 가 나오도록 하려면 index에도 수정을!

 

<td th:text="${categoryIdAndName[__${product.categoryId}__]}"></td>

 

카테고리에 
 <td th:text="${cateIdAndName[id]}"> id를 넣으면 value가된다
-> ${cateIdAndName[__${product.categoryId}__]} 

☆ 언더바 두번!!
= 카테고리 이름이 나온다