Vue.js & Flask - 데이터 주고받기 (axios)

이전글 첨부

[Master_branch/develop_branch] - Vue.js & Flask - 개발환경구축하기

[Master_branch/develop_branch] - Vue.js & Flask - 컴포넌트와 api 연동(1) - backend

[Master_branch/develop_branch] - Vue.js & Flask - 컴포넌트와 api 연동(2) - frontend

 

 

Dockerfile과 docker-compose를 사용해서 작성 된 frontend / backend 를 올렸다.

이제 frontend ←→ backend가 서로 통신이 되는지, 데이터를 주고 받을 수 있는지 확인 해 보려고 한다.

 

소스 파일은 여기에 있다 -->Github Soruce

docker-compose 개발환경 시작

이전에 작성 했었었던 docker-compose로 세팅한 개발환경을 실행 해 주어서 실시간으로 변경 되는 것을 보려고 한다.

$ docker-compsoe up --build

flask의 주소로 데이터 받아 올 수 있는 환경 구성하기

데이터의 구성과 추적을 위해서 도커에 올라가있는 플라스크 서버에 logging 남기는 설정을 해 주도록 해야겠다.

.
├── app.py
├── back.dev.Dockerfile
├── my_util
│   ├── __init__.py
│   └── my_logger.py
└── requirements.txt

위의 폴더 구조처럼, my_util 패키지를 만들어 주고, init.py 와 my_logger.py를 작성 했다

# backend/my_util/my_logger.py

import logging

"""
    Set Default Formatter
"""
formatter = logging.Formatter('%(asctime)s - %(name)s - %(levelname)s - %(message)s', datefmt='%Y-%m-%d:%H:%M:%S')

"""
    Set My Loogger
"""

my_logger = logging.getLogger('MY_FLASK_LOG')
my_logger.setLevel(logging.DEBUG)
stream_log = logging.StreamHandler()
stream_log.setFormatter(formatter)
my_logger.addHandler(stream_log)
# 로그 disabled
# my_logger.disabled = True

이제 작성을 했으니 작성 했거나, 작성 할 route에 적용을 시켜 주도록 해야겠다

app.py에 모든 것을 넣어 주었으니 작성한 my_logger도 넣어주어야겠다

from flask import Flask, jsonify
from flask_cors import CORS

from my_util.my_logger import my_logger

import os

# instantiate the app
app = Flask(__name__)

# enable CORS
CORS(app, resources={r'/*': {'origins': '*'}})

# sanity check route
@app.route('/', methods=['GET'])
def test_router():
    my_logger.info("hello this is root url!")
    return jsonify('This is Docker Test developments Server!')

@app.route('/health_check', methods=['GET'])
def health_check():
    my_logger.info("health check route url!")
    return jsonify('good')

if __name__ == '__main__':
    app.run(host='0.0.0.0',port=os.getenv('FLASK_RUN_PORT'),debug=os.getenv('FLASK_DEBUG'))

수정이 되었으니

• localhost:5000/health_check로 접속을 해보면 화면에는 'good'이 출력이 되고, docker log에는 작성 해 준 텍스트가 나올 것이다.

    my-back     |  * Detected change in '/www/app.py', reloading
    my-back     |  * Restarting with stat
    my-back     |  * Debugger is active!
    my-back     |  * Debugger PIN: 185-026-892
    my-back     | 2020-07-27:02:13:08 - MY_FLASK_LOG - INFO - health check route url!
    my-back     | 172.22.0.1 - - [27/Jul/2020 02:13:08] "GET /health_check HTTP/1.1" 200 -

Vue에서 flask서버로 요청을 보내 응답받기

위의 flask 서버에서 localhost:5000/ 과 localhost:5000/health_check 두 개를 활용 해 보도록 하겠다.

front폴더의 src 아래에 있는 Dashboard.vue를 수정 하려고 한다.

• 연동되는 vue의 페이지를 보기 위해서는 router.js를 보는것이 좋은데, 가장 기본적으로 연동되어있는 페이지가 Dashboard.vue 이기 때문에 수정 해 보려고 한다.

frond/src
├── App.vue
├── assets
├── components
├── directives
├── layout
├── main.js
├── plugins
├── registerServiceWorker.js
├── router.js
└── views
    ├── Dashboard
    **├── Dashboard.vue**
    ├── Icons.vue
    ├── Login.vue
    ├── Maps.vue
    ├── Register.vue
    ├── Tables
    ├── Tables.vue
    └── UserProfile.vue

axios 활용하여 데이터 주고받기

vue에서 데이터를 주고받을 방법으로 axios를 사용하려고 한다.

docker파일을 내려주고, 아래의 명령어로 axios를 다운받은 후 다시 실행 시켜준다

$ yarn add axios #front 폴더에서
$ docker-compose up --build #front폴더 밖에서

이제 그럼 axios를 사용 가능하다.

Dashboard.vue를 수정 해 주도록 하겠다.

front/src/views/Dashboard.vue

// axios
import axios from 'axios';

...
data() {
    return {
        my_data: '',
        ...
    }
},
methods:{
    ...
    getMyData(){
      let path = "http://" + window.location.hostname + ":5000/";
      axios.get(path).then((res) => {
          this.my_data = res.data;
      }).catch((error) => {
          console.error(error);
      });
  },
    ...
},
created() {
    this.getMyData();
},

• axios를 사용하기 위해서 axios import
• method : 사용할 함수를 만들어 준다. 이 때 플라스크서버에 요청 → axios
• created : 어떤 함수를 실행 시킬 것인지

그리고 이제 getMyData() 를 통해 가져온 데이터를 my_data에 저장을 해 주었으니, 사용을 해 주어야 한다. 나는 맨 위에 구분 할 수 있는 텍스트와 버튼을 만들어 주고, my_data를 출력 해 주었다.

<div class="row">
    <div class="col-md-12">
        <h1>My Test</h1>
        <button type="button" class="btn btn-success btn-sm">{{my_data}}</button>
        <hr>
            ...
            ...
    </div>
</div>

화면을 확인 해보면, 가장 위에 localhost:5000/ 에 해당하는 텍스트로 데이터가 만들어 진 것을 확인 할 수있다.

다음번에는 페이지 하나를 따로 만들어 봐야겠다.