KKH_RECORDS

Spring : Ajax를 이용한 login 본문

Records 1 : Study/Spring

Spring : Ajax를 이용한 login

피아노치는 개발자, kkim 2020. 4. 23. 23:31

- 데이터베이스

유저 기본 테이블 : MEMBER
프로필 사진 테이블 : IMAGE (POST_NO[게시글 번호]가 null인 행 중 USER_ID에서 해당되는 값을 찾으면 됩니다.)

TABLE : MEMBER 정의
TABLE : IMAGE 정의
VIEW : MVIEW (MEMBER & IMAGE)

MEMBER와 IMAGE를 조인하였기에 적당한 더미데이터를 양쪽에 넣어주지 않는다면
MVIEW에 값이 들어가지 않아서 로그인 시에 값을 불러올 수가 없습니다!

 

- loginview.jsp (화면단, JSP)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&amp;display=swap" rel="stylesheet">
    <title>#로그인</title>
</head>
<body>
    <div class="wrapper">
        <form id="loginForm" method="post">
            <div>
                <h2>일반 정보로 로그인</h2><hr>
                <table id="loginTable">
                    <tr>
                        <th><div id="buttonB1">아이디</div></th>
                        <td><input type="text" id="userId" name="userId" class="loginInput"></td>
                    </tr>
                    <tr>
                        <th><div id="buttonB1">비밀번호</div></th>
                        <td><input type="password" id="userPwd" name="userPwd" class="loginInput"></td>
                    </tr>
                </table>
                <input type="button" value="로그인" id="submitBtn">
                <img src="${contextPath}/resources/image/login_icon.png" id="submitBtn">
            </div>
        </form>
    </div>
    <script>
        $(function() {
            $('#submitBtn').mouseenter(function() {
                $(this).css('cursor','pointer') ;
            }).mouseout(function() {
                $(this).css('cursor','normal') ;
            }).click(function() {
                submitCheck() ;
            }) ;
        }) ;
        
        function submitCheck() {
            var userId  = $('#userId' ).val() ;
            var userPwd = $('#userPwd').val() ;
            $.ajax({
                type : "POST",
                url: 'login.me',
                data: {userId:userId, userPwd:userPwd},
                success: function(data) {
                    if(data == "false")
                        alert('잘못된 아이디이거나, 비밀번호가 틀렸습니다.') ;
                    else
                        location.href="${contextPath}" ; // home.do로 돌아가시면 됩니다.
                }
            }) ;
        }
        
        $('.loginInput').keydown(function(key) {
            if(key.keyCode == 13) {
                $('#submitBtn').click() ;
            }
        }) ;
    </script>
</body>

CSS는 드리지 않을 생각입니다.
추후에 Google Login, 회원가입 등을 모두 구현한 뒤에 드리도록 하겠습니다!

 

- Member.java (VO)

package finalProject.homis.hobbyFarm.member.model.vo;
import	java.sql.Date ;

public	class Member {
	private	String	userId ;
	private	String	userPwd ;
	private	String	userName ;
	private	String	nickName ;
	private	Date	birthDate ;
	private	String	gender ;
	private	String	phone ;
	private	String	email ;
	private	int		postalCode ;
	private	String	bAddress ;
	private	String	lAddress ;
	private	Date	createDate ;
	private	Date	modifyDate ;
	private	String	mStatus ;
	private	int		mKind ;
	private	String	introduction ;
	private	int		reportCount ;
	private	String	vipYn ;
	private	Date	vipDate ;
	private	String	originName ;
	private	String	changeName ;
	private	String	imgSrc ;
	private	Date	uploadDate ;
	
