Spring/SpringMVC

상품 상세, 상품 등록 폼 뷰 & 컨트롤러

느리지만 꾸준하게 2022. 5. 3. 15:42

컨트롤러도 만들어주자.

@GetMapping("/{itemId}")
public String item(@PathVariable long itemId, Model model) {
    Item item = itemRepository.findById(itemId);
    model.addAttribute("item", item);
    return "basic/item";
}

 

뷰는 아래와 같이 th:value를 넣어주고 작성 해준다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link th:href="@{/css/bootstrap.min.css}"
            href="../css/bootstrap.min.css" rel="stylesheet">
    <style>.container {
max-width: 560px;
}
</style>
</head>
<body>
<div class="container">
    <div class="py-5 text-center">
        <h2>상품 상세</h2>
    </div>
    <div>
        <label for="itemId">상품 ID</label>
        <input type="text" id="itemId" name="itemId" class="form-control" value="1" th:value="${item.id}" readonly>
    </div>

    <div>
        <label for="itemName">상품명</label>
        <input type="text" id="itemName" name="itemName" class="form-control" value="상품A" th:value="${item.itemName}" readonly>
    </div>
    <div>
        <label for="price">가격</label>
        <input type="text" id="price" name="price" class="form-control" value="10000" th:value="${item.price}" readonly>
    </div>
    <div>
        <label for="quantity">수량</label>
        <input type="text" id="quantity" name="quantity" class="form-control" value="10" th:value="${item.quantity}" readonly>
    </div>
    <hr class="my-4">
    <div class="row">
        <div class="col">
            <button class="w-100 btn btn-primary btn-lg"onclick="location.href='editForm.html'" type="button">상품 수정</button>
        </div>
        <div class="col">
            <button class="w-100 btn btn-secondary btn-lg"
                    onclick="location.href='items.html'" type="button">목록으로</button>
        </div>
    </div>
</div> <!-- /container -->
</body>
</html>

 

리터럴 표현식 써주고 템플릿 부분에서 (itemId=${item.id}) 이 부분이 {itemId}로 치환이 된다.

<div class="col">
    <button class="w-100 btn btn-primary btn-lg"
            onclick="location.href='editForm.html'"
            th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"
            type="button">상품 수정</button>
</div>

 

item.html의 전체 코드는 아래와 같다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link href="../css/bootstrap.min.css"
          th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <style>
.container {
max-width: 560px;
}
</style>
</head>
<body>
<div class="container">
    <div class="py-5 text-center">
        <h2>상품 상세</h2>
    </div>
    <div>
        <label for="itemId">상품 ID</label><input type="text" id="itemId" name="itemId" class="form-control"
                                                value="1" th:value="${item.id}" readonly>
    </div>
    <div>
        <label for="itemName">상품명</label>
        <input type="text" id="itemName" name="itemName" class="form-control"
               value="상품A" th:value="${item.itemName}" readonly>
    </div>
    <div>
        <label for="price">가격</label>
        <input type="text" id="price" name="price" class="form-control"
               value="10000" th:value="${item.price}" readonly>
    </div>
    <div>
        <label for="quantity">수량</label>
        <input type="text" id="quantity" name="quantity" class="form-control"
               value="10" th:value="${item.quantity}" readonly>
    </div>
    <hr class="my-4">
    <div class="row">
        <div class="col">
            <button class="w-100 btn btn-primary btn-lg"
                    onclick="location.href='editForm.html'"
                    th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"
                    type="button">상품 수정</button>
        </div>
        <div class="col">
            <button class="w-100 btn btn-secondary btn-lg"
                    onclick="location.href='items.html'"
                    th:onclick="|location.href='@{/basic/items}'|"
                    type="button">목록으로</button>
        </div>
    </div>
</div> <!-- /container -->
</body>
</html>

 

 

 

속성 변경 - th:value

  • `th:value = "${item.id}"`
  • 모델에 있는 item 정보를 획득하고 프로퍼티 접근법으로 출력한다.
  • (모델에 있는 item 정보를 획득하고 프로퍼티 접근법으로 출력한다. ( item.getId() ))
  • value 속성을 th:value 속성으로 변경한다

 

 

