Springboot+Vue.js 회원서비스를 만들자!(2) 회원가입

1. 회원가입

http://localhost:3030/joinPage

프런트 서버

html

vue의 for문 한번 쓰고 싶어서 해봤다
<div v-for="text in this.textarray" :key="text">
npm으로 카카오우편번호서비스를 받은 후 연동
<vue-daum-postcode @complete="onComplete" style="overflow:scroll; width:300px; height:300px;"/>
이분 글을 추천한다
https://github.com/wan2land/vue-daum-postcode/tree/0.x-vue2

GitHub - wan2land/vue-daum-postcode: ✉️ 다음 우편번호 서비스 Componet for Vue 2 & 3.

그 뒤 결과값을 어떻게 받아야 하나..
고민하다가 이게 될까 하고 해 봤는데 됐다
놀랍게도
@complete="onComplete"걸어주면
완료되면 oncomplete라는 함수로 결과를 파라미터로 넣어준다
진짜 놀랬다

css

js

oncomplete함수에 저렇게 파라미터를 넣어 놓으면 된다

js

휴대폰 전송 요청 함수

js

회원가입 요청 함수


백엔드 서버
restcontroller

restcontroller.java

인증번호 요청
@RequestMapping(value = "/confrim/**",method = RequestMethod.POST)
인증번호 확인
@RequestMapping(value = "/confrim/**",method = RequestMethod.PUT)

sendService

sendService.java

인증번호 요청
public JSONObject sendNum(trySendSmsDto trySendSmsDto) {
인증번호 검사
public JSONObject checkRandNum(tryConfrimRandNumDto tryConfrimRandNumDto) {
요청 종류 분리
if(trySendSmsDto.getScope().equals("phone")){
if(unit.equals("phone")){

phoneService/EmailService
둘이 매우 흡사하다
그러므로 phone서비스 기준으로 봐보자

phoneService.java

회원가입이 되어있어야 하는 종류인지
아니면 그냥 인증 종류인지 판별
if(sendSmsDto.getDetail().equals("confrim")){
요청내역이 있는지 없는지 판별
if(Optional.ofNullable(getRequestAndusersInter.getPhone_num()).orElseGet(()->"emthy").equals("emthy")){
발송 전 유효성 검사
String result=confrimService.sendRandNum(sendRandNumInter);
결과로 판별
if(result.equals(Stringenums.first.getString())){
전송
sendMessage.sendMessege(sendRandNumInter.getEmailOrPhone(),sendRandNumInter.getRandNum());
이메일 서비스도 살짝 봐보자

emailService.java

회원가입 시 이메일인증도 할까 했는데 귀찮아서 패스...

phoneService.java

phoneService.java

인증번호 확인 함수
public JSONObject checkNum(tryConfrimRandNumDto tryConfrimRandNumDto) {
후속 행동이 있나 검사
private JSONObject ifFind(String scope,String phone) {
예를 들어 00 찾기였더라 던 지

이메일도 마찬가지이다
if때 find면 휴대폰은 이메일을 찾아주고
이메일이라면 비밀번호 변경 페이지를 보내준다
차후에 봐보자!

dao

phoneDao.java

confrimService

confrimService.java

발송 조건이 안 맞다면 예외 발생
utillService.throwRuntimeEX(new RuntimeException(),"하루 최대 요청 횟수는 "+maxReuqest+"입니다 24시간뒤에 시도해주세요", "sendRandNum");
그 외 함수도 있긴 한데 대부분
변수가 서로 일치하는지 판단하는 심플한 함수이다!

restcontroller

restcontroller.java

userService

userService.java

테스트를 다했는데
레거시 공부하느라 하나하나 찍진 못했다

회원가입 성공!

mysql