8일차
2024. 6. 26. 18:37ㆍAquarium
오늘은 ajax를 배운 겸 포기했던 아이디 중복 검사를 다시 구현하고 이메일 인증을 구현해보려고 한다.
먼저 아이디 중복 검사
Controller
//아이디 중복 검사
@PostMapping("/checkId")
@ResponseBody
public ResponseEntity<Boolean> checkId(@RequestParam("memberId") String memberId) {
boolean result = false;
// 입력된 memberId가 비어있는지 검사
if (memberId.trim().isEmpty()) {
result = false;
}
else {
// memberId가 비어있지 않으면 서비스 계층에서 중복 여부를 확인
if (memberService.checkId(memberId)) {
// 중복된 아이디인 경우
result = false;
}
else {
// 중복되지 않은 경우
result = true;
}
}
// ResponseEntity를 사용하여 결과를 반환
return ResponseEntity.ok(result);
}
Mapper
//아이디 중복 검사
public int countById(@Param("memberId") String memberId);
Service
//아이디 중복 검사
public boolean checkId(String memberId) {
return memberMapper.countById(memberId) > 0;
}
JavaScript
//아이디 중복검사
function idDupl(){
var id = $("#memberId").val();
var idRegExp = /^[a-z0-9A-Z]{5,50}$/;
if(id === ""){
$("#idDupl").text("아이디를 입력해주세요.").css("color", "red");
return false;
}
else if(!idRegExp.test(id)){
$("#idDupl").text("잘못된 아이디 방식입니다.").css("color", "red");
return false;
}
$.ajax({
url:"/checkId",
type:"post",
dataType:"json",
data:{"memberId" : id},
success: function(result){
if(result == true){
$("#idDupl").text("사용 가능한 아이디입니다.").css("color", "green");
return true;
}
else{
$("#idDupl").text("중복된 아이디입니다.").css("color", "red");
return false;
}
}
});
}
Mapper.xml 파일
<!-- 아이디 중복 검사 -->
<select id="countById" resultType="int" parameterType="java.lang.String">
SELECT COUNT(*) FROM member WHERE memberId = #{memberId}
</select>
이제 테스트를 해보면, 지금 DB에 있는 아이디 목록은 다음과 같다.
회원가입 폼에서 이 아이디 들 중 하나를 입력해보면,
일단 중복 검사는 성공.
다음은 이메일 인증 구현.
가장 먼저 pom.xml에 다음 문구를 추가해준다.
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-mail</artifactId>
</dependency>
그 다음 application.properties에 다음 문구를 추가
spring.mail.host=smtp.gmail.com
spring.mail.port=587
spring.mail.username=qwert850528@gmail.com
spring.mail.password=yfqe hnkt krsr qhjk
spring.mail.properties.mail.smtp.auth=true
spring.mail.properties.mail.smtp.timeout=5000
spring.mail.properties.mail.smtp.starttls.enable=true
이제 본격적으로 코드 입력
Controller
//이메일인증
@ResponseBody
@PostMapping("/mail")
public String mailSend(String mail) {
int number = memberService.sendMail(mail);
String num = "" + number; //랜덤으로 생성된 숫자 가져오기
//내가 전달받은 숫자가 맞는지 확인용으로 가져옴
return num;
}
Service
가장 먼저 @RequiredArgsConstructor를 추가해준다.
@Service
@RequiredArgsConstructor
public class MemberService {
//이메일 인증
private final JavaMailSender JavaMailSender;
private static final String senderEmail = "qwert850528@gmail.com";
private static int number;
public static void makingNumber() {
number = (int)(Math.random()*(1000)) + 9000;
}
public MimeMessage createMail(String mail) {
makingNumber();
MimeMessage message = JavaMailSender.createMimeMessage();
try {
message.setFrom(senderEmail);
message.setRecipients(MimeMessage.RecipientType.TO, mail);
message.setSubject("이메일 인증");
String content = "";
content += "<h3>" + "다음 인증번호를 입력해주세요." + "<h3>";
content += "<h1>" + number + "<h1>";
message.setText(content, "utf-8", "html");
}
catch (MessagingException e) {
e.printStackTrace();
}
return message;
}
마지막 JavaScript
//이메일 인증
function sendEmail(){
if (!$("#memberEmail").val()) {
$("#emailMessage").text("이메일을 입력해주세요.");
return;
}
$("#emailCheck").css("display","block");
$.ajax({
url:"/mail",
type:"post",
dataType:"json",
data:{"mail" : $("#memberEmail").val()},
success: function(data){
$("#emailMessage").text("인증번호가 발송되었습니다.");
$("#Confirm").attr("value",data);
}
});
}
function checkEmail(){
var number1 = $("#checkNumber").val();
var number2 = $("#Confirm").val();
if(number1 == number2){
$("#emailConfirmMessage").text("인증번호가 일치합니다.").css("color", "green");
return true;
}else{
$("#emailConfirmMessage").text("인증번호가 일치하지 않습니다.").css("color", "red");
return false;
}
}
이제 시험해본다.
성공. 오늘 목표했던 기능들을 모두 구현하는데 성공했다.
이제 추가로 회원정보 수정 기능을 넣어보고자 한다.
일단 임시로 로그인 기능을 만들어 두고, 회원정보를 수정해야한다.
mapper.xml
<!-- 임시 로그인 -->
<select id="getLogin" resultType="com.camel.project.dto.Member" parameterType="java.util.Map">
select * from member
where memberId = #{memberId}
and memberPw = #{memberPw}
</select>
<!-- 회원 정보 수정 -->
<update id="updateMember" parameterType="com.camel.project.dto.Member">
UPDATE member SET memberId = #{memberId}, memberPw = #{memberPw},
memberName = #{memberName}, memberEmail = #{memberEmail}, memberPhone = #{memberPhone}
WHERE memberNo = #{memberNo}
</update>
Controller
//임시 로그인
@PostMapping("/login")
public String getLogin(Model model,
@RequestParam("memberId") String memberId,
@RequestParam("memberPw") String memberPw,
HttpSession session) {
Member member = memberService.getLogin(memberId, memberPw);
if(member != null) {
session.setAttribute("loginSession", member);
return "redirect:/";
} else {
model.addAttribute("e", "일치하는 회원 정보가 없습니다.");
model.addAttribute("member", new Member());
return "login";
}
}
//회원 정보 수정 이동
@GetMapping("/MyInfo")
public String myInfoPage(HttpSession session, Model model) {
Member member = (Member) session.getAttribute("loginSession");
if(member == null) {
return "redirect:/";
}
model.addAttribute("updateProfile", member);
return "MyInfo";
}
//회원 정보 수정
@PostMapping("/updateProfile")
public String updateMember(HttpSession session, Member updateMember) {
Member member = (Member) session.getAttribute("loginSession");
if(member == null) {
return "redirect:/";
}
updateMember.setMemberNo(member.getMemberNo());
memberService.updateMember(updateMember);
session.setAttribute("loginSession", updateMember);
return "redirect:/MyInfo";
}
Mapper
//임시 로그인
Member getLogin(@Param("memberId") String memberId,
@Param("memberPw") String memberPw);
//회원 정보 수정
void updateMember(Member member);
Service
//임시 로그인
public Member getLogin(String memberId, String memberPw) {
return memberMapper.getLogin(memberId, memberPw);
}
//회원정보 수정
public void updateMember(Member member) {
memberMapper.updateMember(member);
}
이제 실험해보자. 덤으로 헤더에서 로그인 이후 바뀌는 기능도 시험해보기.
일단 헤더는 기능을 한다.
다음은 정보 수정 페이지
정보 수정 페이지는 회원가입 페이지를 기반으로 만들었다. 정보 수정하기 버튼을 누르면
성공.
오늘 목표치는 초과 달성했고, 내일은 회원 탈퇴 기능을 구현할 예정이다.