	public	Member() {}
	public	Member(String userId, String userPwd, String userName, String nickName, Date birthDate, String gender, String phone, String email,  
				   int postalCode, String bAddress, String lAddress, Date createDate, Date modifyDate, String mStatus, int mKind, String introduction,   
				   int reportCount, String vipYn, Date vipDate, String originName, String changeName, String imgSrc, Date uploadDate) {
		this.userId = userId;				this.userPwd = userPwd;				this.userName = userName;
		this.nickName = nickName;			this.birthDate = birthDate;			this.gender = gender;
		this.phone = phone;					this.email = email;					this.postalCode = postalCode;
		this.bAddress = bAddress;			this.lAddress = lAddress;			this.createDate = createDate;
		this.modifyDate = modifyDate;		this.mStatus = mStatus;				this.mKind = mKind;
		this.introduction = introduction;	this.reportCount = reportCount;		this.vipYn = vipYn;
		this.vipDate = vipDate;				this.originName = originName;		this.changeName = changeName;
		this.imgSrc = imgSrc;				this.uploadDate = uploadDate;
	}

	public	String	getUserId()		  { return userId; }
	public	String	getUserPwd()	  { return userPwd; }
	public	String	getUserName()	  { return userName; }
	public	String	getNickName()	  { return nickName; }
	public	Date	getBirthDate()	  { return birthDate; }
	public	String	getGender()		  { return gender; }
	public	String	getPhone()		  { return phone; }
	public	String	getEmail()		  { return email; }
	public	int		getPostalCode()	  { return postalCode; }
	public	String	getbAddress()	  { return bAddress; }
	public	String	getlAddress()	  { return lAddress; }
	public	Date	getCreateDate()	  { return createDate; }
	public	Date	getModifyDate()	  { return modifyDate; }
	public	String	getmStatus()	  { return mStatus; }
	public	int		getmKind()		  { return mKind; }
	public	String	getIntroduction() { return introduction; }
	public	int		getReportCount()  { return reportCount; }
	public	String	getVipYn()		  { return vipYn; }
	public	Date	getVipDate()	  { return vipDate; }
	public	String	getOriginName()	  { return originName; }
	public	String	getChangeName()	  { return changeName; }
	public	String	getImgSrc()		  { return imgSrc; }
	public	Date	getUploadDate()	  { return uploadDate; }
	
	public	void	setUserId(String userId)			 { this.userId = userId; }
	public	void	setUserPwd(String userPwd)			 { this.userPwd = userPwd; }
	public	void	setUserName(String userName)		 { this.userName = userName; }
	public	void	setNickName(String nickName)		 { this.nickName = nickName; }
	public	void	setBirthDate(Date birthDate)		 { this.birthDate = birthDate; }
	public	void	setGender(String gender)			 { this.gender = gender; }
	public	void	setPhone(String phone)				 { this.phone = phone; }
	public	void	setEmail(String email)				 { this.email = email; }
	public	void	setPostalCode(int postalCode)	 	 { this.postalCode = postalCode; }
	public	void	setbAddress(String bAddress)		 { this.bAddress = bAddress; }
	public	void	setlAddress(String lAddress)		 { this.lAddress = lAddress; }
	public	void	setCreateDate(Date createDate)		 { this.createDate = createDate; }
	public	void	setModifyDate(Date modifyDate)		 { this.modifyDate = modifyDate; }
	public	void	setmStatus(String mStatus)			 { this.mStatus = mStatus; }
	public	void	setmKind(int mKind)				 	 { this.mKind = mKind; }
	public	void	setIntroduction(String introduction) { this.introduction = introduction; }
	public	void	setReportCount(int reportCount)		 { this.reportCount = reportCount; }
	public	void	setVipYn(String vipYn)				 { this.vipYn = vipYn; }
	public	void	setVipDate(Date vipDate)			 { this.vipDate = vipDate; }
	public	void	setOriginName(String originName)	 { this.originName = originName; }
	public	void	setChangeName(String changeName)	 { this.changeName = changeName; }
	public	void	setImgSrc(String imgSrc)			 { this.imgSrc = imgSrc; }
	public	void	setUploadDate(Date uploadDate)		 { this.uploadDate = uploadDate; }
	
	@Override
	public String toString() {
		return "Member [userId="+userId+", userPwd="+userPwd+", userName="+userName+", nickName="+nickName+", birthDate="+birthDate
				  +", gender="+gender+", phone="+phone+", email="+email+", postalCode="+postalCode+", bAddress="+bAddress+", lAddress="+lAddress
				  +", createDate="+createDate+", modifyDate="+modifyDate+", mStatus="+mStatus+", mKind="+mKind+", introduction="+introduction
				  +", reportCount="+reportCount+", vipYn="+vipYn+", vipDate="+vipDate+"]" ;
	}
}

 

