[Spring] 간단한 회원가입 및 로그인 로그아웃 예제 소스

포스팅을 보시기 전 해당하는 예제 소스는 블로그 주인(Alpreah)이 제작을 했습니다.

이점 참고 해주세요.

#1 과정을 보기전 결과 화면 및 파일

간단한 회원가입 및 로그인.zip

DB.sql

## 로그인 페이지 ##

## 회원가입 페이지 ##

## 로그인 후 페이지 ##

#2 글을 읽기 전 한번씩 읽어주세요.

부가적인 설명을 보시기 전, 마리아디비와 마이바티스를 연동을 해야 합니다.

만약, 연동을 하지 않았다면 아래의 링크를 확인 해주세요.

[Spring] Maria DB 설치

[Spring] 스프링 마이바티스 마리아디비 연결

알카이브 파일을 넣는법을 모르신다면 아래의 링크를 참고 해주세요.

[Spring] 알카이브 파일 추가하기

DB에 SQL을 넣는법을 모르신다면 아래의 링크를 참고 해주세요.

[Srping] heidisql에 테이블 생성 sql문 넣기

#3  설명

HomeController.java

package org.alpreah.demo;
 
import javax.inject.Inject;
import javax.servlet.http.HttpSession;
 
import org.alpreah.domain.member;
import org.alpreah.persistence.member_dao;
import org.springframework.context.annotation.Bean;
import org.springframework.http.converter.json.MappingJackson2HttpMessageConverter;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;
 
import com.fasterxml.jackson.databind.DeserializationFeature;
import com.fasterxml.jackson.databind.ObjectMapper;
 
@Controller
public class HomeController {
    
    //싱글톤으로 선언된 것을 주입 받는다.
    @Inject
    //해당하는 클레스에서 member_dao라는 자료형을 자기는 m_dao를 선언한다.
    private member_dao m_dao;
    //GET으로 /페이지를 요청하면
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String login() {
        //VIEW 폴더애 login.jsp 파일을 뷰페이지로 선언
        return "login";
    }
    //body의 값을 매핑하는 용도
    @ResponseBody
    //POST로 Login으로 요청을 할 경우
    @RequestMapping(value = "Login", method = RequestMethod.POST)
    //login이라는 메소드명을 가지고 매개변수는 member m, Httpsession session
    public int login(member m, HttpSession session) {
        //m_dao.Login(m, session)을 호출하고 반환한다.
        return m_dao.Login(m, session);
    }
    //GET으로 reigster페이지를 요청 할 경우
    @RequestMapping(value = "/register", method = RequestMethod.GET)
    public String register() {
        //view안에 있는 register.jsp를 뷰페이지로 지정한다.
        return "register";
    }
    //body의 값을 매핑하는 용도
    @ResponseBody
    //POST로 /register 페이지로 요청을 할 경우
    @RequestMapping(value = "/register", method = RequestMethod.POST)
    //메소드 이름이 register 매게변수는 member 자료형의 변수명은 m
    public int register(member m) {
        //m_dao.Register(m)의 값을 반환한다.
        return m_dao.Register(m);
    }
    
    // GET으로 /index페이지에 요청을 할 때
    @RequestMapping(value = "/index", method = RequestMethod.GET)
    public String index() {
        //view폴더에 있는 index.jsp를 뷰페이지로 선언한다.
        return "index";
    }
    
    //로그아웃 관련 페이지
    // /logout으로 GET 방식으로 페이지를 접근하게 된다면
    @RequestMapping(value = "/logout", method = RequestMethod.GET)
    //메소드 이름은 LOGOUT 매게 변수는 SESSION
    public String logout(HttpSession session) {
        //m으로 선언된 세션을 삭제시킨다.
        session.removeAttribute("m");
        // /페이지로 리다이렉트 시킨다.
        return "redirect:/";
    }
 
//JSONP를 사용하기 위해 선언
    @ControllerAdvice
    public class JsonpAdviceController extends AbstractJsonpResponseBodyAdvice {
        public JsonpAdviceController() {
            super("callback");
        }
    }
 
    @Bean
    public MappingJackson2HttpMessageConverter mappingJackson2HttpMessageConverter() {
        MappingJackson2HttpMessageConverter jsonConverter = new MappingJackson2HttpMessageConverter();
        ObjectMapper objectMapper = new ObjectMapper();
        objectMapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
        jsonConverter.setObjectMapper(objectMapper);
        return jsonConverter;
    }
 
}
 

