[VueJS] Proxy

Vue proxy

vue.config.js

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ]
  ,devServer: {
    host: 'localhost',
        port: 8000,    <- vue project port
        https: false,
        hotOnly: true,
        proxy: { // proxyTable 설정
            '연결될 이름(ex. /sfc)': {
                target: 'http://localhost:8080/',
                ws: false,
                changeOrigin: true
       }
    }
  }
}

해당 타겟이 되어지는 것을 eGovFramework인 sfc 프로젝트로 연결하였습니다.
sfc 프로젝트는 사내 프로젝트이며 추가적인 정보는 작성을 하지 않겠습니다.

타겟이 된 :8080 PORT를 가진 url을 다음과 같이 변경하여 재요청되어집니다.

host명 + 포트 + 연결될 이름
ex. localhost:8000/sfc 로 재요청 되어집니다.

해당 재요청 기능은 axios를 이용한 get/post를 사용했을 때, 힘을 발휘할 수 있습니다.
이것이 Frontend / Backend 서버의 분리했을 때 REST API를 이용한 통신을 보여줍니다.

Vue Axios

설명은 Vue-axios 링크를 확인하시면 됩니다.

<script>
import axios from 'axios';

export default {
     data () {
      return {
        dataList: "",
        textP: "기존 글 입니다.",
        headers: [
          {
            text: '제품번호',
            align: 'start',
            sortable: false,
            value: 'prductNo',
          },
          { text: '제품명', value: 'prductNm' },
          { text: '구분', value: 'prductSeNm' },
          { text: 'rox 여부', value: 'roxInclsAt' },
          { text: 'mix 여부', value: 'msmixInclasAt' },
          { text: '가격', value: 'prductPc' },
        ],
        desserts: [],
        }
    },
    created(){
        axios.post('/sfc/prduct/selectPrductList.json').then(res => {
            var data = res.data.data;
            console.log(data)
            this.desserts = data
        })
    }
}
</script>

저는 created()라는 프로젝트가 시작될 때 가져오게 하였습니다.
앞 선의 /sfc가 'localhost:8080/sfc'와 동일하게 됩니다.

res로 요청받은 데이터를 확인할 수 있습니다. res는 JAVA에서 retrun을 JSON 형태의 데이터로 넘겨주었습니다.

다음과 같이 Vuetify를 이용한 테이블에 데이터를 적용시켜 주었습니다.