파이썬 웹 프레임워크 Flask
Flask 사용법
html에서 파이썬을 사용하기 위해서 Flask라는 웹 프레임워크를 설치해야한다. 터미널에서
pip install flask
명령어로 Flask를 설치할 수 있다. Flask는 Jinja2라는 템플릿 엔진을 기반으로 하고 있다. 다음의 간단한 예제로 Flask의 동작 원리를 파악해 보자.
from flask import Flask app = Flask(__name__) @app.route("/hello") def hello(): return "Hello World!" @app.route("/bye") def bye(): return "Bye!!" if __name__ == "__main__": app.run(host="0.0.0.0",port=3500 ) #0.0.0.0 :
1.Flask를 import한다.
from flask import Flask
Flask를 사용하기 위해서는 라이브러리를 import 해야한다. 만약 import가 되지 않는다면 설치가 되지 않았거나 환경변수가 제대로 잡히지 않은 것이니 확인하길 바란다.
2.Flask 객체를 생성한다.
app = Flask(__name__)
Flask 객체를 생성하여 app이라는 변수에 담아준다.
3.Flask 객체의 경로 설정한다.
@app.route("/hello")
4.’/hello’ 경로에 사용할 함수를 만들어준다.
def hello(): return "Hello World!"
5.조건 설정 후 서버를 실행시킨다.
if __name__ == "__main__": app.run(host="0.0.0.0",port=3500 )
‘__name__’이면 3500번 포트에서 모든 IP를 받아 서버를 실행하라.
Flask 예제
파이썬 웹 프레임워크 구조
static 폴더 : html, css 등의 동적인 파일
templates 폴더 : 템플릿 엔진 진저2가 인식할 수 있는 파일
router.py : controller
하단의 언어 모드 선택에서 Django HTML을 일반 HTML로 변경하면 자동 완성 기능을 사용할 수 있습니다. html 파일의 경우 ‘ ! ‘을 적고 enter 키를 누르면 html 구조가 자동으로 생성됩니다.
영화 데이터(json)를 Flask를 사용하여 웹에 바인딩하기
movie_api.py
: 영화 데이터를 불러오기 위한 파일.
router.py
: [Controller]요청한 뷰를 분기하기 위한 제어 파일.
index.html
: 데이터 바인딩하기 위한 파일
import requests def callMovieApi(page=1): url = f''' https://yts.mx/api/v2/list_movies.json?sort_by=rating&page_number={page}&limit=20 ''' response = requests.get(url) responseDict = response.json() # 딕셔너리 타입으로 변환 movies = responseDict["data"]["movies"] # movies : List타입 return movies
from flask import Flask from flask import render_template #파일을 리턴하기 위한 라이브러리 import movie_api as ma app = Flask(__name__) @app.route("/") def index(): return render_template("index.html",movies=ma.callMovieApi()) #파이썬에 html로 만들어도 됨 prifix가 잡혀있다 suffix는 적어줘야함 if __name__ == "__main__": app.run(debug=True) #debug=True : 리로드 ,서버 재시작할 필요없음
<!DOCTYPE html> <html lang="en"> <head> <title>영화리스트</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <style> .m_box { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; } .m_tm_20 { margin-top: 20px; } </style> </head> <body> <div class="container m_box m_tm_20"> {% for movie in movies%} <!-- 영화 카드 시작 --> <div class="card"> <img class="card-img-top" src="{{movie.medium_cover_image}}" alt="Card image" style="width:100%"> <div class="card-body"> <h4 class="card-title">{{movie.title}}</h4> <p class="card-text">{{movie.rating}}</p> <a href="#" class="btn btn-primary">상세보기</a> </div> </div> <!-- 영화 카드 끝 --> {% endfor %} </div> </body> </html>
결과화면
Class를 만들어서 필요한 데이터만 사용하기
from movie_model import MovieModel import requests def callMovieApi(page=1): url = f''' https://yts.mx/api/v2/list_movies.json?sort_by=rating&page_number={page}&limit=20 ''' response = requests.get(url) responseDict = response.json() # 딕셔너리 타입으로 변환 movies = responseDict["data"]["movies"] # movies : List타입 return convert_model(movies) def convert_model(movies): list=[] for movie in movies: movie_model = MovieModel(movie["title"], movie["rating"], movie["medium_cover_image"]) list.append(movie_model) print(list) return list
from flask import Flask from flask.templating import render_template #파일을 리턴하기 위한 라이브러리 import movie_api as ma app = Flask(__name__) @app.route("/") def index(): return render_template("index.html", movies=ma.callMovieApi()) #파이썬에 html로 만들어도 됨 prifix가 잡혀있다 suffix는 적어줘야함 if __name__ == "__main__": app.run(debug=True) #debug=True : 리로드 ,서버 재시작할 필요없음
class MovieModel: def __init__(self, title, rating, medium_cover_image): self.title = title self.rating = rating self.medium_cover_image = medium_cover_image
<!DOCTYPE html> <html lang="en"> <head> <title>영화리스트</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <style> .m_box { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; } .m_tm_20 { margin-top: 20px; } </style> </head> <body> <div class="container m_box m_tm_20"> {% for movie in movies %} <!-- 영화 카드 시작 --> <div class="card"> <img class="card-img-top" src="{{movie.medium_cover_image}}" alt="Card image" style="width:100%"> <div class="card-body"> <h4 class="card-title">{{movie.title}}</h4> <p class="card-text">{{movie.rating}}</p> <a href="#" class="btn btn-primary">상세보기</a> </div> </div> <!-- 영화 카드 끝 --> {% endfor %} </div> </body> </html>