안녕하세요, 이번 글에서는 스프링 부트 프로젝트에서 회원가입 페이지를 요청하는 법을 다룹니다.
스프링 부트 프로젝트에서 기본 주소를 요청하는 법은 이전 글을 참고해 주세요.
이전 글: [Spring Boot] 스프링 부트로 회원 관리하기 (4) 기본 주소 요청하기
[Spring Boot] 스프링 부트로 회원 관리하기 (4) 기본 주소 요청하기
안녕하세요, 이번 글에서는 스프링 부트 프로젝트에서 기본 주소를 요청하는 법까지를 다룹니다. 스프링 부트 프로젝트에서 application.yml 파일 설정하는 법은 이전 글을 참고해 주세요. 이전
mnoqc.tistory.com
1. MemberController.java 파일 생성하기
src > main > java.com.mnoqc 폴더를 우클릭해 새로 만들기(New) > Java 클래스(Java Class) 를 눌러 줍니다.
파일명에 MemberController를 입력해 줍니다.
이전 글에서 다뤘던 기본 페이지 요청과 같습니다.
MemberController.java
package com.mnoqc.member.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
@Controller
public class MemberController {
// 회원가입 페이지 요청 메서드
@GetMapping("/member/save") // 사용자가 localhost:8081/member/save로 접속하면 이 메서드가 실행됨
public String saveForm() {
return "save";} // templates 폴더의 save.html을 렌더링하여 사용자에게 보여줌 (기본 화면)
}
2. save.html 파일 생성하기
src > resources > templates 폴더를 우클릭해 새로 만들기(New) > HTML 파일(HTML File) 을 눌러 줍니다.
위에서 설정한 컨트롤러가 실행되면 해당 파일을 렌더링하여 보여 주게 됩니다.
파일명에 index 를 입력해 줍니다.
이메일, 비밀번호, 이름 입력 폼과 제출 버튼이 나타나게 작성해 줍니다.
이렇게 제출된 데이터는 localhost:(포트번호)/member/save 로 가게 됩니다.
save.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- action 속성: form에 작성한 데이터를 어디로 보낼지 지정 -->
<form action="/member/save" method="post">
<!-- name 속성: 서버로 전송할 때 변수 이름의 역할 -->
이메일: <input type="text" name="memberEmail"> <br>
비밀번호: <input type="password" name="memberPassword"> <br>
이름: <input type="text" name="memberName"> <br>
<input type="submit" value="회원가입">
</form>
</body>
</html>
3. MemberApplication 실행 후 확인하기
MemberApplication을 실행한 후, 주소창에 localhost:(포트번호)를 입력해 줍니다.
회원가입을 누르면 localhost:(포트번호)/member/save로 넘어가며 입력 폼과 제출 버튼이 나타납니다.
정보 입력 후 회원가입 버튼을 눌러 제출해 줍니다.
제출 버튼을 누르면 405 오류가 납니다.
405 Method Not Allowed 오류: "허용되지 않는 메서드"를 의미합니다.
|
로그인 화면 또한 아직 만들지 않았기 때문에 404 오류가 납니다.
404 Not Found 오류: "찾을 수 없음"을 의미합니다.
|
다음 글: [Spring Boot] 스프링 부트로 회원 관리하기 (6) 회원가입 DB 연동하기
[Spring Boot] 스프링 부트로 회원 관리하기 (6) 회원가입 DB 연동하기
안녕하세요, 이번 글에서는 스프링 부트 프로젝트에서 회원가입 페이지와 DB 연동하는 법을 다룹니다. 스프링 부트 프로젝트에서 회원가입 페이지를 요청하는 법은 이전 글을 참고해 주세요.
mnoqc.tistory.com
