[Spring Boot] 17. 상품 등록

shr·2022년 3월 2일

Spring

목록 보기

16/23

상품 등록

📝 파일 업로드 방식에는 ① 프로젝트 내부에 파일을 업로드하는 방식과 ② 프로젝트 외부에 따로 업로드 폴더를 만들어서 처리하는 방식 두 가지가 있다. 우리는 ②번 방식을 사용한다. 해당 방식은 파일의 경로를 http://localhost:8081/images/사진이름으로 지정한다.

src/main/java - com.example.demo.controller.rest - ProductRestController

package com.example.demo.controller.rest;

import java.io.*;
import java.nio.file.Files;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.*;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.*;

import com.example.demo.dto.*;
import com.example.demo.service.*;

import lombok.*;

@RequiredArgsConstructor
@RestController
public class ProductRestController {

    private final ProductService service;

    @Value("${ck.image.folder}")
    private String CKImageFolder;
    @Value("${product.image.folder}")
		private String imageFolder;

    @PostMapping(value="/product/image", produces = MediaType.APPLICATION_JSON_VALUE)
    public ResponseEntity<CKResponse> ckImageUpload(MultipartFile upload) {
        CKResponse ckResponse = service.ckImageUpload(upload);
        return ResponseEntity.ok(ckResponse);
    }

