クイック スタート: Vue3+Django4 フルスタック開発入門ガイド

クイック スタート: Vue3 Django4 フルスタック開発入門ガイド

インターネットの急速な発展に伴い、フルスタック開発は最も注目されているテクノロジの 1 つになりました。近年のトレンド。フルスタック開発では、フロントエンドとバックエンドのフレームワークを組み合わせて開発するのが一般的です。この記事は、Vue3 Django4 フルスタック開発の世界へ導き、初心者向けの入門ガイドを提供します。

Vue3 は Vue.js フレームワークの最新バージョンで、より高いパフォーマンス、優れた開発エクスペリエンス、およびより多くの新機能を備えています。 Django は、豊富な機能と拡張性を提供する高度な Python Web フレームワークです。これらを組み合わせることで、強力で最新の Web アプリケーションが作成されます。

始める前に、Node.js、Vue CLI、Python が正しくインストールされていることを確認してください。インストールが完了したら、プロジェクトの作成を開始できます。まず、Vue CLI を使用して Vue3 プロジェクトを作成し、ターミナルを開いて次のコマンドを実行します。

vue create myproject

作成プロセス中に、Vue ルーターを提供する Vue3 プリセット オプションの使用を選択できます。および Vuex 既製の構成。作成が完了したら、プロジェクト ディレクトリに入り、Vue と Django の依存関係パッケージをインストールします。

cd myproject npm install vue@next pip install Django

次に、プロジェクト内に Django アプリケーションを作成し、次のコマンドを使用して作成する必要があります。

django-admin startproject backend cd backend python manage.py startapp api

作成が完了したら、コードの記述を開始できます。まず、Vue の静的ファイル パスを Django の settings.py ファイルに追加し、STATIC_URL を見つけてその下に次のコードを追加する必要があります:

STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'frontend/dist'), ]

次に、Vue へのリクエストを処理するための新しい urls.py ファイルを作成します。フロントエンド。このファイルは api ディレクトリにあります。次のコードを記述します:

from django.urls import path from . import views urlpatterns = [ path('api/', views.api), ]

次に、Vue フロントエンドからのリクエストを処理するためのロジック コードを views.py ファイルに記述します。次のコードを記述します。

from django.shortcuts import render from django.http import JsonResponse def api(request): data = { 'message': 'Hello from Django API!' } return JsonResponse(data)

この単純な例では、単純なメッセージを含む JSON 応答を返すだけです。実際のアプリケーションでは、さまざまなリクエストを処理するために、より複雑なロジックを作成できます。

次に、Vue を使用してフロントエンド コードを記述する必要があります。プロジェクト ディレクトリに移動し、Vue Router と Axios をインストールします。

cd frontend npm install vue-router@next axios

次に、src/router/index.js ファイルを開いて次のコードを追加します。

import { createWebHistory, createRouter } from 'vue-router' import Home from '../views/Home.vue' import API from '../views/API.vue' const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/api', name: 'API', component: API } ] const router = createRouter({ history: createWebHistory(), routes }) export default router

この例では、次のように定義します。 2 つのルート: 「/」はホーム コンポーネントに対応し、「/api」は API コンポーネントに対応します。次に、src/views ディレクトリに Home.vue コンポーネントと API.vue コンポーネントを作成します。ここでは単にテキスト情報を表示するだけです。

これで、API.vue コンポーネントでリクエストを送信して、Django API からデータを取得できるようになります。次のコードを使用して、元のコンテンツを置き換えます。

この例では、コンポーネントのマウントされたフック関数で GET リクエストを送信し、Django API によって返されたデータを取得し、そのデータをページが優れています。

これで、Vue3 と Django4 を使用した基本的なフルスタック アプリケーションが完成しました。次のコマンドを実行して開発サーバーを起動できます:

cd .. python manage.py runserver

次に、ブラウザで http://localhost:8000/ を開くと、Django API データを含むページが表示されます。

この記事のガイダンスを通じて、Vue3 Django4 フルスタック開発の入門ガイドを完了することができました。初心者にとって役立つことを願っています。また、フルスタック開発の分野をさらに学び、探索できることを願っています。来て！

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