Spring Boot 회원가입 구현 해보자!

Karim·2021년 12월 15일
MyBatisSpringboot
7

SpringBoot

목록 보기
4/15
post-thumbnail

1. Version

💬

  • IntelliJ : 2020.3.2.community
  • spring boot : 2.6.1

2. 시작 전 확인사항

💬 gradle 추가

	//Db 관련
	implementation 'org.springframework.boot:spring-boot-starter-jdbc'
	implementation group: 'org.mybatis.spring.boot', name: 'mybatis-spring-boot-starter', version: '2.2.0'
	implementation group: 'org.mariadb.jdbc', name: 'mariadb-java-client', version: '2.3.0'
	implementation group: 'org.mybatis', name: 'mybatis-typehandlers-jsr310', version: '1.0.2'
	implementation group: 'org.mybatis', name: 'mybatis-spring', version: '2.0.6'

💬 사용할 DB 구축

3. User Table 생성

💬 Create Table sql

CREATE TABLE `TB_USER` (
  `USER_NO` int(11) NOT NULL AUTO_INCREMENT COMMENT '사용자번호',
  `USER_ID` varchar(255) NOT NULL COMMENT '아이디',
  `USER_PW` varchar(256) DEFAULT NULL COMMENT '비밀번호',
  `USER_NAME` varchar(255) NOT NULL COMMENT '사용자명',
  `USER_AUTH` varchar(255) NOT NULL COMMENT '권한',
  `APPEND_DATE` datetime DEFAULT NULL COMMENT '추가날짜',
  `UPDATE_DATE` datetime DEFAULT NULL COMMENT '수정날짜',
  PRIMARY KEY (`USER_NO`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

4. application.yml 설정

💬 application.yml 경로

src/main/resources/application.yml

💬 application.yml 내용

spring:
  # 접속 DB 설정
  datasource:
    url: "jdbc:mariadb://127.0.0.1:3306/simpleBoard"
    username: "karim"
    password: "karim"
    driver-class-name: "org.mariadb.jdbc.Driver"

mybatis:
  # mapper 경로 지정
  mapper-locations: query/**/*.xml
  configuration:
    map-underscore-to-camel-case: true

5. Html 페이지 생성

💬 html 페이지 경로

src/main/resources/templates/...html

💬 html 페이지 구현

<!--회원가입 페이지-->
<!--signup.html-->
<!DOCTYPE html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<form method="post" action="/signUp">
    <div class="container">
        <h1>회원가입</h1>
        <div class="form-group">
            <label for="inputEmail4">userId</label>
            <input type="text" class="form-control" id="inputEmail4" name="userId" placeholder="사용자 아이디">
        </div>
        <div class="form-group">
            <label for="inputAddress">userName</label>
            <input type="text" class="form-control" id="inputAddress" name="userName" placeholder="사용자 이름">
        </div>
        <div class="form-group">
            <label for="inputPassword4">password</label>
            <input type="password" class="form-control" id="inputPassword4" name="userPw" placeholder="사용자 비밀번호">
        </div>
        <button type="submit" class="btn btn-primary">가입 완료</button>
    </div>
</form>
</body>
</html>

5. User 객체 Vo 구현

💬 User 객체 Vo 구현

  • 회원 가입 시 저장할 유저 정보 객체를 만든다.
package com.karim.simpleBoard.vo;

import lombok.Data;

import java.util.Collection;
import java.util.Collections;

@Data
public class UserVo{
    private int userNo;
    private String userId;
    private String userPw;
    private String userName;
    private String userAuth;
    private String appendDate;
    private String updateDate;
}

💬 어노테이션 설명

  • @Data
    @Getter, @Setter, @RequiredArgsConstructor, @ToString, @EqualsAndHashCode 어노테이션을 한꺼번에 설정해주는 어노테이션

6. Mapper 인터페이스 및 Xml 구현

💬 Mapper 인터페이스 구현

  • 유저 정보를 DB에 저장하기 위한 Mapper 인터페이스 구현한다.
package com.karim.simpleBoard.mapper;

import com.karim.simpleBoard.vo.UserVo;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface UserMapper {
    void saveUser(UserVo userVo);
}

💬 sql xml 구현

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.karim.simpleBoard.mapper.UserMapper">
    <insert id="saveUser" parameterType="com.karim.simpleBoard.vo.UserVo">
        INSERT INTO TB_USER
        (USER_ID, USER_PW, USER_NAME, USER_AUTH, APPEND_DATE, UPDATE_DATE)
        VALUES(#{userId},#{userPw},#{userName},#{userAuth},#{appendDate},#{updateDate});
    </insert>
</mapper>

💬 xml 설명

  • id
    @Mapper에서 정의한 이름을 동일하게 맞춰줘야 한다.
  • parameterType
    파라미터의 자료형을 넣어준다.

7. Service 구현

💬 Service 구현

  • DAO를 호출하는 Service를 구현한다.
package com.karim.simpleBoard.service;

import com.karim.simpleBoard.mapper.UserMapper;
import com.karim.simpleBoard.vo.UserVo;
import lombok.RequiredArgsConstructor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.text.SimpleDateFormat;
import java.util.Date;

@Service
@RequiredArgsConstructor
public class UserService {
	// 회원가입 시 저장시간을 넣어줄 DateTime형
    SimpleDateFormat format = new SimpleDateFormat ( "yyyy-MM-dd HH:mm:sss");
    Date time = new Date();
    String localTime = format.format(time);

    @Autowired
    UserMapper userMapper;

    @Transactional
    public void joinUser(UserVo userVo){
        BCryptPasswordEncoder passwordEncoder = new BCryptPasswordEncoder();
        userVo.setUserPw(passwordEncoder.encode(userVo.getPassword()));
        userVo.setUserAuth("USER");
        userVo.setAppendDate(localTime);
        userVo.setUpdateDate(localTime);
        userMapper.saveUser(userVo);
    }
}

💬 어노테이션 설명

  • @RequiredArgsConstructor
    생성자 자동 생성해 준다.
  • @Autowired
    의존관계를 자동으로 설정해 준다. (DAO 객체 주입)
  • @Transactional
    트랜잭션 보장이 된 메소드로 설정 해준다.

8. Controller 구현

💬 Controller 구현

package com.karim.simpleBoard.controller;

import com.karim.simpleBoard.service.UserService;
import com.karim.simpleBoard.vo.UserVo;
import lombok.RequiredArgsConstructor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;


@Controller
@RequiredArgsConstructor
public class UserController {
    @Autowired
    UserService userService;

    /**
     * 회원가입 폼
     * @return
     */
    @GetMapping("/signUp")
    public String signUpForm() {
        return "signup";
    }

    /**
     * 회원가입 진행
     * @param user
     * @return
     */
    @PostMapping("/signUp")
    public String signUp(UserVo userVo) {
        userService.joinUser(userVo);
        return "redirect:/login"; //로그인 구현 예정
    }
}

💬 어노테이션 설명

  • @RequiredArgsConstructor
    생성자 자동 생성해 준다.
  • @Autowired
    의존관계를 자동으로 설정해 준다. (Service 객체 주입)
  • @GetMapping
    @RequestMapping(Method=RequestMethod.GET)과 같다.
  • @PostMapping
    @RequestMapping(Method=RequestMethod.POST)과 같다.

9. 실행

💬 WebApplication 구현

package com.karim.simpleBoard;

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

@SpringBootApplication
public class WebApplication {

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

💬 WebApplication 실행

  • 기본 localhost:8080으로 띄어 진다.

10. 결과 화면

💬 회원가입 화면

💬 TB_USER Table

  • 가입 완료 버튼을 누르면 Table에 값이 들어가 있는것을 확인 할 수 있다.

📚 참고

profile
Karim
나도 보기 위해 정리해 놓은 벨로그
이전 포스트

Spring Boot 매개변수 화면에 출력 해보자!

다음 포스트

Spring Boot에서 @Autowired 대신 @RequiredArgsConstructor 를 써보자!

4개의 댓글

comment-user-thumbnail
김세훈
2022년 7월 21일

gradle 말구 maven 으로 사용도 가능한가요? html이 아니라 jsp로 구현하고싶어서요

1개의 답글
comment-user-thumbnail
김용진
2022년 12월 20일

공부하며 찾아본 글들 중에 정리 제일 깔끔하네요. 감사합니다.

1개의 답글