10. 회원가입 / 로그인기능 만들기(2)

Form을 전부 만들었다.

 

이제 백단에서 회원가입 API를 만들어 프론트딴과 통신을 해 회원가입을 구현하자.

 

알다시피 axios를 사용할것이다.

 

1.axios를 설치한다.

npm install --save axios

Vue 컴포넌트의 script단에서 axios를 import한다.

import axios from 'axios';

 

2. 서버단에서 Controller를 생성한다.(테스트용)

 

3. 회원가입 버튼에 event를 붙인다.

 

4.테스트

성공! 이제 Controller딴과 Service, Repository, VO등 작성한다.

 

Controller

package com.project.api.signin;

import com.project.mybatis.vo.SignInVO;
import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.*;

@RestController
@RequiredArgsConstructor
@RequestMapping("/api")
public class SignInController {
    private final SignInService signInService;

    @PostMapping("/signIn")
    @ResponseBody
    public String signIn(@RequestBody SignInVO signInVO){
        if(signInService.signIn(signInVO)){
            return "success";
        }else{
            return "fail";
        }
    }
}

Service

package com.project.api.signin;

import com.project.mybatis.vo.SignInVO;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;

@Service
@RequiredArgsConstructor
public class SignInService {

    private final SignInRepository signInRepository;

    public boolean signIn(SignInVO signInVO){
        return signInRepository.signIn(signInVO);
    }
}

Repository

package com.project.api.signin;

import com.project.mybatis.vo.SignInVO;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;

@Repository
@Mapper
public interface SignInRepository {
    public boolean signIn(SignInVO signInVO);
}

signin.xml(쿼리)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTO Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.project.api.signin.SignInRepository">
    <insert id="signIn" parameterType="com.project.mybatis.vo.SignInVO">
        INSERT INTO USER VALUES(NEXTVAL(project.USERSEQ), #{email}, #{name}, #{password}, CONCAT(#{phone1}, '-', #{phone2}, '-', #{phone3}), #{zipcode}, #{address1}, #{address2})
    </insert>
</mapper>

 

성공!

 

우선 INSERT가 정상적으로 수행되는것을 확인했다.

다음글은 Validation Check, Error관리, 화면딴 수정과 같은 자잘한 문제들을 정리할 예정이다.