member.java

package org.alpreah.domain;
 
public class member {
    //해당 클래스에서 m_id, m_pw를 선언
    private String m_id;
    private String m_pw;
    
    //Stirng값을 반환하는 get_M_id 메소드
    public String getM_id() {
        //해당하는 클레스의 전역변수로 선언된 m_id를 반환한다.
        return m_id;
    }
    //반환값이 없는 setM_id 매개변수는 Stirng m_id를 가진다.
    public void setM_id(String m_id) {
        //전역 변수에 있는 m_id에 매개변수로 받은 m_id를 담는다.
        this.m_id = m_id;
    }
    
    public String getM_pw() {
        return m_pw;
    }
    public void setM_pw(String m_pw) {
        this.m_pw = m_pw;
    }
}
 

member_dao.java

package org.alpreah.persistence;
 
import javax.inject.Inject;
import javax.servlet.http.HttpSession;
 
import org.alpreah.domain.member;
import org.apache.ibatis.session.SqlSession;
import org.springframework.stereotype.Repository;

//자세한 설명은 구글 검색 (너무 길어져서 생략)
@Repository
public class member_dao {
    //싱글톤으로 선언된걸 주입 받음
    @Inject
    private SqlSession session;
    //자신이 사용하고 싶은 mapper의 namespace 이름
    private static final String NameSpace = "memberMapper.";
    
    public int Id_Check(member m) {
        //예외처리
        try {
            //결과값을 반환
            return session.selectOne(NameSpace + "Id_Check", m);
        }
        catch (Exception e) {
            //오류 발생시 오류 출력과 -1 반환
            e.printStackTrace();
            return -1;
        }
    }
    
    public int Register(member m) {
        //위에 선언된 Id_Check(m)의 결과값을 Id_Check_Result에 담는다.
        int Id_Check_Result = Id_Check(m);
        //Id_Check_Result값이 0이 아니라면 Id_Check_Result값을 반환
        //0은 아이디가 중복되지 않음 자세한거는 mapper를 열어보세요.
        if(Id_Check_Result != 0) return Id_Check_Result;
        
        try {
            //sqlsession에 insert를 할꺼고 내가 쓸 맵퍼는 위에 12번째줄에 선언된거고
            //내가 사용 할 QUERY문은 Register를 사용하고 넘길 값은 m이다.
            //이후 설명은 다 생략 똑같은 내용
            session.insert(NameSpace + "Register", m);
            return 0;
        }
        catch (Exception e) {
            e.printStackTrace();
            return -2;
        }
    }
    
    public int Login(member m, HttpSession Hsession) {
        int Id_Search_Result = -1;
        try {
            Id_Search_Result = session.selectOne(NameSpace + "Login", m);
        }
        catch (Exception e) {
            e.printStackTrace();
            return -1;
        }
        
        if(Id_Search_Result != 1) return Id_Search_Result;
        
        try {
            member m_info = session.selectOne(NameSpace + "Login_Info", m);
            Hsession.setAttribute("m", m_info);
            return 1;
        }
        catch (Exception e) {
            e.printStackTrace();
            return -2;
        }
    }
    
}
 

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>인덱스 데모</title>
    </head>
    <body>
        //세션 스코프를 통해 m으로 선언된 변수명에 m_id를 찾아서 출력
        ${sessionScope.m.m_id}님 안녕하세요. <br>
        <a href = "/demo/logout">로그아웃</a>
    </body>
</html>

login.jsp

