実践的な経験の共有: Vue3+Django4 フルスタック プロジェクト開発ガイド

実践的な経験の共有: Vue3 Django4 フルスタック プロジェクト開発ガイド

はじめに:
インターネットが高度に発達した今日の時代では、フルスタック開発はますます重要になっています。など 多くの開発者が注目し、学んでいる方向性。 Vue フレームワークは現在最も人気のあるフロントエンド フレームワークの 1 つであり、Django は強力な Python バックエンド フレームワークであり、これらを組み合わせることで、包括的なフルスタック開発エクスペリエンスを提供できます。この記事では、Vue3 と Django4 を使用して完全なフルスタック プロジェクトを構築する方法を紹介し、いくつかの開発経験とコード例を共有します。

1. 環境の準備
プロジェクトを開始する前に、環境を準備する必要があります。次のソフトウェアがインストールされていることを確認してください:

1. Node.js と npm: フロントエンドの依存関係のインストールと管理に使用されます。
2. Python と pip: バックエンドの依存関係のインストールと管理に使用されます。
3. Vue CLI: Vue プロジェクトを作成するためのコマンド ライン ツール。
4. Django: バックエンド プロジェクトの作成と管理に使用されます。

2. Vue3 プロジェクトの作成
まず、Vue CLI を使用して Vue3 プロジェクトを作成します。コマンド ライン インターフェイスを開き、次のコマンドを実行します。

$ vue create vue_project

コマンド ライン プロンプトに従い、必要な構成を選択し、プロジェクトが作成されるまで待ちます。

3. Django プロジェクトの作成
次に、Django を使用してバックエンド プロジェクトを作成します。コマンド ライン インターフェイスで次のコマンドを実行します。

$ django-admin startproject django_project

これにより、現在のディレクトリに django_project という名前のフォルダーが作成され、プロジェクトのスケルトンが生成されます。

4. フロントエンドとバックエンドの接続を構成する
このステップでは、フロントエンドとバックエンドが相互に通信できるように、フロントエンドとバックエンドの接続を構成する必要があります。 。まず、vue_project/src ディレクトリにファイル .env.development を作成し、次の内容を追加します。

VUE_APP_BACKEND_URL=http://localhost:8000

Herehttp://localhost:8000 は、 Django バックエンドが実行されているアドレス。

次に、vue_project/src/main.js ファイルを開き、createApp の前に次のコードを追加します。

import axios from 'axios'
axios.defaults.baseURL = process.env.VUE_APP_BACKEND_URL

このコード スニペットは、axios のデフォルトのベース URL を次のように設定します。先ほど設定したバックエンド アドレス。

5. フロントエンド ページの開発
次に、フロントエンド ページの開発を開始できます。 Vue3 の構文は V​​ue2 とは若干異なりますが、一般的には似ています。 Vue3 は、コード ロジックをより適切に管理できる、より強力な組み合わせ API を提供します。以下に簡単な例を示します。

まず、vue_project/src/components ディレクトリに HelloWorld.vue という名前のコンポーネント ファイルを作成し、次の内容を追加します。

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue3!')
    return {
      message
    }
  }
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>

このコンポーネントには、赤いタイトルが表示されます。 、タイトルの内容は、ref で定義された応答変数を通じて設定されます。

このコンポーネントをページで使用するには、vue_project/src/App.vue に導入する必要があります。まず、元のコンテンツを削除して、次のコードを追加します。

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Arial', sans-serif;
}
</style>

ここでは、先ほど作成した HelloWorld.vue コンポーネントをインポートし、ページ内で参照します。

6. バックエンド API の開発
Django プロジェクトでは、バックエンド サービスを提供する API を作成する必要があります。例として、単純なユーザー API を作成します。

まず、django_project ディレクトリで次のコマンドを実行して、users という名前のアプリケーションを作成します:

$ python manage.py startapp users

users ディレクトリに views という名前のアプリケーションを作成します。 ファイルを開き、次のコードを追加します。

from django.http import JsonResponse

def get_users(request):
    users = [
        {"id": 1, "name": "Alice"},
        {"id": 2, "name": "Bob"},
        {"id": 3, "name": "Charlie"}
    ]
    return JsonResponse(users, safe=False)

この単純なビュー関数は、ユーザー情報を含む JSON 応答を返します。

次に、django_project/django_project/urls.py ファイルを開き、次のコードを追加します。

from django.urls import path
from users.views import get_users

urlpatterns = [
    path('api/users', get_users),
]

このコード スニペットは、get_users ビュー関数をパスにマップします /api/users。

7. フロントエンドとバックエンドの通信
フロントエンドがバックエンド API にアクセスするには、axios を使用して HTTP リクエストを送信する必要があります。 vue_project/src/components/HelloWorld.vue ファイルに戻り、setup 関数に次のコードを追加します。

import axios from 'axios'
export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue3!')
    axios.get('/api/users').then((response) => {
      console.log(response.data)
    })
    return {
      message
    }
  }
}

このコード スニペットは、axios を使用して GET リクエストを ## に送信します。 #/api/ users を実行し、返されたデータを出力します。

8. プロジェクトを実行する

最後に、必要なのはフロントエンド プロジェクトとバックエンド プロジェクトを個別に実行することだけです。

vue_project ディレクトリで次のコマンドを実行します:

$ npm install
$ npm run serve

django_project ディレクトリで次のコマンドを実行します:

$ python manage.py runserver

次に、ブラウザを開いて

http にアクセスします。 // localhost:8080、すべてがうまくいけば、バックエンド API によって返されたデータをコンソールで確認できるはずです。

概要:

この記事では、Vue3 と Django4 を使用して完全なフルスタック プロジェクトを構築する方法を紹介し、いくつかの実践的な経験とコード例を共有します。このフルスタック開発アプローチにより、フロントエンドとバックエンドを分離した Web アプリケーションをより効率的に構築できます。この記事がフルスタック開発を学習している開発者に役立つことを願っています。

以上が実践的な経験の共有: Vue3+Django4 フルスタック プロジェクト開発ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。