実践スキル共有：Vue3+Django4新技術プロジェクト開発-Vue.js-php.cn

実践スキル共有：Vue3+Django4新技術プロジェクト開発

WBOY

リリース： 2023-09-10 12:17:02

オリジナル

1294 人が閲覧しました

実践スキル共有：Vue3+Django4新技術プロジェクト開発

近年、フロントエンド技術が急速に発展しており、優れたフロントエンドフレームワークとしてVue.jsが注目を集めています。 Vue.js3 の正式リリースと今後の Django4 の登場により、この 2 つを組み合わせて新しいテクノロジープロジェクトを開発することは、技術的なボトルネックを突破し、プロジェクトの開発効率を向上させる優れたソリューションであることは間違いありません。この記事では、開発者が Vue3 Django4 技術プロジェクトの開発プロセスをより快適に行えるようになるための実践的なヒントをいくつか紹介します。

まず、新しい Vue3 Django4 プロジェクトを開始するには、まず開発環境をセットアップする必要があります。 Vue3 のインストールには Vue2 と比較していくつかの変更があり、boot コマンドを使用して新しいプロジェクトを作成できるようになりました。 Vue CLI をインストールし、次のコマンドを使用して新しいプロジェクトを作成します。

npm install -g @vue/cli
vue create my-project

ログイン後にコピー

これにより、新しい Vue3 プロジェクトが自動的に作成され、依存関係がローカルにインストールされます。

次に、Django4 をインストールする必要があります。これは、次のコマンドを使用してインストールできます:

pip install Django==4.0.*

ログイン後にコピー

インストールが完了したら、新しい Django プロジェクトを作成できます:

django-admin startproject myproject

ログイン後にコピー

次に、Vue3 と Django4 の間の通信を設定する必要があります。 Vue3 と Django4 は 2 つの完全に独立したプロジェクトであるため、クロスドメインの問題を処理するには CORS (Cross-Origin Resource Sharing) を使用する必要があります。 Django の settings.py ファイルで、次の内容を見つけて変更します。

INSTALLED_APPS = [
    ...
    'corsheaders',
]

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

CORS_ORIGIN_ALLOW_ALL = True

ログイン後にコピー

このようにして、Django4 のクロスドメイン処理が構成されます。

次に、Vue3 と Django4 間のデータ対話を実装します。フロントエンドとバックエンドの対話には、RESTful API を使用できます。 Vue3 プロジェクトでは、axios ライブラリを使用して HTTP リクエストを行うことができます。まず、axios をインストールする必要があります:

npm install axios

ログイン後にコピー

次に、次のコードを Vue3 プロジェクトの main.js ファイルに追加します:

import axios from 'axios'
Vue.prototype.$http = axios

ログイン後にコピー

これにより、Vue3 プロジェクトで axios を使用して次のことができるようになります。要求を送信する。

Django4 プロジェクトでは、Django のクラスビューとシリアライザーを使用してリクエストと応答を処理できます。まず、新しい Django アプリケーションを作成します。

python manage.py startapp myapp

ログイン後にコピー

次に、リクエストとレスポンスのロジックを処理するクラスビューを myapp/views.py ファイルに記述します。たとえば、「HelloView」という名前のクラスビューを作成できます:

from rest_framework.views import APIView
from rest_framework.response import Response

class HelloView(APIView):
    def get(self, request):
        return Response({"message": "Hello, Vue3+Django4!"})

ログイン後にコピー

次に、myproject/urls.py ファイルに次のコードを追加します:

from myapp.views import HelloView

urlpatterns = [
    ...
    path('hello/', HelloView.as_view()),
    ...
]

ログイン後にコピー

このようにして、次のコードを実装しました。 Django4 のシンプルな API インターフェイス。

最後に、フロントエンドとバックエンド間のデータ対話を実装しましょう。 Vue3 プロジェクトでは、リクエストを送信してデータを取得するための新しいコンポーネントを作成できます。たとえば、Vue3 プロジェクトの Hello.vue ファイルでは次のようになります。

<template>
  <div>
    <button @click="getData">获取数据</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    getData() {
      this.$http.get('http://localhost:8000/hello/')
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

ログイン後にコピー

このように、ボタンがクリックされると、フロントエンドはバックエンドにリクエストを送信し、データを取得します。

これまでに、新しい Vue3 Django4 テクノロジプロジェクトの構築と、基本的なフロントエンドとバックエンドのデータ対話が完了しました。プロジェクト開発中に、特定のニーズに基づいて機能を拡張し続けることができます。同時に、Vue3 と Django4 には多くの新機能と改善がもたらされており、開発者は公式ドキュメントや参考例を学ぶことで、それらをよりよく習得し、プロジェクト開発に適用することができます。

要約すると、Vue3 Django4 は、開発者がテクノロジープロジェクトをより効率的に開発できるようにする強力なテクノロジーの組み合わせです。この記事では、開発環境のセットアップ、クロスドメイン処理の構成、フロントエンドとバックエンドのデータ相互作用の実現に関する実践的なヒントを紹介します。将来的には、Vue3 と Django4 にさらなる改善と新機能が追加される予定であり、それらを引き続き探索して適用して、より強力なプロジェクトを実現することができます。

以上が実践スキル共有：Vue3+Django4新技術プロジェクト開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。