[Flask] 초간단! HTML과 Flask 통신 - 1
2024. 1. 29. 16:48ㆍBE/Flask
728x90
본 포스팅에서는 간단한 예시를 통해 HTML과 파이썬 Flask 백엔드 서버간의 연동에 대해 알아보겠습니다.
먼저 Flask 서버에 대해 간단하게 알아보겠습니다. Flask 서버는 Python으로 작성된 웹 프레임워크로, 가볍고 간결한 설계로 구성되어 있습니다. 주로 작은 및 중간 규모의 웹 애플리케이션을 빠르게 개발하고 구축하는 데 사용됩니다. Flask는 Jinja2 템플릿 엔진과 Werkzeug 웹 서버를 포함하고 있습니다.
아래는 Flask 서버의 홈페이지에서 랜덤 로또 번호와 고정된 로또 번호 그리고 두 번호 사이에 몇 개나 맞았는지를 출력해주는 코드입니다.
from flask import Flask, render_template
import random
app = Flask(__name__)
def generate_lotto():
numbers = random.sample(range(1, 46), 6)
return sorted(numbers)
@app.route('/')
def home():
lotto = [1, 2, 3, 4, 5, 6]
random_lotto = generate_lotto()
context = {
'lotto': lotto,
'random_lotto': random_lotto,
'common_count': len(set(lotto) & set(random_lotto)),
}
return render_template('index.html', data=context)
if __name__ == '__main__':
app.run(debug=True)아래는 라우팅된 페이지를 시각적으로 나타내어주는 HTML 코드입니다. 파이썬 플라스크 코드에서 data라는 인자로 파이썬 변수를 넘겨주었기 때문에 아래의 HTML에서 data라는 인자로 값을 추출하고 있습니다.
<body>
<header>
<h1>Welcome to Lotto Homepage!</h1>
</header>
<div class="lotto-container">
<h2>Your Lotto Numbers: {{data.lotto}}</h2>
</div>
<div class="lotto-container">
<h2>Randomly Generated Lotto Numbers: {{data.random_lotto}}</h2>
</div>
<div class="lotto-container">
<h2>count matched: {{data.common_count}}</h2>
</div>
</body>완성된 웹 페이지는 아래와 같이 나타나게 됩니다.
'BE > Flask' 카테고리의 다른 글
| [Flask] 초간단! HTML과 Flask 통신 - 3 (1) | 2024.02.04 |
|---|---|
| [Flask] 초간단! HTML과 Jinja2 (0) | 2024.01.30 |
| [Flask] 초간단! HTML과 Flask 통신 - 2 (2) | 2024.01.29 |