쇼핑몰 프로젝트 --카테고리 수정, 디자인변경(화면구현)

 

 

카테고리 등록할 때 categoryId 1,2는 데이터베이스에 미리 값을 넣어놔야 하는데 그렇게하니까 화면구현할 때 자꾸 두번정도 오류가 남

알고보니 데이터베이스에 1,2를 미리 넣어놨는데 화면에서 등록할 때 1,2를 다시 생성해서 두번 오류가 나는 거였음

등록할 때 3번부터 시작하게 하기 위해 데이터베이스에 구문 추가 

데이터베이스에 값 넣을 때

insert into category values(1, null, 'woman');

insert into category values(2, null, 'man');

ALTER TABLE category ALTER COLUMN category_id RESTART WITH 3;

이렇게 넣고 시작하면 됨

 

 

카테고리 수정 시 categoryId는 기본키가 수정 불가 categoryId는 수정 안되게 수정

category엔티티 클래스

//카테고리 변경 메서드
public Long changeCategory ( Category categoryParent, String categoryName) {
    this.categoryParent = categoryParent;
    this.categoryName = categoryName;

    return this.categoryId;
}

 

 

categoryService

//category수정
@Transactional
public void updateCategory(Long categoryId, CategoryUpdateDto categoryUpdateDto) {

    Category category = categoryRepository.findOneCategory(categoryId);
    Category parentCategory = categoryRepository.findOneCategory(categoryUpdateDto.getCategoryParent());


    category.changeCategory(
            parentCategory,
            categoryUpdateDto.getCategoryName()
    );

}

 

 

categoryUpdateDto

package ypjs.project.dto.categorydto;

import jakarta.validation.constraints.NotBlank;
import jakarta.validation.constraints.NotNull;
import lombok.Data;
import lombok.Getter;
import ypjs.project.domain.Category;

@Data
public class CategoryUpdateDto {
    
    private Long categoryId;

    @NotNull(message = "categoryParent not be null")
    private Long categoryParent;

    @NotBlank(message = "categoryName not be null")
    private String categoryName;

    public CategoryUpdateDto() {}

    public CategoryUpdateDto(Long categoryId, Long categoryParent, String categoryName) {
        this.categoryId = categoryId;
        this.categoryParent = categoryParent;
        this.categoryName = categoryName;
    }
}

 

 

categoryController

//    category수정
@ResponseBody
@PutMapping("/api/ypjs/category/update/{categoryId}")
public ResponseEntity updateCategory(@PathVariable("categoryId") Long categoryId,
                                     @RequestBody @Valid CategoryUpdateDto categoryUpdateDto) {

    categoryService.findOneCategory(categoryId);
    categoryService.updateCategory(categoryId,categoryUpdateDto);


    return ResponseEntity.ok().build();

}

 

 

item/category 값 넣을 때 정해진 값 있는 부분 input -> select로 수정 

select로하니까 값 받아올 때 th:value적용 안돼서 html에 script생성해서 값 받고 js파일에 옮김

 

 

item/itemPost

<div class="row">
    <div class="form-group mb-3">
        <label for="categoryId">카테고리 번호</label>
        <select class="form-control mt-1" id="categoryId" name="categoryId" style="width: 100%;">
            <option value="3">3 (women, outer)</option>
            <option value="4">4 (women, top)</option>
            <option value="5">5 (women, bottom)</option>
            <option value="6">6 (men, outer)</option>
            <option value="7">7 (men, top)</option>
            <option value="8">8 (men, bottom)</option>
        </select>
    </div>

 

item/itemUpdate

