Vue3+Django4 フルスタック開発ガイド-Vue.js-php.cn

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

PHPz

リリース： 2023-09-11 10:46:41

オリジナル

917 人が閲覧しました

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 応答を返します。＃。

ステップ 5: アプリケーション関数の開発

上記のステップの後、Vue3 と Django が正常に接続され、Vue3 で API リクエストを送信できるようになりました。次に、ニーズに応じてアプリケーション機能の開発を開始できます。

Vue3 プロジェクトでは、Composition API などの Vue3 の新機能を使用してコンポーネントロジックを作成できます。フロントエンドのルーティング管理には Vue Router を使用し、状態管理には Vuex を使用できます。

Django プロジェクトでは、Django のモデルとデータベース移行を使用して、データモデルを定義および管理できます。 Django のフォームとテンプレートを使用して、ユーザー入力を処理し、インターフェイスをレンダリングできます。

ステップ 6: 導入と最適化

最後のステップは、アプリケーションを導入して最適化することです。 Vue3 のパッケージ化コマンドを使用して、フロントエンドコードを静的ファイルにコンパイルし、それをサーバーにデプロイできます。

Django プロジェクトの場合、テストとデバッグに Django の組み込み開発サーバーを使用してから、デプロイメントに Nginx uWSGI の使用を検討できます。

さらに、フロントエンドとバックエンドのコードを最適化して、読み込み時間を短縮し、パフォーマンスを向上させることができます。 Webpack と Babel を使用して Vue3 プロジェクトを最適化し、Django のキャッシュツールとパフォーマンスチューニングツールを使用して Django プロジェクトを最適化できます。

結論

この記事では、読者がフルスタック開発にこれら 2 つのフレームワークをより効果的に活用できるように、Vue3 Django4 フルスタック開発ガイドを紹介します。 Vue3 と Django4 は豊富な機能と強力なツールを提供し、フルスタック開発をよりシンプルかつ効率的にします。読者の皆様には、開発の過程でこの 2 つのフレームワークを上手に使いこなして、より優れたアプリケーションを作成していただければ幸いです。

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