Python と Vue.js を使用した SPA サンプルの構築-Python チュートリアル-php.cn

Python と Vue.js を使用した SPA サンプルの構築

WBOY

リリース： 2023-06-17 11:57:28

オリジナル

1267 人が閲覧しました

Web アプリケーションの人気に伴い、シングルページアプリケーション (SPA) がトレンドになっています。 SPA では、毎回ページをリロードする必要はありませんが、コンテンツの管理を JavaScript に任せるため、Web アプリケーションのパフォーマンスが向上します。

この記事では、Python と Vue.js を使用して簡単な SPA サンプルを構築します。バックエンド API の提供には Python が使用され、フロントエンドの実装には Vue.js が使用されます。

ステップ 1: 環境をセットアップする

このアプリケーションを構築するには、Python 3.x と Node.js をインストールする必要があります。公式サイトからインストーラーをダウンロードできます。

インストールが完了したら、ターミナルで次のコマンドを実行して、インストールが成功したかどうかを確認できます:

python --version
node --version

ログイン後にコピー

ステップ 2: バックエンド API を作成します

Flask フレームワークを使用してバックエンド API を提供します。 Flask は、Web アプリケーションを簡単に作成できるようにする 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: アプリケーションをテストする

これで、When を使用できるようになります。ブラウザが http://localhost:8080 にアクセスすると、「バックエンドからこんにちは!」というタイトルのメッセージが表示されるはずです。＃＃＃＃＃＃仕上げる！これで、必要に応じてアプリケーションの開発を続けることができます。これは単純なサンプルアプリケーションですが、このテンプレートを使用して、ログインと認証、データベース接続、より複雑なフロントエンドインターフェイスなどの大規模なアプリケーションを構築できます。

以上がPython と Vue.js を使用した SPA サンプルの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。