Vue3+Django4 フルスタック開発ガイド

Vue3 Django4 フルスタック開発ガイド

フロントエンドとバックエンドの分離開発モデルの人気により、Vue と Django は、多くのユーザーが好むテクノロジー スタックになりました。多くの開発者。人気のフロントエンド フレームワークとして、Vue は習得が容易で柔軟性があり、効率的であるのに対し、Django は Web アプリケーションの開発に必要なさまざまな機能を提供する強力なバックエンド フレームワークです。

最近リリースされた Vue3 と Django4 は、多くのエキサイティングな新機能と改善をもたらし、開発効率とユーザー エクスペリエンスを向上させます。この記事は、読者が Vue3 と Django4 のフルスタック開発ガイドを理解し、開発者がフルスタック開発でこれら 2 つのフレームワークをより効果的に活用できるように支援します。

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

フルスタック開発を開始する前に、まず開発環境をセットアップする必要があります。 Vue3 では実行環境として Node.js が必要ですが、Django4 では Python のサポートが必要です。したがって、Node.js と Python を別々にインストールする必要があります。

Node.js のインストールは非常に簡単で、公式 Web サイトから対応するインストール パッケージをダウンロードし、画面の指示に従ってインストールします。インストールが完了したら、Vue のスキャフォールディング ツール vue-cli もインストールする必要があります。これは、次のコマンドでインストールできます:

npm install -g @vue/cli

Python のインストールも非常に簡単です。対応するインストール パッケージは、公式 Web サイトにアクセスし、指示に従ってインストールするだけです。インストールが完了したら、Django と関連する拡張機能パッケージもインストールする必要があります。pip コマンドを使用してインストールできます:

pip install Django

ステップ 2: Vue3 プロジェクトを作成する

開発環境では、Vue3 プロジェクトの作成を開始できます。コマンド ライン ターミナルを開き、次のコマンドを使用して新しい Vue3 プロジェクトを作成します:

vue create my-project

次に、プロンプトに従ってオプションを構成します。手動構成またはデフォルト構成を選択できます。手動構成を選択した後、ニーズに応じてさまざまな機能とプラグインを選択できます。

プロジェクトを作成した後、プロジェクト ディレクトリに入り、次のコマンドを使用して開発サーバーを起動します:

cd my-project
npm run serve

これにより、ブラウザでプロジェクトにアクセスし、Vue3 のようこそ画面が表示されます。ページ。

ステップ 3: Django プロジェクトを作成する

次に、Django プロジェクトを作成する必要があります。コマンド ライン ターミナルで、次のコマンドを使用して新しい Django プロジェクトを作成します:

django-admin startproject mysite

プロジェクトを作成した後、プロジェクト ディレクトリに入り、次のコマンドを使用して開発サーバーを起動します:

cd mysite
python manage.py runserver

これにより、ブラウザーで Django のようこそページにアクセスできます。

ステップ 4: Vue3 と Django を接続する

Vue3 プロジェクトと Django プロジェクトができたので、それらを接続する必要があります。まず、Django の API にアクセスできるように Vue3 プロジェクトでプロキシを構成する必要があります。 Vue3 プロジェクトのルート ディレクトリに vue.config.js ファイルを作成し、次の構成を追加します。

module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'http://localhost:8000',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

次に、Vue3 プロジェクトで axios または他の HTTP クライアント ライブラリを使用して API リクエストを行うときに、 /apiPath から直接アクセスできます。

Django プロジェクトでは、Vue3 によって送信されたリクエストを処理する API ビューを作成する必要があります。 API ビューのロジックを記述する api.py ファイルを作成できます。たとえば、Django の REST フレームワークを使用して RESTful API をすばやく作成できます:

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def hello_world(request):
    return Response({'message': 'Hello, World!'})

次に、この API ビューのルートを Django プロジェクトの urls.py に追加します:

from django.urls import path
from . import api

urlpatterns = [
    path('api/hello', api.hello_world),
]

この方法では、Vue3 の場合、プロジェクト内の /api/hello に GET リクエストを送信すると、Django は {'message': 'Hello, World!'}## を含む JSON 応答を返します。 ＃。

以上がVue3+Django4 フルスタック開発ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。