[Python] Flask 클라이언트 POST 요청 처리

개요

POST요청 즉, CRUD에서의 C에 해당하는 클라이언트의 요청을 Flask에서 처리해보자

클라이언트에서 웹 서버의 엔드포인트의 특정 URL로 POST요청을 보낸다.

그럼 Flask에서 해당 요청을 라우트로 받아 메서드를 할당한다.

해당 메서드 내에서 DB와 통신하여 작업을 처리하고, 성공 여부를 리턴한다.

 

 

CreateItem.vue

우선 vue.js의 아이템 추가 관련 컴포넌트를 생성한다.

해당 컴포넌트에서는 추가할 아이템의 이름과 설명을 작성할 input을 준비한다.

또한 button을 통해 createItem 메서드를 연결하여 해당 버튼 클릭 시 input을 통해 아이템을 추가할 수 있도록 한다.

<template>
  <div>
    <h2>아이템 추가</h2>
    <input v-model="name" placeholder="아이템 이름" />
    <input v-model="description" placeholder="아이템 설명" />
    <button @click="createItem">아이템 추가</button>
  </div>
</template>

<script>
import createItemLogic from '../assets/js/createItem.js'; // 상대 경로로 import

export default {
  mixins: [createItemLogic] // createItem.js 로직을 mixin 형태로 사용
};
</script>

 

실제로 아이템이 추가되는 로직은 createItem.js에 할당해 줄 것이다.

 

 

createItem.js

웹 서버에 아이템 추가 요청을 보낼 간단한 로직을 작성한다.

export default {
    data() {
      return {
        name: '',
        description: ''
      };
    },
    methods: {
      async createItem() {
        if (!this.name) {
          alert('아이템 이름을 입력해 주세요');
          return;
        }
  
        try {
          const response = await fetch('http://localhost:5000/items', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({
              name: this.name,
              description: this.description
            })
          });
  
          if (!response.ok) throw new Error('아이템 추가에 실패했습니다.');
          alert('아이템이 성공적으로 추가되었습니다.');
          this.name = '';
          this.description = '';
          location.href = '..';
        } catch (error) {
          alert(error.message);
        }
      }
    }
  };

 

input에 작성된 내용을 name, description 변수에 받아와 파싱한다.
아이템 이름의 경우 DB상에서 NULL값이 들어올 수 없도록 설정해 놓았기 때문에 NULL여부를 체크한다.

만약 이름이 입력되지 않은 상태에서 메서드가 실행되면 경고를 출력하고 리턴한다.

 

정확한 이름과 설명값을 받은 경우 웹 서버의 /items에 POST요청을 진행한다.

응답을 정상적으로 받지 못한 경우 예외를 던진다, 아니라면 성공적으로 데이터가 추가된 것이다.

 

 

create_item()

이제 웹 서버에서 클라이언트를 처리할 로직을 작성해 준다.

@api_bp.route('/items', methods=['POST'])
def create_item():
    data = request.json
    if not data.get('name'):
        return jsonify({'message': '아이템 이름은 필수입니다.'}), 400

    new_item = Item(name=data['name'], description=data.get('description', ''))
    db.session.add(new_item)
    db.session.commit()
    return jsonify({'message': '아이템이 성공적으로 추가되었습니다.'}), 201

클라이언트 요청이 들어올 URL과 메서드를 라우터로 지정해 준다.

해당 라우터로 요청이 들어온다면 create_item메서드를 실행한다.

요청 정보를 json형식의 변수 data로 파싱해 준다.

만약 이름이 존재하지 않는다면 바로 리턴을 실행해 준다.

이미 클라이언트 측에서 요청을 할 때 체크를 하겠지만 더블체크를 해주는 역할이다.

이후 item테이블에 요청으로 넘어온 이름과 설명 정보를 db에 add 후 commit해 주는 작업을 수행한다.

성공적으로 작업이 진행된 경우 완료 메시지를 출력한다.

 

 

실행

 

현재 웹 클라이언트의 상태이다, 아이템 목록에는 이미 DB상에 있는 목록이 출력된다.

이 상태로 한번 아이템 추가 버튼을 눌러보자

 

 

아이템 이름을 입력해 달라는 경고창이 출력된다.

따라서 이름이 NULL값인 데이터가 추가될 일을 막아주었다.

 

tempItem이라는 아이템을 추가하자 정상적으로 추가되었다는 메시지 박스가 출력되었다.

 

 

확인 버튼을 누르면 아이템 목록에 tempItem이 생성된 것을 볼 수 있다.

 

 

Flask의 실행 창을 확인하면 요청이 들어온 시점부터 로그가 작성된 것을 볼 수 있다.

GET 요청이 실행된 것은 POST 요청 후 아이템 목록을 갱신하기 위해 메인 페이지로 이동을 해서 그렇다.

메인 페이지로 이동 시 자동으로 Item테이블의 모든 데이터를 가져오도록 로직이 설정되어있다.

 

 

해당 테이블을 조회해 보면 tempItem이 DB에 정상적으로 등록된 것을 확인할 수 있다.