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 --buildflask의 주소로 데이터 받아 올 수 있는 환경 구성하기
데이터의 구성과 추적을 위해서 도커에 올라가있는 플라스크 서버에 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.vueaxios 활용하여 데이터 주고받기
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/ 에 해당하는 텍스트로 데이터가 만들어 진 것을 확인 할 수있다.
다음번에는 페이지 하나를 따로 만들어 봐야겠다.