파이썬(Python)/Flask

[Python] flask 간단한 REST API 구현하기(GET, 인자전달, Frontend, Backend)

끄적끄적아무거나 2023. 8. 10. 19:02
반응형

 

목차

     

     

     

     

     

     

     

    [Python] flask 간단한 REST API 구현하기

     

    Flask 프레임워크를 사용하여 간단한 백엔드와 프론트엔드를 구현해보겠습니다. 이 예제에서는 JSON 데이터를 반환하는 간단한 API 엔드포인트와 HTML 템플릿을 렌더링하는 프론트엔드를 만들어보겠습니다.

     

     

     

     

    예제 코드, login_test.py>>

    from flask import Flask, jsonify, request, render_template
    
    app = Flask(__name__)
    
    # 간단한 JSON 데이터를 반환하는 API 엔드포인트
    @app.route('/api/data', methods=['GET'])
    def get_data():
        name = request.args.get('name')
        data = {'message': f'Hello, {name} from the backend!'} if name else {'message': 'Hello from the backend!'}
        return jsonify(data)
    
    # HTML 템플릿을 렌더링하는 엔드포인트
    @app.route('/')
    def index():
        return render_template('index.html')
    
    if __name__ == '__main__':
        app.run(debug=True)

     

     

     

     

    예제 코드, index.html>>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Flask Frontend</title>
    </head>
    <body>
        <h1>Welcome to Flask Frontend!</h1>
        <p id="message"></p>
    
        <script>
            async function fetchData() {
                const name = prompt('Enter your name:');
                const url = `/api/data?name=${encodeURIComponent(name)}`;
                
                const response = await fetch(url);
                const data = await response.json();
                
                document.getElementById('message').innerText = data.message;
            }
        
            fetchData();
        </script>
        
    </body>
    </html>

     

     

     

     

    결과>>

     

     

     

    주석>>

    백엔드 코드인 파이썬 코드에 대해 설명하겠습니다. Flask 프레임워크를 사용하여 백엔드 서버를 만들고, 두 개의 엔드포인트를 정의합니다. /api/data 엔드포인트는 GET 요청을 받아서 JSON 데이터를 반환합니다. 만약 요청에 name 파라미터가 포함되어 있다면, 해당 이름을 사용하여 인사말을 생성하고 JSON 데이터로 반환합니다. / 엔드포인트는 HTML 템플릿을 렌더링하여 프론트엔드에서 보여줍니다.

     

     

    다음으로 HTML 파일인 프론트엔드 코드에 대해 설명하겠습니다. HTML 파일 안에 <script> 섹션에 있는 코드는 사용자에게 이름을 입력받아 백엔드로 전달하고, 그에 따른 응답을 받아서 화면에 보여주는 역할을 합니다. fetchData() 함수는 백엔드 API를 호출하는 역할을 합니다.
    prompt 함수를 사용하여 사용자에게 이름을 입력받습니다. 이때, encodeURIComponent 함수를 사용하여 이름을 URL에 안전하게 포함시킵니다. 입력받은 이름을 가지고 /api/data 엔드포인트에 GET 요청을 보내고, 응답으로 받은 JSON 데이터를 처리하여 화면에 표시합니다.

     

     

    간단하게 말해, 이 예제는 사용자의 이름을 입력받아 백엔드에 전달하고, 백엔드에서는 그 이름을 이용하여 인사말을 만들어 응답을 보내주는 과정을 보여주고 있습니다. 이러한 프론트엔드와 백엔드의 상호작용을 통해 웹 애플리케이션을 구축하는 기초적인 개념을 이해할 수 있습니다.

     

     

     

     

     

    [Python] flask 간단한 REST API 예제 코드 다운로드

     

     

    login_test.py
    0.00MB
    index.html
    0.00MB

     

     

     

     

    반응형