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

개요

이번엔 클라이언트로 부터 요청을 플라스크에 전달하고, 요청 내용을 토대로 클라이언트에 값을 반환해 보자

진행 순서는 다음과 같다.

1. 웹 클라이언트에서 Flask로 요청을 전달
2. 요청을 라우트에 따라 구분하여 Flask 내부에서 메서드 할당
3. 메서드 내부에서 db테이블을 참조해 요청에 맞는 쿼리문을 통해 데이터 파싱
4. 관련 데이터를 json형식을 통해 리턴
5. 클라이언트에서 데이터를 획득

따라서 우선 웹 클라이언트 로직을 작성 후 Flask서버에 관련 요청을 보내야 한다.

 

 

App.vue

<template>
  <div>
    <h1>Items</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }} - {{ item.description }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    };
  },
  mounted() {
    // Flask API에서 데이터 가져오기
    axios.get('http://localhost:5000/items')
      .then(response => {
        this.items = response.data;
      })
      .catch(error => {
        console.error('There was an error!', error);
      });
  }
};
</script>

 

간단한 GET관련 로직이다.

해당 로직을 설치하기 위해선 vue가 설치되어 있어야 한다.

추가로, node.js, npm이 설치된 환경에서 웹 서버를 실행시켜야 한다.

그 다음 로컬 기본 환경인 http://localhost:8080/에서 구동되는 서버를 확인할 수 있다.

 

해당 로직을 살펴보면 웹 서버에 접속 시 곧 바로 Flask 서버에 URL에 get요청을 보낸다.

응답이 정상적으로 왔을 경우 아이템을 v-for문을 통해 클라이언트에 보여준다.

 

 

데이터 준비

우선 클라이언트 요청과 Flask의 라우트가 정상적으로 데이터를 가져오기 위해선 데이터를 추가해 줘야 한다.

따라서 이전 글에서 연동했던 MySQL에 더미 데이터를 추가해 준다.

 

[Python] Flask DB 연동

[Python] Flask DB 연동

 

총 6개의 더미 데이터를 삽입해 주었다.

 

 

route 준비

@api_bp.route('/items', methods=['GET'])
def get_items():
    items = Item.query.all()
    return jsonify([{'id': item.id, 'name': item.name, 'description': item.description} for item in items])

 

/items으로 된 get요청이 담긴 URL이 도착 시 get_items 메서드를 실행하게 된다.

해당 메서드에선 DB상에서 Item이라는 테이블을 참조해 모든 데이터를 가져와 items에 파싱해 준다.

이를 json형태로 파싱하여 리스트에 담아 리턴한다.

 

DB관련 연동 로직이 모두 활성화 된 상태여야 한다.

테이블 모델, SQLAlchemy등이 초기화 되어 있어야 하며 서버 앱 실행 시 이를 참조해 주어야 한다.

또한 다른 포트로 부터의 요청을 받기 위해 CORS를 설치해 주어야 한다.

pip install flask-cors

 

해당 모듈을 설치해 준 후 __init__에 import해주고 app실행 시 CORS(app)으로 모든 종료점에 대해 허용을 명시해 준다.

 

실행

1. npm run serve를 통해 웹 서버를 실행해 준다.
2. Flask 서버를 실행해 준다.
3. MySQL Server도 활성화 상태로 만들어 준다.
4. localhost:8080 주소로 접속해 준다.
5. DB에 존재하는 데이터가 모두 출력 되었는지 확인해 준다.

 

테이블에 존재하는 모든 데이터가 성공적으로 클라이언트 화면에 출력된 것을 볼 수 있다.

 

특정 id의 아이템 가져오기

GET 요청을 보낼 때 파라미터로 id를 전달하여 특정 id를 갖는 아이템만 가져오도록 요청할 수 있다.

 

1. 클라이언트 로직 작성

<template>
  <div>
    <h1>아이템 정보 가져오기</h1>
    
    <!-- 숫자만 입력 가능하게 설정 -->
    <input type="number" v-model="itemId" placeholder="아이템 ID" />
    <button @click="fetchItem">아이템 가져오기</button>

    <!-- 가져온 아이템 정보를 표시 -->
    <div v-if="item">
      <h2>아이템 정보</h2>
      <p><strong>ID:</strong> {{ item.id }}</p>
      <p><strong>이름:</strong> {{ item.name }}</p>
      <p><strong>설명:</strong> {{ item.description }}</p>
    </div>

    <!-- 에러 메시지 출력 -->
    <div v-if="error" class="error">
      <p>{{ error }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemId: '',  // 입력된 아이템 ID
      item: null,  // 가져온 아이템 데이터
      error: null   // 에러 메시지
    };
  },
  methods: {
    // 아이템 데이터를 Flask 서버에서 가져오는 메서드
    async fetchItem() {
      if (!this.itemId) {
        this.error = '아이템 ID를 입력해주세요.';
        return;
      }
      
      this.error = null;  // 이전 에러 메시지 초기화

      try {
        const response = await fetch(`http://localhost:5000/items/${this.itemId}`);
        if (!response.ok) {
          throw new Error('아이템을 찾을 수 없습니다.');
        }

        const data = await response.json();
        this.item = data;  // 아이템 정보를 화면에 표시
      } catch (err) {
        this.error = err.message;  // 에러 발생 시 메시지 표시
      }
    }
  }
};
</script>

<style scoped>
.error {
  color: red;
}
</style>

 

2. Flask 라우트 메서드 작성

@api_bp.route('/items/<int:item_id>', methods=['GET'])
def get_item(item_id):
    # 아이템을 'id'로 조회
    item = Item.query.get(item_id)  # 'get' 메서드로 primary key를 기준으로 조회

    if not item:
        return jsonify({'message': 'Item not found'}), 404  # 아이템이 없으면 404 응답

    # 아이템이 존재하면 정보 반환
    return jsonify({
        'id': item.id,
        'name': item.name,
        'description': item.description
    })

3. 웹 클라이언트 실행

 

 

4. Flask 서버 실행

5. 클라이언트에서 아이템 ID로 GET 요청

 

만약 잘못된 DB에 존재하지 않는 ID를 요청 시 에러가 출력된다.