코딩과 결혼합니다

Flask-API 본문

2세/Python

Flask-API

코딩러버 2023. 5. 11. 16:18
728x90

웹개발 종합반 4주차 - Flask-API

 

 

 

 

 

  • 은행의 창구가 API와 같다는 것을 기억하시나요?
  • 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 처리하는 것이 다른 것처럼,
  • 클라이언트가 요청 할 때에도, "방식"이 존재합니다.
  • HTTP 라는 통신 규약을 따른다는 거 잊지 않으셨죠? 클라이언트는 요청할 때 HTTP request method(요청 메소드)를 통해, 어떤 요청 종류인지 응답하는 서버 쪽에 정보를 알려주는 거에요.
  • 여러 방식이 존재하지만, 가장 많이 쓰이는 GET, POST 방식에 대해서 다루겠습니다!
    1. GET 요청
    • 통상적으로 데이터 조회(Read)를 요청할 때, 사용합니다!
    예) 영화 목록 조회 → 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
    1. POST 요청
    • 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 사용합니다!
    예) 회원가입, 회원탈퇴, 비밀번호 수정

출처 : 스파르타코딩클럽

 

 

 

 

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!'})

API를 만들고 사용하는 과정에서 두 가 지가 필요하다. request와 jsonify 기능

from flask import Flask, render_template, request, jsonify

render_template 옆에 써준다.

 

 

 

 

 

 

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

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

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

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

app.py 

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        function hey() {
            fetch("/test").then(res => res.json()).then(data => {
                console.log(data)
            })
        }
    </script>
</head>

<body>
    <h1>제목을 입력합니다</h1>
    <button onclick="hey()">나는 버튼!</button>
</body>

</html>

index.html

 

 

fetch("/test")하면 백엔드에 요청이가고,

백엔드의 {'result':'success', 'msg': '이 요청은 GET!'}가 프론트엔드의 console.log(data)에 들어가 나타난다.

 

 

 

 

 

 

이제 post요청!😘

 

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!'})

 

POST 요청 확인 Fetch코드

        function hey() {
            let formData = new FormData();
            formData.append("title_give", "블랙팬서");

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

formData를 만들어 여기에 데이터를 실어 보내준다.

 

 

 

 

 

 

이번에는 그냥 눈으로 데이터가 어떻게 흘러가는지만 알아보았다. 

이제 프로젝트를 통해서 연습해볼것!

 

서버 접속 끝내기 : 터미널에서 ctrl + c

 

'2세 > Python' 카테고리의 다른 글

Get(주문 보여주기)  (0) 2023.05.16
Post(주문 저장하기)  (0) 2023.05.11
Flask  (0) 2023.05.11
Python 기초 문법 - 리스트  (0) 2023.05.10
3주차 숙제 (웹스크래핑)  (0) 2023.05.10
'2세/Python' Related Articles more