리엑트+스프링부트(2) axios 컨트롤러 데이터 전달

 

저번시간에는 디비로부터 데이터를 끌어와 리엑트로 보여주는 것을 해봤다

오늘은 뷰에서 직접 파라미터를 받아 서버로 데이터를 보내보자 

 

별거 없었다 또 괜히 2일동안 고민한거 같다. 

 

 

시작해보자 

 

const [id, Setid] = useState();
const [title, SetTitle] = useState("");

우선 아이디와 콘텐트 이 2개를 usestate에 빈값으로 남겨 놓자 

그리고 메인컴포넌트에서 

 

    <input  onChange={(e)=>{
      Setid(e.target.value);
    }}/>
       <input onChange={(e)=>{
      SetTitle(e.target.value);
    }}/>

이렇게 인풋값을 2개를 만들어준다.

하나는 숫자가 들어갈 인풋 다른 하나는 숫자든 상관없다.

 

이제 전송버튼을 살펴보자

 

    <button
      onClick={
        ()=>{
          axios.get('/board/insert',{
            params:{
              id : id,
              title : title
            }
          }).catch(function(){
            console.log('실패함')
          })
        }}
    >전송</button>

우선 온클릭이벤트로 값을 만들어 준다. 

그 후로 axios로 보낼 url값 즉 파라미터에 getMapping값을 적어준뒤 뒤에 params에는

오브젝트형식으로 위에 변수를 적어준다. 

 

 

    @GetMapping("/board/insert")
    public void boardinsert(@RequestParam Integer id, @RequestParam String title){
        System.out.println(id);
        System.out.println(title);
    }
    }

 

그리고 GetMapping으로 위에 파라미터를 받아준다.

 

이제 테스트를 해보자

위에 처럼 적고 전송버튼을 누르면

 

스프링부트로 전달이 아주 잘됬다.

이제 이걸로 간단한 회원가입페이지를 만들어보자