반응형
이전글 첨부
[Master_branch/develop_branch] - Vue.js & Flask - 개발환경구축하기
[Master_branch/develop_branch] - Vue.js & Flask - 데이터 주고받기 (axios)
[Master_branch/develop_branch] - Vue.js & Flask - 컴포넌트와 api 연동(1) - backend
Backend에서 보내준 데이터를 frontend에서 보여주자
이전 글에서 네이버 야구경기의 데이터를 긁어오는 과정을 Backend에 적용했다.
이제 Vue에서 Backend와 연동하여 데이터를 보여주는 Component를 작성하겠다.
완성된 소스는 깃허브에 있다 → 링크
Vue.js & Flask - Frontend Vue 컴포넌트 작성
Vue파일 작성 - Dashboard.Vue수정
이전에 다운받았었던 VueAmdin 템플릿에 기본으로 작성이 되어있는 Dashboard.Vue를 수정 하려고한다.
깔끔하게 보여주기 위해서 기존에 들어가 있는 데이터를 모두 삭제한다.
structure
-
구조
. ├── 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
frontend/src/views/Dashboard.vue
<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>Vue Component만들기
views 밑에 MyLittleDiv폴더와 MyLittleDiv.vue 파일을 만들어 줍니다.'
frontend/src/views structure
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.vueMyLittleDiv.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>- axios를 통해서 backend flask api서버와 통신을 한다.
- new_data에 데이터를 담는다
- mothods 의 getNewData()에 통신 후 데이터를 가져온다
- 가져온 데이터를 에서 바인딩 해 준다
작성한 컴포넌트 적용하기
우리가 볼 페이지는 Dashboard이기 때문에 Dashboard.vue에 적용을 해 준다. 혹여나 다른 페이지를 사용하고 싶다면 같은 방법으로 다른 페이지에 적용 시켜 주면 된다.
frontend/views/src/Dashboard.vue
- div를 추가해서 작성한 MyLittleDiv를 추가 해 줄 곳을 만든다
- scripts에서 해당 vue 컴포넌트를 불러 와 준다
- template에 작성한 이름에 맞는 컴포넌트를 삽입 해 준다.
<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>'Old Branch' 카테고리의 다른 글
| Vue.js & Flask - 데이터 주고받기 axios(2) button binding (0) | 2020.08.19 |
|---|---|
| Vue.js & Flask - 데이터 주고받기 (axios) (0) | 2020.08.18 |
| Vue.js & Flask - 컴포넌트와 api 연동(1) - backend (0) | 2020.08.17 |
| [Docker 위의 웹서버] 프로젝트 구상하기 (0) | 2020.08.17 |
| Vue.js & Flask - 개발환경구축하기 (0) | 2020.07.27 |