技術詳細: Vue3+Django4 新規プロジェクト構築

詳しい技術解説:Vue3 Django4 新規プロジェクト構築

はじめに:
現在、フロントエンドとバックエンドを分離した開発モデルが必須となっています企業発展のためのスキル。 Vue と Django は非常に人気のあるフロントエンドおよびバックエンド フレームワークであり、これらを組み合わせることで、開発効率とコードの品質を大幅に向上させることができます。この記事では、フロントエンド フレームワークとして Vue3 を使用し、バックエンド フレームワークとして Django4 を使用して新しいプロジェクトを構築する方法を詳しく紹介し、コード例と詳細な技術的な説明を読者に提供します。

1. 環境セットアップ

1. フロントエンド環境のセットアップ
   まず、Node.js 環境がインストールされていることを確認します。次に、次のコマンドを使用して Vue CLI 4.x をインストールします:

npm install -g @vue/cli

次のコマンドを使用して新しい Vue3 プロジェクトを作成します:

vue create project-name

プロジェクトの初期化プロセス中に、次の項目を選択する必要があります。バージョンとしては Vue3 。初期化が完了したら、プロジェクト ディレクトリに入り、次のコマンドを使用してプロジェクトを実行します:

cd project-name
npm run serve

2. バックエンド環境のセットアップ
   まず、Python 環境がインストールされていることを確認してください。 Python 3.9 を使用してから、次のコマンドを使用して Django 4.x をインストールします:

pip install Django

新しい Django プロジェクトを作成します:

django-admin startproject project-name

プロジェクト ディレクトリを入力し、次のコマンドを使用します。プロジェクトを実行します:

cd project-name
python manage.py runserver

2. フロントエンドとバックエンドの共同デバッグ

1. フロントエンド構成
   Vue3 プロジェクトのルート ディレクトリで、vue を見つけます。 .config.js ファイル。存在しない場合は、手動で作成します。次のコードをファイルに追加します。

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

このコードは、フロントエンド API リクエストをバックエンド アドレスに転送するようにプロキシ サーバーを構成します。

2. バックエンド構成
   Django プロジェクトのルート ディレクトリで settings.py ファイルを見つけ、ALLOWED_HOSTS と INSTALLED_APPS を次のように変更します。

ALLOWED_HOSTS = ['localhost', '127.0.0.1']

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

次に、 py ファイルの最後に次のコードを追加します:

CORS_ALLOW_ALL_ORIGINS = True

このコードは、クロスドメイン要求を許可するように構成されています。

3. フロントエンドとバックエンドの対話

1. フロントエンド リクエスト
   Vue3 プロジェクトでは、API リクエストは axios ライブラリを使用して行われます。まず、次のコマンドを使用して axios をインストールします:

npm install axios

次に、API を呼び出す必要があるコンポーネントで axios を導入し、リクエストを送信します:

import axios from 'axios'

axios.get('/api/example')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

2. Backend応答
   Django では、Django Rest Framework (DRF) を使用して API を構築します。まず、次のコマンドを使用して DRF をインストールします。

pip install djangorestframework

次に、Django アプリ ディレクトリに新しいファイル Serializers.py を作成し、次のコードを記述します。

from rest_framework import serializers

class ExampleSerializer(serializers.Serializer):
    id = serializers.IntegerField()
    name = serializers.CharField(max_length=100)

次に、新しいファイル views.py を作成し、次のコードを記述します:

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

@api_view(['GET'])
def example(request):
    data = [
        {'id': 1, 'name': 'example1'},
        {'id': 2, 'name': 'example2'},
    ]
    serializer = ExampleSerializer(data, many=True)
    return Response(serializer.data)

最後に、Django プロジェクト ディレクトリで urls.py ファイルを見つけて、次のコードを追加します:

from django.urls import path
from . import views

urlpatterns = [
    path('example/', views.example),
]

このように、現在のエンド /api/example に GET リクエストを送信すると、バックエンドはサンプル データを返します。

結論:
この記事の詳細な説明を通じて、読者はフロントエンド フレームワークとして Vue3 を使用し、バックエンド フレームワークとして Django4 を使用して新しいプロジェクトを構築する方法を理解できるようになります。環境セットアップ、フロントエンドとバックエンドの共同デバッグ、フロントエンドとバックエンドの相互作用のプロセスを説明し、対応するコード例を提供しました。読者の皆様がこの記事を通じて Vue と Django の基本的な使い方をマスターし、実際のプロジェクトに応用できるようになれば幸いです。

以上が技術詳細: Vue3+Django4 新規プロジェクト構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。