フルスタックアプリケーションの構築：Vue3+Django4プロジェクト開発の詳細説明

フルスタック アプリケーションの構築: Vue3 Django4 プロジェクト開発の詳細説明

1. はじめに
インターネットの急速な発展に伴い、フルスタック開発が行われています。ますます注目を集めています。フルスタック開発者はフロントエンドとバックエンドの両方の開発作業を担当できるため、開発効率とプロジェクト全体の品質が向上します。この記事では、フルスタックアプリケーションの構築方法を詳しく紹介し、開発フレームワークとしてVue3とDjango4を使用して説明します。

2. 技術概要
フルスタック アプリケーションを構築する前に、いくつかの主要な技術概念を理解する必要があります。 Vue3 は、最新の Web アプリケーションの構築に使用できる、シンプルで柔軟かつ効率的な JavaScript フレームワークです。 Django4 は、安全で信頼性の高い Web アプリケーションを迅速に開発するための強力で使いやすい Python Web フレームワークです。

3. フロントエンドの構築

1. 環境準備
   まず、Node.js と npm パッケージ マネージャーをインストールする必要があります。インストールが完了したら、次のコマンドを使用してバージョンを確認します。

node -v
npm -v

2. Vue プロジェクトの作成
   コマンド ラインに次のコマンドを入力して、新しい Vue プロジェクトを作成します。

vue create my-vue-app

プロンプトに従って、プロジェクト名、プロジェクト構成などの基本設定を選択します。

3. Vue Router と Vuex のインストール
   次のコマンドを使用して、Vue Router と Vuex を Vue プロジェクトにインストールします:

cd my-vue-app
npm install vue-router vuex

4. コンポーネントの作成
   src で、そのフォルダーの下に「components」という名前のフォルダーを作成し、その中に HelloWorld.vue という名前のファイルを作成し、次のコードを追加します。

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello, World!"
    };
  }
};
</script>

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

5. Configure routing
   In srcフォルダーの下に router という名前のフォルダーを作成し、その中にindex.js という名前のファイルを作成し、次のコードを追加します。 src フォルダーを作成し、その中にindex.js という名前のファイルを作成し、次のコードを追加します。

import { createRouter, createWebHistory } from "vue-router";

import HelloWorld from "../components/HelloWorld.vue";

const routes = [
  {
    path: "/",
    name: "HelloWorld",
    component: HelloWorld
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

6. コンポーネントをメイン アプリケーション、ルーティング、およびステータス管理に導入します
   src フォルダーの main.js ファイルに次のコードを追加します:

import { createStore } from "vuex";

export default createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

4. バックエンドの構築
7. 
   
環境の準備

まず、Python をインストールする必要があります。 pip パッケージマネージャー。インストールが完了したら、次のコマンドを使用してバージョンを確認します。

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

createApp(App)
  .use(router)
  .use(store)
  .mount("#app");

1. Django プロジェクトの作成
   コマンド ラインに次の手順を入力して、新しい Django プロジェクトを作成します。

python -V
pip -V

2. Django アプリケーションの作成
   プロジェクト ルート ディレクトリにコマンド ラインを入力し、次の手順を入力して mydjangoapp という名前のアプリケーションを作成します。
構成データベース

settings.py ファイルでデータベース接続パラメーターを構成します。

3. django-admin startproject mydjangoapp

   
   
API ビューの書き込み

views.py ファイルの次のコードを次のコードに追加します。 myapp フォルダー:

4. cd mydjangoapp
   ./manage.py startapp myapp

   
   
ルーティングの構成

mydjangoapp フォルダーの urls.py ファイルに次のコードを追加します:

5. DATABASES = {
       "default": {
           "ENGINE": "django.db.backends.sqlite3",
           "NAME": BASE_DIR / "db.sqlite3",
       }
   }

   
   
Start Django 開発サーバー

プロジェクト ルート ディレクトリで次のコマンドを実行して、Django 開発サーバーを起動します:

6. from django.http import JsonResponse
   
   def hello_world(request):
       return JsonResponse({"message": "Hello, World!"})

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

プロキシ構成を作成する
7. Vue プロジェクトのルートで、ディレクトリに vue.config.js という名前のファイルを作成し、次のコードを追加します:
   

from django.urls import path
from myapp.views import hello_world

urlpatterns = [
    path("api/hello", hello_world),
]

Call API

HelloWorld.vue コンポーネントに次のコードを追加します:

1. ./manage.py runserver

   
   6. プロジェクトを実行します
コマンド ラインに Vue プロジェクトのルート ディレクトリを入力し、次の手順を実行してフロントエンド開発サーバー:

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

別のコマンド ライン ウィンドウに Django プロジェクトを入力します。ルート ディレクトリで次のコマンドを実行して、バックエンド開発サーバーを起動します。

2. <template>
     <div>
       <h1>{{ msg }}</h1>
       <h2>Count: {{ count }}</h2>
       <button @click="increment">Increment</button>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         msg: "",
         count: 0
       };
     },
     created() {
       fetch("/api/hello")
         .then(response => response.json())
         .then(data => {
           this.msg = data.message;
         });
     },
     methods: {
       increment() {
         this.$store.commit("increment");
       }
     },
     computed: {
       count() {
         return this.$store.state.count;
       }
     }
   };
   </script>

   
   今、開きます。ブラウザで http://localhost:8080 にアクセスすると、「Hello, World!」を含むメッセージと「Count: 0」ページが表示されます。 「増加」ボタンをクリックすると、「カウント」が自動的に 1 ずつ増加します。

7. 概要

この記事の詳細な紹介を通じて、フロントエンド フレームワークとして Vue3 を使用し、バックエンド フレームワークとして Django4 を使用して、フルスタック アプリケーションを構築する方法を学びました。コード例を通じて、フロント エンドとリア エンドの共同デバッグをデモンストレーションしました。フルスタック開発は開発効率やプロジェクト品質の向上に大きな意味を持ちますので、この記事が参考になれば幸いです。フルスタック開発への道でのさらなる成功を祈っています。

以上がフルスタックアプリケーションの構築：Vue3+Django4プロジェクト開発の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。