HTML 설명은 생략 JQUERY만 설명함

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>로그인 데모</title>
    </head>
    <body>
        <h3>## 로그인 페이지 ##</h3>
        <input type = "text" id = "m_id" placeholder="아이디"><br>
        <input type = "password" id = "m_pw" placeholder="비밀번호"><br>
        <button id = "login_process">로그인</button>
        <p>만약 로그인 할 계정이 없다면 <a href = "/demo/register">여기</a>를 눌러주세요.</p>
        
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
        <script>
        $(document).ready(function(){
            //login_process의 id를 가지는것을 클릭하게 된다면 함수 실행
            $("#login_process").click(function(){
                //json 객체를 생성
                var json = {
                    //m_id의 이름을 가지고 m_id의 id를 가지는 태그의 벨류값을 가져옴 아래도 동일
                    m_id : $("#m_id").val(),
                    m_pw : $("#m_pw").val()
                };
                //json을 포이치문 돌림
                for(var str in json){
                    //json[m_id or m_pw]를 돌릴때 길이가 0이면 아래 출력
                    if(json[str].length == 0){
                        //str은 json에 변수명을 가지고 #은 아이디 찾는것 attr은 에트류뷰트의 
                        //placeholder를 찾는것
                        alert($("#" + str).attr("placeholder") + "를 입력해주세요.");
                        //포커스를 올려줌
                        $("#" + str).focus();
                        return;
                    }
                }
                //비동기 통신 선언 (아작스)
                 $.ajax({
                    type : "post", //post로 요청
                    url : "Login", //login url로 요청
                    data : json, // json데이터를 전성
                    success : function(data) { //성공 하면
                        switch (Number(data)) { //위치문
                        case 0: // 0 일때
                            alert("아이디 또는 비밀번호가 일치하지 않습니다."); //경고 출력
                            break;
                        case 1: // 1 일떄
                            window.location.href = "/demo/index"; //로그인 성공시 index페이지 이동
 
                        default:
                            break;
                        }
                    },
                    error : function(error) { //404 500등 오류 발생시 
                        alert("오류 발생"+ error);
                    }
                });
            });
        });
        </script>
    </body>
</html>

Register.jsp

Login.jsp와 동일하니 생략

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>회원가입 데모</title>
    </head>
    <body>
        <h3>## 회원가입 페이지 ##</h3>
        <input type = "text" id = "m_id" placeholder="아이디"><br>
        <input type = "password" id = "m_pw" placeholder="비밀번호"><br>
        <button id = "register_process">회원가입</button>
        <p>만약 로그인 할 아이디가 있다면 <a href = "/demo">여기</a>를 눌러주세요.</p>
        
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#register_process").click(function(){
                    var json = {
                        m_id : $("#m_id").val(),
                        m_pw : $("#m_pw").val()
                    };
                    
                    for(var str in json){
                        if(json[str].length == 0){
                            alert($("#" + str).attr("placeholder") + "를 입력해주세요.");
                            $("#" + str).focus();
                            return;
                        }
                    }
                    
                     $.ajax({
                        type : "post",
                        url : "register",
                        data : json,
                        success : function(data) {
                            switch (Number(data)) {
                            case 0:
                                alert("정상적으로 회원가입 되었습니다.");
                                window.location.href = "/demo";
                                break;
                            case 1:
                                alert("아이디가 중복 되었습니다.");
                                break;
                            default:
                                alert("알수없는 오류가 발생 했습니다. [Error Code :" + Number(data) + "]");
                                break;
                            }
                        },
                        error : function(error) {
                            alert("오류 발생"+ error);
                        }
                    });
                });
            });
        </script>
    </body>
</html>

memberMapper.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">
<!-- 해당하는 맵퍼의 네임스페이스를 memberMapper 선언 -->
<mapper namespace="memberMapper">
    <!-- select를 하는 구문으로 선언을 하고 select 하는 질의어의 고유ID는 Id_Check로 선언   반환값은 INT-->
    <select id = "Id_Check" resultType="int">
        <!-- 검색을 하는데 갯수를 출력해라 MEMBER 테이블에 해당하는 테이블의 별칭은 m으로 선언한다. -->
        select count(*) from member m
        <!-- 검색을 하는데 m테이블에 m_id 는 매개변수로 받아온 m_id와 동일해야 한다. -->
        where m.m_id = #{m_id}
        <!-- 결과 : 0이면 아이디 중복 x 1이면 중복 검색 결과가 없으면 0으로 나옴 아래는 다 생략 동일하니-->
    </select>
    
    <insert id = 'Register'>
        INSERT INTO member (m_id, m_pw)
        VALUES (#{m_id}, #{m_pw})
    </insert>
    
    <select id = "Login" resultType="int">
        select count(*) from member m
        where m.m_id = #{m_id} and m.m_pw = #{m_pw}
    </select>
    
    <select id = "Login_Info" resultType="Member">
        select * from member m
        where m.m_id = #{m_id} and m.m_pw = #{m_pw}
    </select>
</mapper>