vue.js와 springboot AJAX로 전송하기

spring에서 @RestController로 JSON을 받았고 AJAX통신으로 vue.js에서 받을 예정이다. 

1. vue.js에서 npm -save install axios 설치 -->통신담당객체
2. package에 JSON에 axios가 추가된걸 확인할 수 있다. 
3. 서버와 통신하는 vue객체 만들기 : Service라고 되어있다. 
   1. service폴더 생성하기
   2. BookService 파일 생성
4. axios를 import한다
   1. import axios from "axios";
5. axios를 초기화하기 그리고 반복적인 코딩은 싫으니까 http 상수 객체에 담아둔다.
   1. const http = axios.create({ //초기화하고 담는다.
      baseURL: 'http://localhost:8081/api', //기본적으로 받아올 경로
      withCredentials:false,//내인증은 안보낸다. 
      headers :{
      Accept:'application/json',//응답컨텐츠 타입
      'Content-Type:'appliction/json' //요청컨텐츠 타입
      }
      });
   2. export default{ //내보내다.
      getAllBook(){ //이메소드를 호출하면 return값 요청
      return http.get('/book');//get방식으로 book경로를 호출했다. 
      //총 http://localhost:8081/api/book으로호출된다. 응답컨텐츠 타입처럼
      }
      }

   3. 

      list가받아서 처리를 해야하는데 부모는 정보를 보낼 수 있고, 자식은 이벤트 정보만 보낼 수 있다. 
   4. 부모에게 가서 정보를 뿌려야한다는 말이다. list에게 보내기 위해서 
   5. 보낸다.
      1. 이 컴포넌트에서 사용하는 공통기능(서비스)가 구현된 객체를 import한다. 
         import BookService from '../service/BookService';
      2. export defult{} //내부에 적고 return해줘야 보낼 수 있다. 
      3. export defult{
         name:"BookList" //name은 이 컴포넌트의 이름을 지정한다. 
         components: //이 컴포넌트가 사용하는 자식 컴포넌트를 지정한다. 
         {serchForm, List, Pagination}, //자식들
         data(){ //바로 연결지어서 data()작성한다. 자식에게 전달하기 위해서 책정보를 전달한다.
         return {
         books:[]//담을 변수를 지정 []-> 배열
         },//return뒤에 바로 적는다.
         created(){//서버와 통신해서 컴포넌트의 초기 데이터를 가져오는 작업을 수행하기 적절한 라이프 사이클 메소드다. 
         //vue컴포넌트의 라이프스타일 메소드이다. vue컴포넌트 객체가 생성되었고, data에 접근할 수 있지만, 아직 화면에 뿌려지지 않았다. 
         BookService.getAllBooks() //http연결 메소드 실행
         .then(response =>this.books = response.data)
         //response function을 실행해서 response.data에 객체가 저장 그리고 this.books에 저장한다.
         //위에 적은 담을 변수 지정한 부분
         .catch(error => console.log(error))//에러시 console에 뜨게
         .then(() => console.log('서버로 부터 응답이 왔다.')) //무조건 한번실행되는 then메소드
         }
         }
         }
   6. 보내준다. 
      1. template으로 간다 
      2. 해당 엘리먼트에 <List /> -> <List:bookList="books">
         1. bookList="books"
            1. :booklist는 list컴포넌트(자식컴포넌트)에게 부모컴포넌트가 전달해줄 데이터를 전달받은 props의 이름이다. 
            2. books는 이 컴포넌트가 자식 컴포넌트에게 전달할 데이터가 저장된 프로퍼티이다. 
            3. property -> props로 전달한다. 
   7. 자식 컴포넌트에서 꺼내준다. 
      1. scrpit에서 먼저 꺼내준다. 
      2. export default{
         name:"List"//해당 컴포넌트이름
         props:["bookList"]//부모에서 담았던 이름으로 꺼내준다.
         }
      3. 해당 tr에서 v-for로 꺼내준다. 
         1. <tr v-for="book in bookList" :key="book.no">
            데이터를 사용할때는 쌍괄호를 사용한다. 

 

axios

• axios는 서버와 HTTP통신을 지원하는 라이브러리이다. 
• axios의 주요 API
  • axios.get(url)  //get방식 요청을 서버로 보낸다.  데이터 조회
  • axios.post(url, data)//post방식 요청을 서버로 보낸다. 데이터 추가
  • axios.put(url,data) //put방식 요청을 서버로 보낸다. 데이터 변경
  • axios.delete(url)  //delete의 방식요청을 서버로 보낸다. 데이터 삭제
  • 위의 메소드를 실행하면 .then(콜백) .catch(콜백) .then(콜백) 메소드를 포함하고 있는 객체가 반환된다.
        메소드 체이닝이 되는 것이다.
  • .then(function(response){...})
        .catch(function(error){...})
        .then(function()) 메소드를 포함하고 있는 (Promise 객체)가 반환된다.
• axios의 요청 처리하기 
  •  axios.get(url) //url로 요청하면 then을 사용할 수 있다.
        .then(function(response){
            //성공적인 응답 핸들링
        })
        .catch(function(error) {
            //에러 응답 핸들링
        })
        .then(function(){
            //항상 실행되는 영역
        })
  • response
        {
            data: {},       //서버가 제공하는 응답데이터
            status: 200,    //HTTP 응답코드  //우리는 데이터밖에 신경쓰지 않는다.
            statusText:"OK",//HTTP 상태 메세지
            headers:{},     //응답 헤더 정보
            config:{},      //요청할 때 axois가 사용한 구성정보
            request:{}      //이번 응답에 대한 요청정보, web에서 XMLHttpRequest다.
        }

 springboot에서 @CrossOrigin(origins= "*")을 붙이는 이유

교차 출처 처리 리소스 공유(Cross Origin resource sharing : CORS) 이다. 해킹을 막기 위해서이다. 

웹상의 리소스(자원, 데이터)를 최초 자원이 된 서비스된 도메인(출처, origin)밖의 다른 도메인(출처, origin)으로부터 요청을 허용할 수 있는 것이다. resource제공측에서 허용을 해줘야한다. 

Controller에서 설정을 해야 허용이 된다.