회원가입 구현하기_spring boot, jsp, javascript, mybatis 사용

회원가입 기능 구현

- /member/join

 

MemberController.java

@Controller
public class MemberController {
     @Autowired
     private MemberService memberService;
     
     @RequestMapping("member/join")
     String showJoin(){
         return "member/join";
     }

     @RequestMapping("member/doJoin")
     String doJoin(@RequestParam Map<String, Object> param, Model model) {
         Map<String, Object> rs = memberService.join(param);

         String resultCode = (String) rs.get("resultCode");

         if(resultCode.startWith("S-")) {
             String redirectUrl = "/member/login";
             model.addAttribute("jsAlertMsg", rs.get("msg"));
             model.addAttribute("jsLocationReplaceUrl", redirectUrl);
         } else { 
             model.addAttribute("jsAlertMsg", rs.get("msg"));
             model.addAttribute("jsHistoryBack", true);
         }

         return "redirect";
     }
}

 

src/main/webapp/WEB-INF/jsp/member/join.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8
" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="pageTitle" value="회원가입" />
<%@ include file="../part/head.jspf"%>
<script>
     function submitJoinForm(form) {
         form.loginId.value = form.loginId.value.trim();
         if (form.loginId.value.length == 0) {
              alert('로그인 아이디를 입력해주세요.');
              form.loginId.focus();
              return false;
          }
          if (form.loginId.value.length < 4) {
             alert('로그인 아이디를 4자 이상 입력해주세요.');
              form.loginId.focus();
              return false;
          }
          if (isAlphaNumeric(form.loginId.value) == false) {
              alert('로그인 아이디는 영문자 소문자와 숫자만 사용할 수 있습니다.');
              form.loginId.focus();
              return false;
         }
         
         form.loginId.value = form.loginId.value.toLowerCase();

          form.loginPw.value = form.loginPw.value.trim();
          if (form.loginPw.value.length == 0) {
             alert('비밀번호를 입력해주세요.');
              form.loginPw.focus();
              return false;
          }

          form.loginPwConfirm.value = form.loginPwConfirm.value.trim();
          if (form.loginPwConfirm.value.length == 0) {
              alert('비밀번호 확인을 입력해주세요.');
              form.loginPwConfirm.focus();
              return false;
         }
         if (form.loginPw.value != form.loginPwConfirm.value) {
              alert('로그인 비밀번호 확인이 일치하지 않습니다.');
             form.loginPwConfirm.focus();
              return false;
          }

         form.name.value = form.name.value.trim();
         if (form.name.value.length == 0) {
              alert('이름을 입력해주세요.');
             form.name.focus();
             return false;
          }
          if (form.name.value.length < 2) {
             alert('이름을 2자 이상 입력해주세요.');
              form.name.focus();
              return false;
          }
          form.submit();
      }
</script>
<div class="member-join-box con">
      <form onsubmit="submitJoinForm(this);return false;" action="/member/doJoin" method="POST" class="table-box form form-type-1">
         <table>
             <colgroup>
                 <col width="100" />
             </colgroup>
             <tbody>
                  <tr>
                      <th>아이디</th>
                       <td><input maxlength="30" name="loginId" autofocus="autofocus" placeholder="로그인 아이디를 입력해주세요." type="text" />
                     </td>
                  </tr>
                  <tr>
                      <th>비밀번호</th>
                      <td><input maxlength="30" name="loginPw" placeholder="비밀번호를 입력해주세요." type="password" />
                     </td>
                  </tr>
                  <tr>
                      <th>비밀번호 확인</th>
                      <td><input maxlength="30" autocomplete="off" name="loginPwConfirm" placeholder="비밀번호 확인을 입력해주세요." type="password" /></td>
                  </tr>
                  <tr>
                      <th>이름</th>
                      <td><input maxlength="30" name="name" placeholder="이름을 입력해주세요." type="text" />
                     </td>
                  </tr>
                  <tr>
                      <th>회원가입</th>
                      <td><input type="submit" value="가입" /> <input onclick="history.back();" type="button" value="취소" />
                     </td>
                  </tr>
              </tbody>
          </table>
      </form>
</div>

<%@ include file="../part/foot.jspf"%>

 

 

 

common.js 에 isAlpahNumeric 메서드 추가

인터넷에 javascript is alpahnumber 검색하면 자료 나와있음!

 

common.js

function isAlphaNumeric(str) {
     var code, i, len;
     for (i = 0, len = str.length; i < len; i++) {
         code = str.charCodeAt(i);
         if (!(code > 47 && code < 58) && // numeric (0-9)
             !(code > 64 && code < 91) && // upper alpha (A-Z)
             !(code > 96 && code < 123)) { // lower alpha (a-z)
                   return false;
              }
       }
      return true;
}

 

redirect.jsp 추가

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<script>
     var jsAlertMsg = '${jsAlertMsg}';
     if (jsAlertMsg) {
         alert(jsAlertMsg);
     }
     var jsHistoryBack = '${jsHistoryBack}' == 'true';
     if (jsHistoryBack) {
         history.back();
     }
     var jsLocationReplaceUrl = '${jsLocationReplaceUrl}';
     if (jsLocationReplaceUrl) {
         location.replace(jsLocationReplaceUrl);
     }
</script>

MemberService.java

public interface MemberService { 
     Map<String, Object> join(Map<String, Object> param);
}

MemberServiceImpl.java

@Service
pulic class memberServiceImpl implements MemberService {
     @Autowired     
     private MemberDao memberDao;

     @Override
     public Map<String, Object> join(Map<String, Object> param) {
        Map<String, Object> rs = new HashMap<String, Object>();
         
         String loginId = (String) param.get("loginId");
         Member member = memberDao.getMemberByLoginId(loginId);

         if(member == null){
                 memberDao.join(param);

                 int id = ((BigInteger) param.get("id")).intValue();

                 rs.put("resultCode", "S-1");  //성공
                 rs.put("id", id);
                 rs.put("msg","회원가입이 완료되었습니다");
         } else {
                 rs.put("resultCode", "F-1");  //실패
                 rs.put("msg","이미 존재하는 아이디 입니다.");
          }
          return rs;
     }
}

MemberDao.java

@Mapper
public interface MemberDao{
     void join(Map<String, Object> param);
     Member getMemberByLoginId(@Param("loginId") String loginId);
}

MemberDao.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.example.sbs.demo.dao.MemberDao">

<select id="getMemberByLoginId" resultType="Member">
SELECT * FROM `member` WHERE loginId = #{loginId}
</select>
<insert id="join" parameterType="map" useGeneratedKeys="true" keyProperty="id">
INSERT INTO member SET regDate = NOW(), loginId = #{loginId}, loginPw = #{loginPw}, `name` = #{name}
</insert>

</mapper>

 

db.sql

CREATE TABLE `member` (
id INT(10) UNSIGNED NOT NULL AUTO_INCREMENT,
PRIMARY KEY(id),
regDate DATETIME NOT NULL,
loginId CHAR(30) NOT NULL,
loginPw VARCHAR(120) NOT NULL,
`name` CHAR(100) NOT NULL
);

ALTER TABLE `member` ADD INDEX ( `loginId` );

 

Member.java

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Member {
     private int id;
     private String regDate;
     private String loginId;
     private String loginPw;
     private String name;
}