Vue.js Component & Flask Backend 연동(2) - frontend

ba93love·2020년 7월 28일
0
post-thumbnail

Vue.js Component & Flask Backend 연동(2) - frontend

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.vue

MyLittleDiv.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>

profile
개발을 개발개발

0개의 댓글