본문 바로가기
Spring

[Spring][Project: 쇼핑몰 웹사이트][1.2] 회원가입/ 로그인 페이지 구현

imakara 2023. 5. 18. 15:04

이전 POST

[Spring][Project: 쇼핑몰 웹사이트][1.1] 회원가입/ 로그인 페이지 구현

 

목차

6. service 생성

7. MemberController.java에 메서드 추가

8. join.jsp 수정

9. 회원가입 테스트

6. service 생성

[src/main/java] > [com.sample.service] > interface 'MemberService.java' & class 'MemberServiceImpl.java' 생성

 

interface[MemberService.java]

더보기 
package com.sample.service;

import com.sample.model.MemberVO;

public interface MemberService {
	
	//JoinUs
	public void memberJoin(MemberVO member) throws Exception;
}

class[MemberServiceImpl.java]

더보기 
package com.sample.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.sample.mapper.MemberMapper;
import com.sample.model.MemberVO;

@Service
public class MemberServiceImpl implements MemberService{
	@Autowired
	MemberMapper membermapper;

	@Override
	public void memberJoin(MemberVO member) throws Exception {
		
		membermapper.memberJoin(member);
		
	}
}

ㄴ> 여기서  @Service 어노테이션을 붙이는게 중요하다.

@Service는 내부에@Component를 가지고 있고, 비교했을 때 기능 차이는 없다고 한다. 단지 비즈니스 로직을 수행하는 서비스 레이어임을 알려주는 어노테이션이다.

7. MemberController.java에 메서드 추가

먼저 @Autowired를 통해서 MemberService.java가 자동으로 주입되도록 코드를 추가한다.

 

[MemberController.java]

더보기 
package com.sample.controller;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.sample.model.MemberVO;
import com.sample.service.MemberService;

@Controller
@RequestMapping(value = "/member")
public class MemberController {
	private static final Logger logger = LoggerFactory.getLogger(MemberController.class);
	
	@Autowired
	private MemberService memberservice;
	
	//회원가입 페이지 이동 : /member/join 에 매핑
	@RequestMapping(value = "join", method = RequestMethod.GET)
	public void loginGET() {
		
		logger.info("회원가입 페이지 진입");
		
	}
	
	//회원가입
	@RequestMapping(value="/join", method=RequestMethod.POST)
	public String joinPOST(MemberVO member) throws Exception{
		
		logger.info("join 진입");
		
		// 회원가입 서비스 실행
		memberservice.memberJoin(member);
		
		logger.info("join Service 성공");
		
		return "redirect:/main"; // 'FashionController.java'
		
	}
	
	//로그인 페이지 이동 : /member/login 에 매핑
	@RequestMapping(value = "login", method = RequestMethod.GET)
	public void joinGET() {
		
		logger.info("로그인 페이지 진입");
		
	}
}
@Autowired
private MemberService memberservice;

 

회원가입 메서드를 추가한다.

//회원가입
@RequestMapping(value="/join", method=RequestMethod.POST)
public String joinPOST(MemberVO member) throws Exception{

    logger.info("join 진입");

    // 회원가입 서비스 실행
    memberservice.memberJoin(member);

    logger.info("join Service 성공");

    return "redirect:/main";

}

8. join.jsp 수정

[join.jsp]

더보기 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Join Us</title>
<link rel="stylesheet" href="/resources/css/member/join.css">
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous">
</script>
</head>
<body>
	<div class="wrapper">
		<form id="join_form" method="post">
		<div class="wrap">
				<div class="subjecet">
					<span>회원가입</span>
				</div>
				<div class="id_wrap">
					<div class="id_name">아이디</div>
					<div class="id_input_box">
						<input class="id_input" name="memberId">
					</div>
				</div>
				<div class="pw_wrap">
					<div class="pw_name">비밀번호</div>
					<div class="pw_input_box">
						<input class="pw_input"  name="memberPw">
					</div>
				</div>
				<div class="pwck_wrap">
					<div class="pwck_name">비밀번호 확인</div>
					<div class="pwck_input_box">
						<input class="pwck_input">
					</div>
				</div>
				<div class="user_wrap">
					<div class="user_name">이름</div>
					<div class="user_input_box">
						<input class="user_input" name="memberName">
					</div>
				</div>
				<div class="mail_wrap">
					<div class="mail_name">이메일</div> 
					<div class="mail_input_box">
						<input class="mail_input" name="memberMail">
					</div>
					<div class="mail_check_wrap">
						<div class="mail_check_input_box">
							<input class="mail_check_input">
						</div>
						<div class="mail_check_button">
							<span>인증번호 전송</span>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="address_wrap">
					<div class="address_name">주소</div>
					<div class="address_input_1_wrap">
						<div class="address_input_1_box">
							<input class="address_input_1" name="memberAddr1">
						</div>
						<div class="address_button">
							<span>주소 찾기</span>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class ="address_input_2_wrap">
						<div class="address_input_2_box">
							<input class="address_input_2" name="memberAddr2">
						</div>
					</div>
					<div class ="address_input_3_wrap">
						<div class="address_input_3_box">
							<input class="address_input_3" name="memberAddr3">
						</div>
					</div>
				</div>
				<div class="join_button_wrap">
					<input type="button" class="join_button" value="가입하기">
				</div>
			</div>
		</form>
	</div>
	
<script>

	$(document).ready(function(){
		//회원가입 버튼(회원가입 기능 작동)
		$(".join_button").click(function(){
			$("#join_form").attr("action", "/member/join");
			$("#join_form").submit();
		});
	});

</script>

</body>
</html>

8-1. form 태그 수정

<form action=""> ==변경==> <form id="join_form" method="post">

8-2. name 태그 추가

<input> 태그에 name을 추가할건데, MemberVO.java에서 정의한 변수 이름을 알맞게 넣으면 된다.

(추가할 목록 : id_input, pw_input,  user_input, mail_input, address_input_1, address_input_2, address_input_3)

<input class="id_input"> ==변경==> <input class="id_input" name="memberId">

8-3. jQuery : script 태그 추가

<head> 태그 안에서 맨 밑에 <script> 태그를 추가해준다.

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous">
</script>

 

<body> 태그 안에서 맨 밑에 <script> 태그를 추가해준다.

<script>

	$(document).ready(function(){
		//회원가입 버튼(회원가입 기능 작동)
		$(".join_button").click(function(){
			$("#join_form").attr("action", "/member/join");
			$("#join_form").submit();
		});
	});

</script>

9. 회원가입 테스트

정상적으로 잘 들어간 모습이 보인다.

다음 POST에서 킵꼬잉~

[Spring][Project: 쇼핑몰 웹사이트][2.0] 프로젝트 흐름 / MVC 흐름 잡고가기

[Spring][Project: 쇼핑몰 웹사이트][2.1] 회원가입 - 아이디 중복 체크

 

안뇽~~~ :)

'Spring' 카테고리의 다른 글

[Spring][Project: 쇼핑몰 웹사이트][2.1] 회원가입 - 아이디 중복 체크  (0) 2023.05.22
[Spring][Project: 쇼핑몰 웹사이트][2.0] 프로젝트 흐름 / MVC 흐름 잡고가기  (0) 2023.05.19
[Spring][Project: 쇼핑몰 웹사이트][1.1] 회원가입/ 로그인 페이지 구현  (1) 2023.05.18
[Spring / MVC project] MVC 프로젝트 추가 설정  (0) 2023.05.17
[Spring / eclipse] 한글깨짐 UTF-8 설정  (0) 2023.05.17

'Spring' Related Articles

티스토리툴바