    @GetMapping("/images/{imagename}") 
    public ResponseEntity<byte[]> showImage(@PathVariable String imagename) {
        File file = new File(CKImageFolder, imagename);
			if (file.exists() == false)
				file = new File(imageFolder, imagename);
			if (file.exists() == false)
				return null;

        HttpHeaders headers = new HttpHeaders();
        // 파일 확장자를 자르고, 확장자에 따라 이미지의 ContentType을 지정한다.
        String extension = imagename.substring(imagename.lastIndexOf(".")+1).toUpperCase();
        MediaType type = null;
        if (extension.equals("JPG") || extension.equals("JPEG"))
            type = MediaType.IMAGE_JPEG;
        else if (extension.equals("PNG"))
            type = MediaType.IMAGE_PNG;
        else if (extension.equals("GIF"))
            type = MediaType.IMAGE_GIF;
        else
            return null;

        headers.setContentType(type);
        headers.add("Content-Disposition", "inline;filename=" + imagename);

        try {
            return ResponseEntity.ok().headers(headers).body(Files.readAllBytes(file.toPath()));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}

📝 사진이 ck 이미지 폴더에 없으면 상품 사진 이미지 폴더에 있는지도 찾는다. 둘 다 없을 때만 null을 리턴한다. 우리는 CK 이미지 폴더와 그냥 이미지 폴더의 처리를 함께 해 주고 있다. (🗣️ 따로 처리할 수도 있지만 우리가 하기엔 너무 복잡하고 어렵다.)

Product 테이블 생성

create table product (
    pno number(7),
    vendor varchar2(20 char),
    name varchar2(20 char),
    info clob,
    imagename varchar2(100 char),
    price number(7),
    salesVolume number(7),
    countOfStar number(7),
    sumOfStar number(7),
    countOfReview number(7),
    stock number(7),
    categoryCode varchar2(3 char),
    constraint product_pk_pno primary key(pno) 
);

시퀀스도 함께 생성한다.

create sequence product_seq;

src/main/java - com.example.demo.entity - Product 생성

package com.example.demo.entity;

import lombok.*;
import lombok.experimental.*;

@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
@Accessors(chain=true)
public class Product {
    private Integer pno;
    private String vendor;
    private String name;
    // 제품 설명 (ck에 들어간다.)
    private String info;
    private String imagename;
    private Integer price;
    // 판매량
    private Integer salesVolume;
    // 별점 (5점 만점) - 출력할 때 평균을 계산
    private Integer sumOfStar;
    private Integer countOfStar;
    // 리뷰 개수
    private Integer countOfReview;
    // 재고
    private Integer stock;
    // 카테고리 소분류 코드
    private String categoryCode;
}

src/main/resource - templates - product - add.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
    <title>Insert title here</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="/ckeditor/ckeditor.js"></script>
    <script>
        // 상품 이미지 미리 보기
        function previewImage() {
            const file = $("#imagename")[0].files[0];

            // 이미지 크기 제한 (1MB)
            const maxSize = 1024*1024;
            if (file.size > maxSize) {
                Swal.fire("이미지 크기 오류", "상품 이미지는 1MB를 넘을 수 없습니다.", "error");
                // input과 이미지 미리 보기 영역 초기화
                $('#imagename').val('');
                $('#show_image').removeAttr('src');
                return false;
            }

            // 웹은 문자열 기반이라 바이너리 데이터를 주고받으려면 base64 방식으로 인코딩을 한다.

            // 자바스크립트의 FileReader 내장 객체를 생성
            const reader = new FileReader();
            // file 객체를 base64 방식으로 인코딩해서 result 속성에 저장
            reader.readAsDataURL(file);
            reader.onload = function() {
                $('#show_image').attr("src", reader.result);
            }
            return true;
        }

        $(document).ready(function() {
            $('#imagename').change(previewImage);

            // 대분류 출력
            $.ajax("/categories").done((categories)=>{
                const $mainCategory = $('#main_category');
                $.each(categories, function(idx, c) {
                    $('<option>').text(c.name).val(c.code).appendTo($mainCategory);
                });
            });

            // 대분류 선택
            $('#main_category').change(function() {
                $.ajax('/categories?code='+$('#main_category').val()).done((categories)=>{

                    // 대분류를 변경할 경우 중분류와 소분류를 모두 초기화
                    const $mediumCategory = $('#medium_category');
                    $mediumCategory.empty();
                    $mediumCategory.append('<option value="-1" disabled selected>중분류 선택</option>');
                    $('#minor_category').empty().append('<option value="-1" disabled selected>소분류 선택</option>');

                    $.each(categories, function(idx, c) {
                        $('<option>').text(c.name).val(c.code).appendTo($mediumCategory);
                    });
                });
            });

            // 중분류 선택
            $('#medium_category').change(function() {
                $.ajax('/categories?code='+$('#medium_category').val()).done((categories)=>{
                    const $minorCategory = $('#minor_category');
                    $minorCategory.empty();
                    $minorCategory.append('<option value="-1" disabled selected>소분류 선택</option>');
                    $.each(categories, function(idx, c) {
                        $('<option>').text(c.name).val(c.code).appendTo($minorCategory);
                    });
                });
            });

            // 파일 업로드할 경로를 지정
            const $ckUploadPath = "/product/image?_csrf=" + $('#_csrf').val();
            CKEDITOR.replace('info', {
                filebrowserUploadUrl : $ckUploadPath
            });
        });
    </script>
</head>
<body>
<div id="page">
    <header th:replace="/fragments/header.html">
    </header>
    <nav th:replace="/fragments/nav.html">
    </nav>
    <div id="main">
        <aside th:replace="/fragments/aside.html">
        </aside>
        <section>
            <form id="add_form" method="post" action="/product/add" enctype="multipart/form-data">
                <input type="hidden" name="_csrf" th:value="${_csrf.token}" id="_csrf" />
                <div>
                    대분류 <select id="main_category">
                        <option disabled selected value="-1">선택하세요.</option>
                    </select>
                    중분류 <select id="medium_category">
                        <option class="msg" disabled selected value="-1">대분류를 선택하세요.</option>
                    </select>
                    소분류 <select id="minor_category" name="categoryCode">
                        <option class="msg" disabled selected value="-1">대분류와 중분류를 선택하세요.</option>
                    </select>
                </div>
                <img id="show_image" height="240px">
                <div class="form-group">
                    <label for="image">상품 이미지</label>
                    <input type="file" name="imagename" id="imagename" class="form-control" accept=".jpg,.jpeg,.png,.gif">
                </div>
                <div class="form-group">
                    <label for="manufacturer">제조사</label>
                    <span id="manufacturer_msg"></span>
                    <div class="form-group">
                        <input type="text" class="form-control" id="vendor" name="vendor">
                    </div>
                </div>	
                <div class="form-group">
                    <label for="name">상품명</label>
                    <span id="name_msg"></span>
                    <div class="form-group">
                        <input type="text" class="form-control" id="name" name="name">
                    </div>
                </div>	
                <div class="form-group">
                    <label for="price">가격</label>
                    <span id="price_msg"></span>
                    <div class="form-group">
                        <input type="text" class="form-control" id="price" name="price">
                    </div>
                </div>
                <div class="form-group">
                    <textarea class="form-control" rows="5" id="info" name="info"></textarea>
                </div>
                <div class="form-group">
                    <label for="stock">재고량 선택</label>
                    <select id="stock" name="stock" class="form-control">
                        <option selected="selected">0</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>	
                <div class="form-group" style="text-align: center;">
                    <button id="add" class="btn btn-info">추가</button>
                </div>
            </form>
        </section>
    </div>
    <footer th:replace="/fragments/footer.html">
    </footer>
</div>
</body>
</html>

📝 $("#imagename")[0]
$(선택자)는 jQuery 객체를 선택하는 코드이고, $(선택자))[0]는 붙여서 jQuery 안의 html 요소를 뽑아낼 수 있다.

📝 files[0]
<input type='file' id='imagename'> 요소는 multiple 조건을 줬을 때 여러 개의 파일을 선택할 수 있어야 하므로 files라는 배열을 가지고, 이 배열은 선택한 파일의 정보를 담은 객체들을 저장한다. multiple을 쓰지 않고 이미지를 하나만 올릴 경우 해당 파일은 files 배열의 0번째에 들어 있다고 생각하면 된다.

src/main/java - com.example.demo.dto - ProductDto 생성

package com.example.demo.dto;

import org.springframework.web.multipart.*;

import com.example.demo.entity.*;

import lombok.*;

@NoArgsConstructor(access = AccessLevel.PRIVATE)
public class ProductDto {

