vue - api 랑 통신하기

---

vue 에서 api 호출하는 법 정리

지금 내가 사용하는 방법은 vue 와 java 를 분리해서 서버를 띄어 놓은 후에 서로 통신하는 방법이다.

 

✅ Controller 를 켜주고 vue 도 서버를 켜주자

 

 

 

✅ 아래와 같이 폴더구조가 되어 있다.

 

 

✅ api 아래에는 axios 가 정의되어 있을 것이다.

 

 

✅  views 에는 vue 파일이 정의 되어 있을 것이고

 

 

✅  어떤 버튼 클릭 이벤트가 발생했을 때 호출하는 것으로 예시를 들어보자.

 

<el-button @click="Bonsoo()"> </el-button>

 

✅  @/api/binsoo js 파일에  Binsootest1, Binsootest2 가 존재 해야 해.

 

import { Binsootest1, Binsootest2 } from '@/api/binsoo'


methods: { 
    async Binsoo (){
    
      await Binsootest1().then(( res )=>{ 
        this.BinsooList1 = res.data.response_data 
      }).catch((err)=>{
        console.log(err)
      })

      await Binsootest2( this.listQuery ).then(( res )=>{ 
        this.BinsooList2 = res.data.response_data 
      }).catch((err)=>{
        console.log(err)
      })
 }

 

✅  @/api/binsoo js파일 에는 아래처럼 정의 되어 있구

 

import request from '@/utils/request'


export function BinsooTest1(param){ 
    return request({
        url: '/api/binsoo-test1'
        , method: 'get'
        , params: { 
            mmiSeq          : param.mmiSeq        || 0
            , tdiSeq        : param.tdiSeq        || 0
        }
    }) 
} 

 
export function BinsooTest2(param){
    return request({
        url: '/api/binsoo-test2'
        , method: 'get'
        , params: {
            mmiSeq: param.mmiSeq || 0
        }
    })
}

 

✅  그럼 아래와 같이 매핑된 api와 연동 된다.

 

@GetMapping(value = "/api/binsoo-test1")


@GetMapping(value = "/api/binsoo-test2")

---

✅  배경화면에서 구글 바로가기를 하나 만들어주고 이 바로가기는 보안을 없앤다

 

 

✅  대상을 바꿔주자 요로케

 

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:\chrome"

 

---