Framework/Flask

[Flask] Flask 기초

Ella_K 2022. 7. 23. 01:51

✅ 프로젝트 기본 폴더 구조

  • static 폴더: 이미지, CSS파일을 넣어둠
  • templates 폴더: HTML파일을 담아두고, 불러오는 역할을 함
  • app.py (flask파일)

 

✅ Flask 기본 애플리케이션

  • flask 설치 
pip install flask

 

  • flask import
from flask import Flask

 

  • flask 객체를 app에 할당
app = Flask(__name__)

 

  • 페이지 구성
@app.route('/hello')
def hello_print():
   return "Hello!"
route 데코레이터를 사용해서 flask에게 어떤 URL이 우리가 작성한 함수를 실행시키는지 알려준다.

 

  • app.py가 메인 모듈로 실행될 때 플라스크 서버구동
if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)
서버로 구동한 IP주소와 포트를 지정할 수 있다.
웹페이지를 <IP주소>:<포트번호>로 접근한다.

debug = True는 디버그 모드로 실행한다는 의미이다.
run() 메소드는 코드 변경 후에 수동으로 재시작해야한다.
하지만 디버그 모드를 하면, 서버는 코드 변경을 감지하고 자동으로 리로드하고, 문제가 발생하면 문제를 찾을 수 있도록 디버거를 제공한다고 한다.
하지만 보안에 취약한 점이 있어 운영 환경에서는 절대 사용하면 안된다고 한다.

 

  • 실행 결과
from flask import Flask
app = Flask(__name__)

@app.route('/')
def home():
   return "Wellcome!"
   
if __name__ == '__main__':
   app.run('0.0.0.0', port=5000, debug=True)

 

✅ Routing

  • web은 유저들이 쉽게 웹페이지에 접급할 수 있도록 URL을 사용한다.  (URL은 자원들의 위치를 나타내는 주소)
  • route 데코레이터를 사용해서 flask에게 어떤 URL이 우리가 작성한 함수를 실행시키는지 알려준다.
  • 함수와 URL을 연결해준다.
@app.route('/hello')
def hello_print():
   return "Hello!"

 

  • URL을 변수로 사용할 수 있다
@app.route('/post/<int:post_id>')
def id_print(post_id):
   return "Post %d" %(post_id)

 

✅ Rendering Templates

  • flask 내장 함수 render_template() 를 이용해서 HTML파일을 불러온다.
  • 서버에서 HTML을 불러온 것!
  • HTML파일은 templates 폴더 안에 있어야 한다.
  • 모듈을 import 해줘야 한다.
from flask import Flask, render_template
@app.route('/')
def home():
   return render_template('index.html')

 

  • HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function button_get(){
            $.ajax({
                type: "GET",
                url: "/test?title_give=봄날은간다",
                data: {},
                success: function (response) {
                    console.log(response['msg'])
                }
            })
        }
        function button_post() {
            $.ajax({
                type: "POST",
                url: "/test",
                data: {title_give: '봄날은간다'},
                success: function (response) {
                    console.log(response['msg'])
                }
            })
        }
    </script>
</head>
<body>
    <h1>Wellcome to my web page!</h1>
    <button onclick="button_get()">get 요청</button>
    <button onclick="button_post()">post 요청</button>
</body>
</html>

 

✅ HTTP Methods

https://kk-programming.tistory.com/37  참고

 

[JS] [스파르타코딩클럽 웹] Ajax 다뤄보기 (GET)

🔥 서버 - 클라이언트 통신 👉 CRUD API: 클라이언트, 서버와 같은 서로 다른 프로그램에서 요청과 응답을 주고 받을 수 있게 만든 체계 [1] Create(생성해줘), Read(불러줘), Update(바꿔줘), Delete(삭제해

kk-programming.tistory.com

 

import

  • request 요청을 사용하기 위해서 request를, 응답 결과를 json형태로 보내기 위해서 jsonify를 import 
from flask import Flask, render_template, request, jsonify

 

GET 요청

  • 클라이언트가 서버에 데이터 조회 (Read) 요청시 사용
  • URL 뒤에 물음표를 붙여 key = value로 데이터 전달
  • 클라이언트 ajax가 url로 요청해서 flask는 url에 따른 응답 함수를 실행시킨다.
  • 클라이언트 ajax는 서버가 보낸 응답 결과를 response로 받는다.

 

  • HTML의 <script>~</script>에서 GET 요청 Ajax 코드
function button_get(){
    $.ajax({
        type: "GET",
        url: "/test?title_give=봄날은간다",
        data: {},
        success: function (response) {
            console.log(response['msg'])
        }
    })
}
클라이언트가 url로 test 창구에 GET 요청을 한다.
이때 'title_give' 라는 key를 통해 '봄날은 간다'라는 value를 전달한다.
클라이언트는 서버의 응답을  response로 받는다.

 

  • app.py에서 GET 요청 API 코드
@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive) // 봄날은간다
   return jsonify({'result':'success', 'msg': 'Get 요청 받고, 결과 반환 합니다.'})
ajax코드의 url 요청에 따라 함수가 실행된다.
value = request.args.get('key') 으로 데이터(value)를 받는다.
응답 결과를 json형태로 return한다.

 

  • 응답결과에 따른 console 창

 

  • url을 통한 get요청, 응답 결과

 

POST 요청

  • 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 사용
  • ajax코드의 data에서 json형태로 데이터를 전달한다. 

 

  • HTML의 <script>~</script>에서 POST 요청 Ajax 코드
function button_post() {
    $.ajax({
        type: "POST",
        url: "/test",
        data: {title_give: '봄날은간다'},
        success: function (response) {
            console.log(response['msg'])
        }
    })
}
클라이언트가 url을 통해 test창구에 POST 요청을 한다.
'data'를 통해 데이터를 dictionary형태로 전달한다.
클라이언트는 서버의 응답을  response로 받는다.

 

  • app.py에서 POST 요청 API 코드
@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive) # 봄날은간다
   return jsonify({'result':'success', 'msg': 'POST 요청을 잘 받았어요'})
ajax코드에서 url과 일치하는 함수가 실행된다.
value = request.form['key'] 으로 데이터를 받는다.
응답 결과를 json형태로 return한다.

 

  • 응답 결과 console 창

 

Source

 

웹서비스 기술 익히기: flask 기본 사용법 - 잔재미코딩

다음 코드부터 04_flask_practices 디렉토리에 저장 (Pycharm 으로 해당 코드 파일 표기)

www.fun-coding.org

 

Quickstart — Flask Documentation (2.1.x)

Quickstart Eager to get started? This page gives a good introduction to Flask. Follow Installation to set up a project and install Flask first. A Minimal Application A minimal Flask application looks something like this: from flask import Flask app = Flask

flask.palletsprojects.com

저작자표시 비영리 변경금지

'Framework/Flask'의 다른글

  • 현재글[Flask] Flask 기초
댓글

티스토리툴바