    // 제품을 추가할 때 사용하는 DTO
    @Data
    public static class Add {
        private String vendor;
        private String name;
        private String info;
        private Integer price;
        private Integer stock;
        private String categoryCode;

        private MultipartFile imagename;

        public Product toEntity() {
            return Product.builder().vendor(vendor).name(name).info(info).price(price).stock(stock)
                .categoryCode(categoryCode).countOfReview(0).countOfStar(0).sumOfStar(0)
                .salesVolume(0).build();
        }
    }
}

📝 파일을 업로드하면 서버 측에서는 MultipartFile로 받는다. 그런데 우리는 이미지를 테이블에 직접 저장하지 않고, 파일명을 저장하려고 한다. 그러기 위해서는 imagename이 받을 때는 multipart, 저장할 때는 String이어야 한다. 그렇기 때문에 DTO로 빼 준 것이다.

src/main/java - com.example.demo.controller.mvc - ProductController

package com.example.demo.controller.mvc;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import com.example.demo.dto.ProductDto;
import com.example.demo.service.ProductService;

import lombok.AllArgsConstructor;

@AllArgsConstructor
@Controller
public class ProductController {
    private ProductService service;
    @GetMapping({"/", "/product/list"})
    public String index() {
        return "product/list";
    }

    // 상품 추가
    @GetMapping("/product/add")
    public void add() {
    }

