Python과 Vue.js를 사용하여 SPA 예제 구축

웹 애플리케이션의 인기와 함께 단일 페이지 애플리케이션(SPA)이 트렌드가 되었습니다. SPA는 매번 페이지를 다시 로드할 필요가 없지만 콘텐츠를 JavaScript에 관리하도록 남겨 웹 애플리케이션의 성능을 향상시킵니다.

이 기사에서는 Python과 Vue.js를 사용하여 간단한 SPA 예제를 작성하겠습니다. Python은 백엔드 API를 제공하는 데 사용되고 Vue.js는 프런트엔드 구현에 사용됩니다.

1단계: 환경 설정

이 애플리케이션을 빌드하려면 Python 3.x 및 Node.js를 설치해야 합니다. 공식 홈페이지에서 설치 프로그램을 다운로드할 수 있습니다.

설치가 완료된 후 터미널에서 다음 명령을 실행하여 설치 성공 여부를 확인할 수 있습니다.

python --version
node --version

2단계: 백엔드 API 생성

Flask 프레임워크를 사용하여 백엔드 API를 제공합니다. Flask는 웹 애플리케이션을 쉽게 만들 수 있도록 Python으로 작성된 마이크로 프레임워크입니다.

클라이언트에서 API에 도메인 간 요청을 하려면 Flask 및 Flask-CORS 라이브러리를 설치해야 합니다.

"backend"라는 디렉터리를 만든 다음 해당 디렉터리에 "app.py"라는 Python 파일을 만듭니다. 다음 코드를 이 파일에 복사하세요.

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/api/test')
def test():
    return {'message': 'Hello from the backend!'}

여기서는 Flask 애플리케이션을 만들고 CORS를 활성화했습니다. 다음으로 간단한 메시지를 반환하는 경로를 "/api/test"로 정의합니다.

다음으로 터미널에서 다음 명령을 실행하여 백엔드 API 서버를 시작할 수 있습니다.

export FLASK_APP=app.py
export FLASK_ENV=development
flask run

3단계: 프런트 엔드 Vue.js 애플리케이션 생성

다음으로 Vue.js를 사용하여 단일 페이지 애플리케이션을 생성하겠습니다. Vue CLI를 사용하여 Vue.js 애플리케이션을 생성하도록 선택할 수 있습니다.

터미널의 “backend” 디렉터리로 이동하여 다음 명령을 실행하세요.

npm install -g @vue/cli
vue create frontend

이렇게 하면 “frontend”라는 디렉터리가 생성되고 기본 Vue.js 애플리케이션이 설정됩니다.

다음으로 프런트엔드 애플리케이션에서 백엔드 API에 액세스하려면 axios 라이브러리를 설치해야 합니다. "frontend" 디렉터리에서 다음 명령을 실행하세요.

npm install axios

이제 Vue.js 애플리케이션에서 "src/App.vue" 파일을 열고 다음 코드를 템플릿 태그에 복사할 수 있습니다.

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    data() {
      return {
        message: ""
      };
    },
    mounted() {
      this.getMessage();
    },
    methods: {
      getMessage() {
        axios.get("http://localhost:5000/api/test").then(response => {
          this.message = response.data.message;
        });
      }
    }
  };
</script>

위 코드에는 다음이 포함되어 있습니다. 페이지에 백엔드 API의 메시지를 표시하는 간단한 템플릿입니다. 또한 axios 라이브러리를 사용하여 백엔드 API에서 메시지를 가져와 페이지 요소에 바인딩하는 Vue.js 구성 요소도 포함되어 있습니다.

다음으로 터미널에서 다음 명령을 실행하여 Vue.js 애플리케이션을 시작할 수 있습니다.

npm run serve

4단계: 애플리케이션 테스트

이제 브라우저를 사용하여 http://localhost:8080에 액세스할 수 있습니다. "Hello from the backend!"라는 메시지가 표시됩니다.

완료! 이제 필요에 따라 애플리케이션 개발을 계속할 수 있습니다. 이는 간단한 샘플 애플리케이션이지만 이 템플릿을 사용하여 로그인 및 인증, 데이터베이스 연결, 더 복잡한 프런트 엔드 인터페이스를 포함한 더 큰 애플리케이션을 구축할 수 있습니다.

위 내용은 Python과 Vue.js를 사용하여 SPA 예제 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!