728x90
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) 누르면 테이블에 저장됨
728x90
'SpringBoot' 카테고리의 다른 글
주소확인 (0) | 2023.09.22 |
---|---|
프로젝트 생성 (0) | 2023.09.22 |
배포 (0) | 2023.08.22 |
[SpringBoot] Httpsession (0) | 2023.07.06 |
[SpringBoot] Html 자체 폼 전달 -> Controller / 검색기능구현 (0) | 2023.06.28 |