본문 바로가기
Flask

Flask - flask로 정적 웹 페이지 지원

by DGK 2021. 11. 25.

 

Flask 입문 수업을 듣고 중요한 내용을 정리했습니다.
개인 공부 후 자료를 남기기 위한 목적이므로 내용 상에 오류가 있을 수 있습니다.

 

flask로 정적 웹 페이지 로드하기(Python)

flask로 프론트엔트 페이지를 로드하는 연습을 하고자 한다.

 

정적 웹 페이지 로드(with flask)

*HTML 파일

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="/login" method="get">
      <p>Enter Name:</p>
      <p><input type="text" name="user_name" /></p>
      <p><input type="submit" value="submit" /></p>
    </form>
  </body>
</html>

 

*파이썬 파일

from flask import Flask, jsonify, request, render_template
app = Flask(__name__)


@app.route('/login')
def login():
    username = request.args.get('user_name')
    passwd = request.args.get('pw')
    email = request.args.get('email_address')
    print(username, passwd, email)
    
    if username == 'kim':
        return_data = {'auth': 'success'}
    else:
        return_data = {'auth': 'failed'}
    return jsonify(return_data)


@app.route('/html_test')
def hello_html():
    # html file은 templates 폴더에 위치해야 함
    return render_template('login.html')


if __name__ == '__main__':
    app.run(host="0.0.0.0", port="8080")

 

```

결과 :

http://localhost:8080/html_test
http://localhost:8080/html_test
http://localhost:8080/login

 

flask의 render_template() 함수를 사용하여, flask로 프론트엔트 페이지(http://localhost:8080/html_test)를 보여줄 수 있다.

 

*기본 구조

   - render_template(HTML 파일명)  : flask로 HTML 파일 로드

 

단, HTML 파일은 반드시 flask가 실행되는 하위 폴더인 templates 폴더 안에 위치해야 한다.

 

 

*참고

HTML 파일에서 form 태그의 action 속성 값이 /login 이므로, submit 버튼을 누르면 http://localhost:8080/login 페이지로 넘어가는 동시에 GET 함수를 통해 HTTP 요청을 함께 한다. (파라미터는 text 상자의 입력 값으로 전달 됨)

 

이 때, http://localhost:8080/login 서버가 실행 중이라면 입력 값(파라미터)에 따라 HTTP 응답 결과를 해당 페이지에 보여줄 수 있다.

 

 

댓글