728x90
회원가입
2022.02.22 - [Framework/Spring] - (Springboot) Mybatis 회원 가입
회원가입 등급 목록조회
2022.03.02 - [Framework/Spring] - (Springboot) Mybatis 회원 등급 목록 조회
1. MemberMapper 인터페이스 추상메서드
//회원 아이디 중복 체크
public boolean isIdCheck(String memberId);
2. MemberMapper.xml 쿼리문 작성
<select id="isIdCheck" parameterType="String" resultType="boolean">
/*회원 아이디 중복 체크*/
SELECT
if(COUNT(1) = 1, 0, 1)
FROM
tb_member AS m
WHERE
m.m_id = #{memberId};
</select>
3. MemberController에 post매핑
/**
* idCheck ajax
* @RequestParam(value = "memberId") == request.getParameter("memberId")
*/
@PostMapping("/idcheck")
@ResponseBody
public boolean isIdCheck(@RequestParam(value = "memberId") String memberId) {
log.info("아이디중복체크 클릭시 요청받은 memberId의 값: {}", memberId);
boolean result = memberMapper.isIdCheck(memberId);
log.info("아이디중복체크 여부: {}", result);
return result;
}
4. view단 회원가입 폼 수정
- 회원아이디 input 박스 옆에 중복체크 버튼 만들기
- 회원 가입폼 id 삽입
- 회원 가입 버튼 id 삽입, type 수정
- input, select 속성 disabled로 수정
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{layout/default}">
<!-- 사용자 정의 title -->
<th:block layout:fragment="customTitle">
<title th:text="${title}"></title>
</th:block>
<th:block layout:fragment="customContents">
<style>
table tr:not(:first-child) input {
width: 100%;
}
</style>
<form id="addMemberForm" th:action="@{/member/addMember}" method="post" >
<table border="1">
<tbody>
<tr>
<td>회원아이디</td>
<td>
<input type="text" name="memberId" >
<button type="button" id="idCheck">아이디중복체크</button>
</td>
</tr>
<tr>
<td>회원비밀번호</td>
<td>
<input type="text" name="memberPw" disabled>
</td>
</tr>
<tr>
<td>회원이름</td>
<td>
<input type="text" name="memberName" disabled>
</td>
</tr>
<tr>
<td>회원권한</td>
<td>
<select name="memberLevel" style="width:100%;" disabled>
<th:block th:if="${not #lists.isEmpty(memberLevelList)}" th:each="l : ${memberLevelList}" >
<option th:value="${l.levelNum}">[[${l.levelName}]]</option>
</th:block>
<th:block th:unless="${not #lists.isEmpty(memberLevelList)}">
<option>등록된 회원등급이 없습니다.</option>
</th:block>
</select>
</td>
</tr>
<tr>
<td>회원이메일</td>
<td>
<input type="text" name="memberEmail" disabled>
</td>
</tr>
<tr>
<td>회원주소</td>
<td>
<input type="text" name="memberAddr" disabled>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<button id="addMemberBtn" type="button" style="width:100%; height:30px; line-height: 30px;" disabled>회원가입</button>
</td>
</tr>
</tfoot>
</table>
</form>
</th:block>
</html>
5. 회원 가입 폼 javascript 코드 작성
<!-- 사용자 정의 Script -->
<th:block layout:fragment="customScript">
<script>
$(function(){
function validationCheck(data){
if(typeof data == 'undefined' || data == '' || data == null){
return false;
}
return true;
}
$('#idCheck').click(function(){
var memberId = $('input[name="memberId"]').val();
//console.log(validationCheck(memberId));
var vCheck = validationCheck(memberId);
if(vCheck){
$.ajax({
url: '/member/idcheck'
,type: 'POST'
,data: {'memberId' : memberId}
,dataType: 'json'
,success: function(data){
console.log(data);
if(data == true){
$('input, select, button').prop('disabled', false);
}else {
$('#addMemberForm input').not('input[name="memberId"]').prop('disabled', true);
$('#addMemberForm button').not('#idCheck').prop('disabled', true);
$('#addMemberForm select').prop('disabled', true);
}
//화면에서 맨처음 아이디를 제외한 모든 입력하는 요소는 비활성화(html 속성 추가)
//아이디 중복이 발생않은 경우(회원가입 O) 입력하는 요소는 활성화
//아이디 중복이 발생하는 경우(회원가입 X) 입력하는 요소는 비활성화
}
});
}
});
$('#addMemberBtn').click(function(){
var isSubmit = true;
var inputObj = $('#addMemberForm').find('input');
$.each(inputObj, function(){
var inputData = $(this).val();
var result = validationCheck(inputData);
//사용자가 입력하지 않은 경우
if(!result){
alert('필수항목입니다. 입력해주세요.');
$(this).focus();
isSubmit = false;
return false;
}
})
if(isSubmit) $('#addMemberForm').submit();
});
});
</script>
</th:block>
5. 실행결과
맨처음 & id 중복체크 완료되지 않을 경우 아이디를 제외한 모든 버튼과 input,select 속성 disabled 상태
id 중복체크 완료 했을 때
빈칸을 두고 회원가입 버튼 눌렀을 때 경고창 보여주기
빈칸 없이 회원가입 버튼 눌렀을 때 다시 회원 목록으로 돌아가고
입력한 값 그대로 db에 입력되어 있는 모습 볼 수 있음
'Framework > SpringBoot' 카테고리의 다른 글
| (Stringboot) 🅳 Mybatis 회원 삭제 (0) | 2022.03.18 |
|---|---|
| (Springboot) 🆄 Mybatis 회원 수정 화면 및 처리 (0) | 2022.03.18 |
| (Springboot) 🅲 Mybatis 회원가입 등급 목록 조회 (0) | 2022.03.02 |
| (Springboot) Thymeleaf 객체 바인딩, 유틸리티 객체 (0) | 2022.02.22 |
| (Springboot) Thymeleaf 이클립스 자동완성 플러그인 설치하기 (0) | 2022.02.22 |