- MemberController

@RequestMapping(value="login.me", method=RequestMethod.POST) // AJAX : 일반 로그인
public void memberLogin(@RequestParam("userId") String userId,
						@RequestParam("userPwd") String userPwd,
						HttpServletResponse response,
						Model model) throws IOException {
	Member m = new Member() ;
	m.setUserId(userId) ;
	m.setUserPwd(userPwd) ;
	
	Member loginUser = mService.memberLogin(m) ;
	if(loginUser != null) {
		if(m.getUserPwd().equals(loginUser.getUserPwd())) {
			model.addAttribute("loginUser", loginUser) ;
			response.getWriter().print(true) ;
		} else {
			response.getWriter().print(false) ;
		}
	}
}

 

- MemberService  &  MemberServiceImpl  &  MemberException  &  MemberDAO

// MemberService
Member memberLogin(Member m) ;

// MemberServiceImpl
@Override
public Member memberLogin(Member m) {
   return mDAO.selectMember(sqlSession, m) ;
}

// MemberException
─────────────────────────────────────────────────────────────
package finalProject.homis.hobbyFarm.member.model.exception;

public	class MemberException extends RuntimeException {
   public MemberException() {}
   public MemberException(String msg) {
      super(msg) ;
   }
}
─────────────────────────────────────────────────────────────

// MemberDAO
public Member selectMember(SqlSessionTemplate sqlSession, Member m) {
   return (Member)sqlSession.selectOne("memberMapper.selectOne", m) ;
}

 

- MemberMapper

<select id="selectOne" parameterType="Member" resultMap="memberResultSet">
   SELECT  *
   FROM    MVIEW
   WHERE   USER_ID = #{userId} AND M_STATUS = 'N'
</select>
<resultMap  type="Member"           id="memberResultSet">
   <id     property="userId"       column="USER_ID"/>
   <result property="userPwd"      column="USER_PWD"/>
   <result property="userName"     column="USER_NAME"/>
   <result property="nickName"     column="NICKNAME"/>
   <result property="birthDate"    column="BIRTH"/>
   <result property="gender"       column="GENDER"/>
   <result property="phone"        column="PHONE"/>
   <result property="email"        column="EMAIL"/>
   <result property="postalCode"   column="POSTAL_CODE"/>
   <result property="bAddress"     column="B_ADDRESS"/>
   <result property="lAddress"     column="L_ADDRESS"/>
   <result property="createDate"   column="CREATE_DATE"/>
   <result property="modifyDate"   column="MODIFY_DATE"/>
   <result property="mStatus"      column="M_STATUS"/>
   <result property="mKind"        column="M_KIND"/>
   <result property="introduction" column="INTRODUCTION"/>
   <result property="reportCount"  column="REPORT_COUNT"/>
   <result property="vipYn"        column="VIP_YN"/>
   <result property="vipDate"      column="VIP_DATE"/>
   <result property="originName"   column="ORIGIN_NAME"/>
   <result property="changeName"   column="CHANGE_NAME"/>
   <result property="imgSrc"       column="IMG_SRC"/>
   <result property="uploadDate"   column="UPLOAD_DATE"/>
</resultMap>

 

로그인은 Ajax로 구현하였습니다.
기존의 로그인은 form - submit의 형태로 구현되어 로그인 실패 시 errorPage로 이동되는데, 이를 ajax를 이용해 변형했습니다/

로그인 성공 시 model.addAttribute로 session에 등록해 주고 ajax로 true를 전달해 주며
로그인 실패 시 ajax로 false만 전달해 줍니다.
View에서는 data값을 받아 true일 경우 home.do로, false일 경우 잘못되었다는 alert를 표시해 줍니다.

 

차후에 시간을 내어 구글 아이디로 로그인 기능을 만드는 내용을 올리겠습니다.

감사합니다.

저작자표시
Comments