    @PostMapping("/product/add")
    public String add(ProductDto.Add dto) {
        service.add(dto);
        return "redirect:/";
    }
}

src/main/java - com.example.demo.service - ProductService

package com.example.demo.service;

import java.io.*;
import java.util.List;
import java.util.UUID;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import com.example.demo.dao.ProductDao;
import com.example.demo.dto.*;
import com.example.demo.dto.ProductDto.Add;
import com.example.demo.entity.Product;

import lombok.*;

@RequiredArgsConstructor
@Service
public class ProductService {
    @Value("${ck.image.folder}")
    private String CKImageFolder;

    @Value("${ck.image.path}")
    private String ckImagepath;

    @Value("${product.image.folder}")
    private String imageFolder;

    @Value("${product.image.path}")
    private String imagePath;

    @Value("${default.image.name}")
    private String defaultImage;

    private final ProductDao productDao;

    public CKResponse ckImageUpload(MultipartFile image){
        if (image != null && image.isEmpty() == false) {
            String imageName = UUID.randomUUID() + "-" + image.getOriginalFilename();

            File file = new File(CKImageFolder, imageName);

            try {
                image.transferTo(file);
            } catch (IllegalStateException | IOException e) {
                e.printStackTrace();
            }
            return new CKResponse(1, imageName, ckImagepath + imageName);
        }
        return null;
    }

    public void add(Add dto) {
        Product product = dto.toEntity();

        // 이미지의 객체를 가리킴
        MultipartFile image = dto.getImagename();
        product.setImagename(defaultImage);

        // MultipartFile이 null이 아니고 이미지 파일(image/jpeg, image/png 등)이라면
        if (image != null && image.isEmpty() == false && image.getContentType().toLowerCase().startsWith("image/")) {
            String imagename = UUID.randomUUID() + "-" + image.getOriginalFilename();
            File file = new File(imageFolder, imagename);
            try {
                image.transferTo(file);
                product.setImagename(imagename);
            } catch (IllegalStateException | IOException e) {
                e.printStackTrace();
            }
        }
        productDao.save(product);
    }

src/main/java - com.example.demo.dao - ProductDao

package com.example.demo.dao;

import java.util.List;

import org.apache.ibatis.annotations.*;

import com.example.demo.dto.ProductDto;
import com.example.demo.entity.*;

@Mapper
public interface ProductDao {

    public void save(Product product);

    public int count(String categoryCode);

}

src/main/resources - mapper - productMapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.dao.ProductDao">

    <insert id="save" useGeneratedKeys="true" keyProperty="pno">
        <selectKey keyProperty="pno" order="BEFORE" resultType="int">
            select product_seq.nextval from dual
        </selectKey>
        insert into product(pno, vendor, name, info, imagename, price, salesVolume, countOfStar, sumOfStar, countOfReview, stock, categoryCode) 
        values(#{pno}, #{vendor}, #{name}, #{info}, #{imagename}, #{price}, #{salesVolume}, #{countOfStar}, #{sumOfStar}, #{countOfReview}, #{stock}, #{categoryCode})
    </insert>

💡 selectKey

사전에 어떤 키 값을 가져와 증가시킨 후 입력하거나, 입력 후에 증가된 키 값을 가져올 필요가 있을 때 사용한다. selectKey를 이용하면 별도의 쿼리 로직을 등록할 필요 없이 해당 메소드에서 일괄 처리가 가능하다.

출처

mybatis에서 selectKey 사용법

🗣️ 생성한 시퀀스 값이 서비스나 컨트롤러에서 필요한 경우 selectKey를 사용한다. 우리는 사실 지금 필요 없는데 selectKey 써 보려고 썼다.

shr

못하다 보면 잘하게 되는 거야 ･ᴗ･̥̥̥

이전 포스트

[Spring Boot] 16. 사진 업로드 ②, 카테고리 생성

다음 포스트

[Spring Boot] 17. 상품 등록

Spring

상품 등록

💡 selectKey

출처

[Spring Boot] 16. 사진 업로드 ②, 카테고리 생성

[Spring Boot] 18. 페이징

0개의 댓글