Backend에서 보내준 데이터를 frontend에서 보여주자
이전 글에서 네이버 야구경기의 데이터를 긁어오는 과정을 Backend에 적용했다.
이제 Vue에서 Backend와 연동하여 데이터를 보여주는 Component를 작성하겠다.
완성된 소스는 깃허브에 있다 → 링크
이전에 다운받았었던 VueAmdin 템플릿에 기본으로 작성이 되어있는 Dashboard.Vue를 수정 하려고한다.
깔끔하게 보여주기 위해서 기존에 들어가 있는 데이터를 모두 삭제한다.
구조
.
├── CHANGELOG.md
├── ISSUES_TEMPLATE.md
├── LICENSE.md
├── README.md
├── babel.config.js
├── front.dev.Dockerfile
├── node_modules
├── package.json
├── public
│ ├── favicon.ico
│ ├── img
│ │ ├── brand
│ │ ├── icons
│ │ └── theme
│ ├── index.html
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── logo.png
│ │ ├── scss
│ │ └── vendor
│ ├── components
│ │ ├── Badge.vue
│ │ ├── BaseAlert.vue
│ │ ├── BaseButton.vue
│ │ ├── BaseCheckbox.vue
│ │ ├── BaseDropdown.vue
│ │ ├── BaseHeader.vue
│ │ ├── BaseInput.vue
│ │ ├── BaseNav.vue
│ │ ├── BasePagination.vue
│ │ ├── BaseProgress.vue
│ │ ├── BaseRadio.vue
│ │ ├── BaseSlider.vue
│ │ ├── BaseSwitch.vue
│ │ ├── BaseTable.vue
│ │ ├── Card.vue
│ │ ├── Charts
│ │ ├── CloseButton.vue
│ │ ├── Modal.vue
│ │ ├── NavbarToggleButton.vue
│ │ ├── NotificationPlugin
│ │ ├── SidebarPlugin
│ │ ├── StatsCard.vue
│ │ ├── Tabs
│ │ └── stringUtils.js
│ ├── directives
│ │ └── click-ouside.js
│ ├── layout
│ │ ├── AuthLayout.vue
│ │ ├── Content.vue
│ │ ├── ContentFooter.vue
│ │ ├── DashboardLayout.vue
│ │ └── DashboardNavbar.vue
│ ├── main.js
│ ├── plugins
│ │ ├── argon-dashboard.js
│ │ ├── globalComponents.js
│ │ └── globalDirectives.js
│ ├── registerServiceWorker.js
│ ├── router.js
│ └── views
│ ├── Dashboard
│ ├── Dashboard.vue
│ ├── Icons.vue
│ ├── Login.vue
│ ├── Maps.vue
│ ├── MyLittleDiv
│ ├── Register.vue
│ ├── Tables
│ ├── Tables.vue
│ └── UserProfile.vue
├── tree.txt
├── vue.config.js
└── yarn.lock
<template>
<div>
<base-header type="gradient-success" class="pb-6 pb-8 pt-5 pt-md-8">
<!-- Card stats -->
</base-header>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
my_data: '',
};
},
methods: {
},
created() {
this.getMyData();
},
mounted() {
}
};
</script>
<style></style>
views 밑에 MyLittleDiv폴더와 MyLittleDiv.vue 파일을 만들어 줍니다.'
frontend/src/views
├── Dashboard
│ ├── PageVisitsTable.vue
│ └── SocialTrafficTable.vue
├── Dashboard.vue
├── Icons.vue
├── Login.vue
├── Maps.vue
**├── MyLittleDiv
│ └── MyLittleDiv.vue**
├── Register.vue
├── Tables
│ └── ProjectsTable.vue
├── Tables.vue
└── UserProfile.vue
frontend/src/vies/MyLittleDiv/MyLittleDiv.vue 를 작성 해 준다
<template>
<div class="MyLittleDiv">
<div class="card-header border-0">
<div class="row align-items-center">
<div class="col">
<h3 class="mb-0">Korea BaseBall</h3>
</div>
</div>
</div>
<div class="text-md-center">
<div class="table-responsive">
<base-table thead-classes="thead-light"
:data="new_data">
<template slot="columns">
<th>순위</th>
<th>팀</th>
<th>경기수</th>
<th>승</th>
<th>패</th>
<th>무</th>
<th>승률</th>
<th>게임차</th>
<th>출루율</th>
<th>최근10경기</th>
</template>
<template slot-scope="{row}">
<th scope="row">
{{row.rank}} 위
</th>
<td>
<img :src='row.img_url'> {{row.name}}
</td>
<td>
{{row.total_cnt}}
</td>
<td>
{{row.total_win}}
</td>
<td>
{{row.total_lose}}
</td>
<td>
{{row.total_draw}}
</td>
<td>
{{row.win_rate}}
</td>
<td>
{{row.total_diff}}
</td>
<td>
{{row.total_run}}
</td>
<td>
{{row.recent_ten_game}}
</td>
</template>
</base-table>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: 'my-little-div',
data() {
return {
new_data: [],
}
},
methods: {
getNewData() {
let path = "http://" + window.location.hostname + ":5000/baseball_data";
axios.get(path).then((res) => {
this.new_data = res.data;
}).catch((error) => {
console.error(error);
});
},
},
created() {
this.getNewData();
}
};
</script>
우리가 볼 페이지는 Dashboard이기 때문에 Dashboard.vue에 적용을 해 준다. 혹여나 다른 페이지를 사용하고 싶다면 같은 방법으로 다른 페이지에 적용 시켜 주면 된다.
<template>
<div>
<base-header type="gradient-success" class="pb-6 pb-8 pt-5 pt-md-8">
<!-- Card stats -->
</base-header>
<!-- my code -->
<div class="row mt-5">
<div class="col-md-12">
<my-little-div></my-little-div>
</div>
</div>
</div>
</template>
<script>
// Charts
// axios
import axios from 'axios';
// my code
import MyLittleDiv from "./MyLittleDiv/MyLittleDiv";
export default {
components: {
// my componenets
MyLittleDiv,
},
data() {
return {
my_data: '',
};
},
methods: {
},
created() {
},
mounted() {
}
};
</script>
<style></style>