徹底的な学習: Vue3+Django4 フルスタック開発例

詳細な調査: Vue3 Django4 フルスタック開発の例

概要:
Web アプリケーションの開発が急速に進むにつれて、フルスタック開発は重要なものになりました。熱い話題。 Vue と Django は、人気のあるフロントエンドおよびバックエンド フレームワークとして、フルスタック開発で広く使用されています。この記事では、最新バージョンの Vue3 と Django4 をフルスタック開発に使用する方法を紹介し、その強力な機能と柔軟な拡張性を実際の例を使用して実証します。

1. 環境セットアップ:
   まず、Python、Node.js、および Vue CLI が正しくインストールされていることを確認する必要があります。次のコマンドを使用してインストールできます:
2. Python のインストール: https://www.python.org/downloads/
3. Node.js のインストール: https://nodejs.org/
4. Vue CLI のインストール: npm install -g @vue/cli

5. Django プロジェクトの作成:
   まず、新しい Django プロジェクトを作成する必要があります。コマンド ラインを開き、次のコマンドを使用してプロジェクトを作成します:

   django-admin startproject myproject

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

   cd myproject
   python manage.py startapp myapp

7. Django ルーティングの構成:
   myproject/myproject/urls.py ファイルで、Django のルート ルートと myapp を構成します。サブルート:

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

8. Django ビューの作成:
   myapp/views.py ファイルで、Django のビュー関数を作成します:

   from django.shortcuts import render
   from django.http import JsonResponse
   
   def hello(request):
    return JsonResponse({'message': 'Hello, World!'})

9. Django ルーティングの構成:
   myapp/urls.py ファイルで、myapp のルーティングを構成します:

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

10. Django サーバーを起動します:
    次のコマンドを使用して起動しますDjango 開発サーバー :

    python manage.py runserver

    http://localhost:8000/api/hello/ にアクセスすると、返された JSON データを確認できるはずです。

11. Vue プロジェクトの作成:
    次に、新しい Vue プロジェクトを作成する必要があります。コマンド ラインを開き、次のコマンドを使用してプロジェクトを作成します:

    vue create myvueapp

    注: プロジェクトを作成するときは、デフォルトのプリセット構成を選択するか、独自のニーズに応じて構成します。

12. Vue 開発サーバー エージェントを構成します。
    Vue プロジェクトのルート ディレクトリで、vue.config.js ファイルを見つけます (ない場合は、新しいファイルを作成してください)。次の構成を追加します:

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

13. Vue コンポーネントの作成:
    Vue プロジェクトの src ディレクトリで、App.vue ファイルを見つけて、その内容を次のコードに置き換えます。

    <template>
      <div>
     <h1>{{ message }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      data() {
     return {
       message: ""
     };
      },
      mounted() {
     this.fetchData();
      },
      methods: {
     fetchData() {
       fetch("/api/hello/")
         .then(response => response.json())
         .then(data => {
           this.message = data.message;
         })
         .catch(err => {
           console.log(err);
         });
     }
      }
    };
    </script>

14. Vue 開発サーバーを起動します:
    次のコマンドを使用して Vue 開発サーバーを起動します:

    cd myvueapp
    npm run serve

    http://localhost:8080 にアクセスすると、 Django API から取得したデータを確認できるはずです。

これまでのところ、Vue3 Django4 のフルスタック開発サンプルは正常に完了しました。この例を通じて、開発環境をセットアップする方法、Django プロジェクトと Vue プロジェクトを作成する方法、ルーティングを構成する方法、ビューとコンポーネントを作成する方法、AJAX を介してバックエンド API からデータを取得する方法を学びました。

概要:
この記事の学習を通じて、Vue3 と Django4 のフルスタック開発を深く理解し、実践的なケースを実践しました。フルスタック開発により、柔軟性と効率が向上し、フロントエンドとバックエンドの両方のニーズに同時に対応できるようになります。この例を通じて読者の皆様が Vue3 Django4 のフルスタック開発について理解を深め、これらの知識と技術を実際のプロジェクトに適用できることを願っています。

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