웹개발 종합반 4주차

Flask 프레임워크

python으로 작성된 서버를 구동시켜주는 프레임워크

app.py 벡엔드 (서버)

index.html 프론트엔드 (클라이언트)

 

GET방식은 조회시 주로 사용 / URL주소에 정보를 붙여 전달

POST방식은 데이터변경이 있는 등록,수정,삭제에 주로 사용 / URL주소에 정보가 보이지않는다.

 

app.py에서 formData를 index.html에서 받고 app.py에서 JSON정보를 index.html에 data 정보로 넘겨준다.

 

app.py (백엔드) 기본 구성

# 라이브러리 설치 (pip install flask) - 파이썬 백엔드서버
# render_template - html을 사용하기 위한 flask의 함수
# request - fetch 라이브러리
# jsonify - json data를 내보내도록 제공하는 flask의 함수
from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html') # index.html 오픈

# GET 요청 방식
@app.route('/test', methods=['GET']) # 사용할 주소
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!!!'})

# POST 요청 방식
@app.route('/test', methods=['POST']) # 사용할 주소
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True) # 포트번호 변경가능

 

index.html (프론트엔드) 기본 구성

함수에 넣어서 사용

// GET 방식 사용
fetch("/test").then(res => res.json()).then(data => {
    console.log(data)
})

// POST 방식 사용
let formData = new FormData();
formData.append("title_give", "블랙팬서");

fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
     console.log(data)
})

 

단축키(윈도우 - 리눅스)

• 주석 : Ctrl + / = Command + /
• 줄정렬 : Shift + Alt + F = Shift + Option + F
• 줄복사 : Shift + Alt + 아래방향키 = Shift + Option + 아래방향키
• 줄이동 : Alt + 방향키 = Option + 방향키