<div class="container py-5">
    <div class="row py-5">
        <form id="itemForm" th:action="@{/api/ypjs/item/update/{itemId}(itemId=${item.itemId})}" class="col-md-9 m-auto" method="post" th:object="${item}" enctype="multipart/form-data">
            <div class="row">
                <div class="form-group mb-3">
                    <label for="categoryId">카테고리 번호</label>
                    <select class="form-control mt-1" id="categoryId" name="categoryId" style="width: 100%;">
                        <option value="3">3 (women, outer)</option>
                        <option value="4">4 (women, top)</option>
                        <option value="5">5 (women, bottom)</option>
                        <option value="6">6 (men, outer)</option>
                        <option value="7">7 (men, top)</option>
                        <option value="8">8 (men, bottom)</option>
                    </select>
                    <!-- Hidden input 요소로 categoryId 값을 전달 -->
                    <input type="hidden" id="hiddenCategoryId" th:value="${item.categoryId}">
                </div>
            </div>

 

디자인 추가, hidden으로 값 받아서 js로 넘겨줌 

 

item.js에 값 받는 부분 추가

     _this.categoryValues();
},

 categoryValues: function() {
     // hidden input 요소의 값을 hiddenCategoryId select box에 설정
    let categoryId = $("#hiddenCategoryId").val();
     if (categoryId != null) {
            $("#categoryId").val(categoryId.toString());
        }
},

 

 

category/categoryPost

<div class="row justify-content-center">
    <div class="form-group mb-3" style="display: flex; flex-direction: column; align-items: flex-start; width: 70%;">
        <label for="categoryParent">카테고리 부모 번호</label>
        <select class="form-control mt-1" id="categoryParent" name="categoryParent" style="width: 100%;">
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div>
</div>
<div class="row justify-content-center">
    <div class="form-group mb-3" style="display: flex; flex-direction: column; align-items: flex-start; width: 70%;">
        <label for="categoryName">카테고리 이름</label>
        <select class="form-control mt-1" id="categoryName" name="categoryName" style="width: 100%;">
            <option value="outer">outer</option>
            <option value="top">top</option>
            <option value="bottom">bottom</option>
        </select>
    </div>
</div>

 

 

category/categoryUpdate

<!-- Start Contact -->
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="form-group mb-3" style="display: flex; align-items: center; width: 70%;">
            <span class="category-label" style="margin-right: 10px; font-weight: bold; font-size: 22px;">카테고리 번호</span>
            <span style="font-weight: bold; font-size: 22px;">:</span>
            <span style="margin-left: 10px; font-weight: bold; font-size: 22px;" id="categoryId" th:text="${category.categoryId}"></span>
        </div>
    </div><br>

    <div class="row justify-content-center">
            <div class="form-group mb-3" style="display: flex; flex-direction: column; align-items: flex-start; width: 70%;">
                <label for="categoryParent">카테고리 부모 번호</label>
                <select class="form-control mt-1" id="categoryParent" name="categoryParent" style="width: 100%;">
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
                <input type="hidden" id="hiddenCategoryParent" th:value="${category.categoryParent}">
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="form-group mb-3" style="display: flex; flex-direction: column; align-items: flex-start; width: 70%;">
                <label for="categoryName">카테고리 이름</label>
                <select class="form-control mt-1" id="categoryName" name="categoryName" style="width: 100%;">
                    <option value="outer">outer</option>
                    <option value="top">top</option>
                    <option value="bottom">bottom</option>
                </select>
                <input type="hidden" id="hiddenCategoryName" th:value="${category.categoryName}">
            </div>
        </div>

 

hidden으로 값 받은거 js에 넘겨줌

 

category.js에 값 받는 부분 추가

 _this.categoryValues();
},

 categoryValues: function() {
        // hidden input 요소의 값을 categoryParent select box에 설정
        let categoryParent = $("#hiddenCategoryParent").val();
        if (categoryParent != null) {
            $("#categoryParent").val(categoryParent.toString());
        }

        // hidden input 요소의 값을 categoryName select box에 설정
        let categoryName = $("#hiddenCategoryName").val();
        if (categoryName != null) {
            $("#categoryName").val(categoryName.toString());
        }
    },

 

 

categoryId 값 못 받게 한 html도 categoryUpdate에 있음

디자인은 이렇게 함