Vue.js & Flask - 컴포넌트와 api 연동(1) - backend

이전 글 첨부

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

[Master_branch/develop_branch] - Vue.js & Flask - 데이터 주고받기 (axios)

 

Frontend에 전달할 데이터를 생성하자

vue의 Component는 페이지가 될 수도 있고, 페이지를 구성 할 수 있는 요소가 될 수 있다.

이번에는 Component를 생성해서 Dashboard에 나만의 정보를 띄우려고한다.

그 과정 중 이번에는 Backend의 데이터를 전달 할 API를 작성 하도록 하겠다.

완성된 소스는 깃허브에 있다 → 링크

Vue.js & Flask - backend API 생성하기

flask url route

플라스크를 백엔드 서버로 사용하고 있으니, api를 작성 해주어야 한다.

requirements.txt 정리

우리가 설치 할 모듈을 requirements.txt에 정리하도록 하자. Dockerfile이 requirements.txt를 가져와서 모듈을 설치하기 때문에 꼭 필요한 과정이다.

(venv)$ pip install beautifulsoup4 requests
(venv)$ pip freeze > backend/requirements.txt

backend structure

backend
├── app.py
├── back.dev.Dockerfile
├── my_provider
│   ├── __init__.py
│   ├── baseball_scrapper.py
│   └── movie_scrapper.py
├── my_util
│   ├── __init__.py
│   └── my_logger.py
└── requirements.txt

provider작성

provider, 서비스 라고도 하는 모듈을 작성 해 주려고 한다.

위의 모듈에서 baseball_scrapper.py를 작성해서 야구경기 결과를 네이버에서 긁어오려고 한다.

backend/my_provider/baseball_scrapper.py

import requests
from bs4 import BeautifulSoup

# 타겟 URL을 읽어서 HTML를 받아오고,
headers = {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://sports.news.naver.com/kbaseball/record/index.nhn?category=kbo', headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
# soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨
# 이제 코딩을 통해 필요한 부분을 추출하면 된다.
soup = BeautifulSoup(data.text, 'html.parser')

# select를 이용해서, 팀순위 표를 가져오기
ranking_table = soup.select('#regularTeamRecordList_table > tr')
# print(ranking_table)

def get_baseball_rank():

    result_list = []
    for ranking_info in ranking_table:
        data_dict = {}

        img_url = ranking_info.select_one('td.tm > div > img')['src']
        rank = ranking_info.select_one('th > strong').text
        name = ranking_info.select_one('td.tm > div > span').text
        win_rate = ranking_info.select_one('td:nth-child(7) > strong').text
        total_cnt = ranking_info.select_one('td:nth-child(3) > span').text
        total_win = ranking_info.select_one('td:nth-child(4) > span').text
        total_lose = ranking_info.select_one('td:nth-child(5) > span').text
        total_draw = ranking_info.select_one('td:nth-child(6) > span').text
        total_diff = ranking_info.select_one('td:nth-child(8) > span').text
        total_run = ranking_info.select_one('td:nth-child(10) > span').text
        recent_ten_game = ranking_info.select_one('td:nth-child(12) > span').text

        data_dict['img_url'] = img_url
        data_dict['rank'] = rank
        data_dict['name'] = name
        data_dict['win_rate'] = win_rate
        data_dict['total_cnt'] = total_cnt
        data_dict['total_win'] = total_win
        data_dict['total_lose'] = total_lose
        data_dict['total_draw'] = total_draw
        data_dict['total_diff'] = total_diff
        data_dict['total_run'] = total_run
        data_dict['recent_ten_game'] = recent_ten_game

        result_list.append(data_dict)

    return result_list

app.py 수정

backend/app.py

야구경기 결과를 가져오는 get_baseball_rank를 import 해주고 json형식으로 전송 해 준다.

from my_provider.baseball_scrapper import get_baseball_rank

@app.route('/baseball_data',methods=['GET'])
def new_data():
    my_logger.info("baseball_data route!")
    data_list = get_baseball_rank()
    return jsonify(data_list)

이제 그럼 /basball_data로 접속을 하면 관련된 데이터가 출력되는 것을 볼 수 있다.