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

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

WBOY

リリース： 2023-09-09 17:57:11

オリジナル

1319 人が閲覧しました

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

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

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

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

Node.js と npm: フロントエンドの依存関係のインストールと管理に使用されます。
Python と pip: バックエンドの依存関係のインストールと管理に使用されます。
Vue CLI: Vue プロジェクトを作成するためのコマンドラインツール。
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 の構文は Vue2 とは若干異なりますが、一般的には似ています。 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 サイトの他の関連記事を参照してください。