단순 코드 기록/Vue

Vue_Spring과 연결

일일일코_장민기 2024. 3. 11. 15:20
728x90
스프링에서 서버를 가동한 상태에서 실행
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>
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>