상품 등록 폼

구현할 내용

• 상품 목록 페이지에서 상품 등록을 클릭하면 /add로 이동

• 상품 등록 페이지에서 취소 버튼 클릭하면 상품리스트 페이지로 이동

만들 상품 등록 폼 /add 페이지

⭐️동일한 url(.../add)에 대해서 단순 페이지 조회와 데이터(HTML Form) 전송 요청 2가지를 구현한다. 같은 url 요청에 대해 HTTP 메서드에 따라 다른 메서드를 실행한다.

1. GET 방식으로 상품 등록 폼 페이지 조회 : 단순 페이지 렌더링(템플릿 뷰 이름 반환) addForm() 메서드 호출, 실행

2. POST 방식으로 상품 등록 데이터 전송 : 현재 페이지(.../add)에서 동일한 url로 데이터를 전송 save() 메서드 호출, 실행 //데이터가 왔으니 저장해야지

3. add 페이지(basic/addForm 템플릿) 구성

1. GET방식, 조회 - addForm()메서드 구현

//같은 url에 대해 get 들어오면 그냥 페이지만 보여주는 addForm 메서드 호출
    @GetMapping("/add")
    public String addForm(){
        return "basic/addForm";
    }

❤️⭐️2. POST 방식, 데이터 저장 - save() 메서드(1차 구현) => add 페이지에서 데이터 폼을 작성하고 상품 등록 버튼을 누르면 동일한 url(../add)로 HTML Form 데이터가 POST방식으로 전송되도록 설정했기 때문에 1번과 동일한 url(../add)에 대해 POST방식으로 들어오는 요청을 처리한다!

//같은 url에 대해 post 방식 들어오면 저장하는 save 메서드 호출
    @PostMapping("/add")
    public String save(){
        return "basic/addForm";
    }

HTML form 태그의 속성인 action은 전송할 링크를 적어주는데 현재 페이지 주소와 동일한 주소로 전송할 거라면 th:action 하고 값은 비워두면 된다.

그러면 템플릿이 실행될 때 th:action 값이 없으면 자동으로 현재 페이지 주소로 데이터를 POST 방식으로 전송한다.

취소 취소시 상품 목록으로 이동한다.

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