Old Branch
Vue.js & Flask - 컴포넌트와 api 연동(1) - backend
woolbro
2020. 8. 17. 16:53
반응형
이전 글 첨부
[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로 접속을 하면 관련된 데이터가 출력되는 것을 볼 수 있다.