상품수정 링크

  • th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"

 

목록으로 링크

  • th:onclick="|location.href='@{/basic/items}'|"

 

 

그리고 copy path해서 절대경로를 주소창에 그대로 넣어주고 변경사항을 바로바로 확인할수 있다.

<button class="w-100 btn btn-primary btn-lg"
        onclick="location.href='editForm.html'"
        th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"
        type="button">상품 수정</button>

 

<button class="w-100 btn btn-primary btn-lg"
        onclick="location.href='editForm.html'"
        th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|"
        type="button">상품 수정2222</button>

 

 

 

 

 

상품 등록 폼을 만들어 주자.

// BasicItemController Class

@GetMapping("/add")
public String addForm() {
    return "basic/addForm";
}

@PostMapping("/add")
    public String save() {
        return "xxx";
}

 

 

현재 상품등록 폼을 누르면 500 에러가 나오게된다. network에서 name항목에 add가보이질 않는다.

network에 add 항목이 뜨게되면 500 status와 함께 Form Data에서 등록한 itemname과 price를 확인해줘야 한다.

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link th:href="@{/css/bootstrap.min.css}"
          href="../css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            max-width: 560px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="py-5 text-center">
        <h2>상품 등록 폼</h2>
    </div>
    <h4 class="mb-3">상품 입력</h4>
    <form action="item.html" th:action method="post">
        <div>
            <label for="itemName">상품명</label>
            <input type="text" id="itemName" name="itemName" class="form-control"
                   placeholder="이름을 입력하세요">
        </div>
        <div>
            <label for="price">가격</label>
            <input type="text" id="price" name="price" class="form-control"
                   placeholder="가격을 입력하세요">
        </div>
        <div>
            <label for="quantity">수량</label>
            <input type="text" id="quantity" name="quantity" class="form-control"
                   placeholder="수량을 입력하세요">
        </div>
        <hr class="my-4">
        <div class="row">
            <div class="col"><button class="w-100 btn btn-primary btn-lg" type="submit">상품 등록</button>
            </div>
            <div class="col">
                <button class="w-100 btn btn-secondary btn-lg"
                        onclick="location.href='items.html'"
                        th:onclick="|location.href='@{/basic/items}'|"
                        type="button">취소</button>
            </div>
        </div>
    </form>
</div> <!-- /container -->
</body>
</html>

속성 변경 - - th:action

  • HTML form에서 action 에 값이 없으면 현재 URL에 데이터를 전송

 

  • 상품 등록 폼의 URL과 실제 상품 등록을 처리하는 URL을 똑같이 맞추고 HTTP 메서드로 두 기능을
    구분한다.

 

  • 상품 등록 폼: GET /basic/items/add
  • 상품 등록 처리: POST /basic/items/add

 

취소

 

  • 취소시 상품 목록으로 이동

 

  • th:onclick="|location.href='@{/basic/items}'|"

 

 

 

 

 

 

 

 

 

 

 

<출처 김영한: 스프링 MVC 1편 - 벡앤드 웹 개발 핵심 기술>

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-mvc-1/dashboard

 

스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 인프런 | 강의

웹 애플리케이션을 개발할 때 필요한 모든 웹 기술을 기초부터 이해하고, 완성할 수 있습니다. 스프링 MVC의 핵심 원리와 구조를 이해하고, 더 깊이있는 백엔드 개발자로 성장할 수 있습니다., -

www.inflearn.com

 

'Spring > SpringMVC' 카테고리의 다른 글

상품 수정  (0) 2022.05.04
상품 등록 처리 - @ModelAttribute  (0) 2022.05.04
상품 목록 - 타임리프  (0) 2022.05.03
스프링MVC 프로젝트 - 도메인 개발 & 상품 서비스 HTML  (0) 2022.05.03
요청 매핑 헨들러 어뎁터 구조  (0) 2022.05.01

'Spring/SpringMVC'의 다른글

  • 현재글상품 상세, 상품 등록 폼 뷰 & 컨트롤러

관련글

티스토리툴바