Vue_Spring과 연결

스프링에서 서버를 가동한 상태에서 실행
CMD에서 npm install –-save axios   (복붙 X)(axois도 있으니 조심)

 

HW

<template>

  <div>

    <h1>{{ mesg }}</h1>

    <table border="1">

        <tr>

            <th>부서번호</th>

            <th>부서명</th>

            <th>부서부서위치</th>

        </tr>

        <tr v-for="(dept, idx) in list" v-bind:key="idx">

            <td>{{ dept.deptno }}</td>

            <td>{{ dept.dname }}</td>

            <td>{{ dept.loc }}</td>

        </tr>

    </table>

</div>

</template>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

import axios from 'axios';

export default {

    //npm install --save axios cmd창에서 실행

    //spring에서 AngularDeptWeb 실행

    // http://localhost:8016/app/로 요청(Spring을 실행한 창에서 복붙)

    props:{

            mesg:String,

    },

    data:function(){

        return{

            list:[] //부서목록 저장

        }

    },

    created:function(){

        this.deptList();

    },

    methods:{

        deptList:function(){

            //스프링에서 서버 가동 후 브라우저에서 서버 주소 복/붙

            //yarn serve 때 node-module없다는 에러가 발생할 경우

            //npm install --save core-js 실행

            //

            var xxx= this.list; //=>에서 사용하기 위해 따로 저장

            //xxx와 list 는 같은 배열

            axios.get("http://localhost:8016/app/")

            .then(

                (res)=>{

                    console.log("응답 완료");

                    console.log(res);

                    res.data.map(function(ele, idx){    //1개 부서 정보

                        xxx.push(ele);

                    })

                }

            ).catch(

                (error)=>{

                    console.log(error);

                }

            )

            console.log("get 이후의 처리코드");

        }

    }

}

</script>

<style>

.content{

    color:aqua

}

.footer{

    color: blue;

}

</style>