[MySQL & Spring Boot] 회원 프로젝트 _2~5) 서버 포트번호 지정 ~ 회원가입 로직 구현

✒️ Database & DBMS/MySQL

[MySQL & Spring Boot] 회원 프로젝트 _2~5) 서버 포트번호 지정 ~ 회원가입 로직 구현

A Lim Han 2024. 5. 26. 19:50

💙 회원 프로젝트 _2~5) 서버 포트번호 지정부터 회원가입 로직 구현까지

※ 본 프로젝트와 관련된 제 모든 게시물은 제 개인 공부 기록 목적으로 작성되었으며, 자료 출처는 '코딩레시피'님의 [스프링부트 회원 프로젝트] 입니다!

--> https://www.youtube.com/watch?v=RhM1bQ76Tv0&list=PLV9zd3otBRt5ANIjawvd-el3QU594wyx7

1. application.yml 파일에서 아래 코드를 통해 서버 포트번호 지정

server:
  port: 8081

2. HomeController.java 파일에서 기본 페이지 요청 메서드 구현

package com.codingrecipe.member.controller;

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

@Controller
public class HomeController {
    // 기본 페이지 요청하는 메서드 구현
    // Line 10에서 호출이 오면 Line 11의 내용이 브라우저에 띄워진다
    @GetMapping("/")
    public String index() {
        return "index";
    } // templates 폴더의 index.html 을 찾아가는 코드
}

3. index.html 파일 생성 후 기본 코드 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
  <h2>Hello Spring Boot!!</h2>
</body>
</html>

4. MemberApplication.java 파일 실행

package com.codingrecipe.member;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class MemberApplication {

	public static void main(String[] args) {
		SpringApplication.run(MemberApplication.class, args);
	}

}

좌 ➡️ 우 로 실행

5. MemberController.java 파일 생성

package com.codingrecipe.member.controller;

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

@Controller
public class MemberController {

    // 회원가입 페이지 출력 요청
    @GetMapping("/member/save")
    public String saveForm() {
        return "save";
    }
}

6. save.html 생성

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>save</title>
    <!-- jquery cdn -->
    <script
            src="https://code.jquery.com/jquery-3.6.3.min.js"
            integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
            crossorigin="anonymous"></script>
</head>
<body>
<!-- action속성: form에 작성한 데이터를 어디로 보낼지 지정하는 역할 수행 -->
<form action="/member/save" method="post"> <!-- 전달되는 내용이 보이지 않게 post 메서드 사용 -->
    <!-- name속성: 서버로 전송할 때 변수이름의 역할을 수행 -->
    이메일: <input type="text" name="memberEmail" id="memberEmail" onblur="emailCheck()"> <br>
    <p id="check-result"></p>
    비밀번호: <input type="password" name="memberPassword"> <br>
    이름: <input type="text" name="memberName"> <br>
    <input type="submit" value="회원가입">

</form>
</body>
</html>

저작자표시 비영리 변경금지