[SpringBoot] 회원가입 insert

html 에서 form과 input으로 뼈대 만들기 

        <form id="registerForm">
            <section class="step-1">
                <div class="input-box">
                    <span class="icon"><ion-icon name="mail"></ion-icon></span>
                    <input type="email" required maxlength="50" name="email">
                    <label>이메일</label>
                </div>


                <input id="Btn" type="submit" class="btn" name="registerSubmit" value="다음"/>
                <div class="login-register">
                    <p>계정이 있으신가? <a href="/login" class="register-link" target="_blank">로그인</a></p>
                </div>
            </section>

        </form>

 

자바스크립트로 연결되는지 확인하기 

const btnElements = document.getElementById('Btn')

btnElements.addEventListener('click', function() {
    alert('클릭');
});

 

alert 확인되면 자바스립트로 백연결 시작하기 

registerForm.onsubmit = e => {
    e.preventDefault();
    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    formData.append('email', registerForm['email'].value);
    xhr.open('POST', '/user/register/');
    xhr.onreadystatechange = () => {
        if(xhr.readyState === XMLHttpRequest.DONE){
            if(xhr.status >= 200 && xhr.status < 300){
                alert('서브밋 백연결 성공 ')
                const responseObject = JSON.parse(xhr.responseText);
                switch (responseObject.result){
                    case 'failure':
                        alert('알 수 없는 이유로 가입하지 못함')
                        break;
                    case 'failure_duplicate_email':
                        alert('해당 이메일은 이미 사용중입니다.')
                        break;
                    case 'success':
                        alert('가입성공')
                        break;
                    default:
                        alert('서버가 알 수 없는 응답을 반환함 ')
                }
            }else{
                alert('서버와 통신하지 못함')
            }
        }
    };
    xhr.send(formData);
}

 

자바스크립트 입력한 엔드포인트 /user/register/ 잘 확인하고 컨트롤러에서도 잘 입력해주기 

 

controllers > UserController

@Controller
@RequestMapping(value = "/user")
public class UserController {
    private final UserService userService;

    @Autowired
    public UserController(UserService userService) {
        this.userService = userService;
    }

	
	@RequestMapping(value = "register",
            method = RequestMethod.POST,
            produces = MediaType.APPLICATION_JSON_VALUE)
    @ResponseBody
    public String postRegister(UserEntity user,
                               RegisterContactCodeEntity registerContactCode) throws MessagingException {
        RegisterResult result = this.userService.register(user, registerContactCode);
        JSONObject responseObject = new JSONObject() {{
            put("result", result.name().toLowerCase());
        }};
        return responseObject.toString();
    }
 }

 

이제 서비스, 인터페이스, xml,엔티티,이넘 입력해주기 

 

enums > RegisterResult

public enum RegisterResult {
    FAILURE,
    FAILURE_DUPLICATE_EMAIL,
    FAILURE_DUPLICATE_CONTACT,
    FAILURE_DUPLICATE_NICKNAME,
    SUCCESS
}

 

mappers > UserMapper

@Mapper
public interface UserMapper {
    int insertUser(UserEntity user);
    UserEntity selectUserByEmail(@Param(value="email") String email);
}

 

entities > UserEntity

public class UserEntity {
    private String email;
    private String password;
    private String nickname;
    private String contact;
    private String status;
    private boolean isAdmin;
    private Date registeredAt;
}
*밑에 게터,세터, 해쉬코드 입력해주기

 

services > UserService

@Service
public class UserService {
    private final UserMapper userMapper;
    @Autowired
    public UserService(UserMapper userMapper) {
        this.userMapper = userMapper;
    }
    public RegisterResult register(UserEntity user) {
        if (this.userMapper.selectUserByEmail(user.getEmail()) != null) {
            return RegisterResult.FAILURE_DUPLICATE_EMAIL;
        }
        return this.userMapper.insertUser(user) > 0
                ? RegisterResult.SUCCESS : RegisterResult.FAILURE;
    }
}

insert 가 되는 이유는 retrun this.userMapper.insertUser(user) 에서 연산이 발생되기 때문에 insert 가 발생됨 

그러고 저장이 성공하면 SUCCESS를 컨트롤러로 던져주고 컨트롤러에서는 소문자로 변경해서 자바스크립트로 던져줌 

 

resources > mappers > UserMappers.xml 

    <insert id="insertUser"
            parameterType="com.ohmycouse.teampractice.entities.UserEntity">
        INSERT INTO `omcs`.`users`(`email`)
        VALUE (
            #{email}
            )
    </insert>

 

 

브라우저가서 이메일 적고 다음(submit) 누르면 테이블에 저장됨