実践演習：Vue3+Django4 フルスタック開発演習

実践ドリル: Vue3 Django4 フルスタック開発演習

インターネットの急速な発展に伴い、フロントエンドとバックエンドを分離する開発モデルが主流になりました。現代のWeb開発の主流。 Vue と Django は 2 つの人気のある開発フレームワークとして、フロントエンドとバックエンドの開発で重要な役割を果たします。この記事では、フルスタック開発に Vue3 と Django4 を使用する方法を紹介し、実際の例を通じてその実践的なプロセスを示します。

1. プロジェクト計画

開発を始める前に、まずプロジェクト計画を行う必要があります。ユーザーがログインし、タスクを作成し、タスク リストを表示し、タスクのステータスを更新できるシンプルなタスク管理システムを作成します。このシステムは、フロントエンド フレームワークとして Vue3、バックエンド フレームワークとして Django4 を使用し、フロントエンドとバックエンドの通信に API を使用します。

2. フロントエンド開発

1. Vue3 プロジェクトの作成
   まず、Vue CLI を使用して新しい Vue3 プロジェクトを作成します。ターミナルで次のコマンドを実行します。

   vue create frontend

   プロンプトに従って必要な構成項目を選択し、プロジェクトが作成されるまで待ちます。

2. ルーティングとページ コンポーネントの設定
   src ディレクトリに router.js ファイルを作成し、ルーティングを設定します。ログイン ページ、タスク リスト ページ、タスク詳細ページの 3 つのページがあります。 router.js に次のコードを追加します。

   import { createRouter, createWebHistory } from 'vue-router'
   import Login from './views/Login.vue'
   import TaskList from './views/TaskList.vue'
   import TaskDetail from './views/TaskDetail.vue'
   
   const routes = [
     {
    path: '/login',
    name: 'Login',
    component: Login
     },
     {
    path: '/taskList',
    name: 'TaskList',
    component: TaskList
     },
     {
    path: '/taskDetail/:id',
    name: 'TaskDetail',
    component: TaskDetail
     }
   ]
   
   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes
   })
   
   export default router

3. ページ コンポーネントの作成
   src/views ディレクトリに Login.vue、## を作成します。 #TaskList.vue および TaskDetail.vue の 3 つのページ コンポーネントと、関連する HTML およびロジックを記述します。特定のコードはここには示されていません。読者は必要に応じて関連するコンポーネントを自分で作成できます。
API リクエストの送信
4. API リクエストを送信するための
   api.js ファイルを src ディレクトリに作成します。ここでは、Axios ライブラリを使用して HTTP リクエストを送信します。特定の API リクエスト コードは、バックエンド API の設計に従って記述できます。
Vuex の統合
5. src ディレクトリに
   store.js ファイルを作成し、Vuex を構成します。ユーザー情報とタスクリストのデータをストアに保存し、ミューテーションやアクションを通じてこのデータを変更および取得します。

この時点で、フロントエンドの開発作業は完了です。

npm runserve コマンドを実行して開発サーバーを起動し、ブラウザで http://localhost:8080 にアクセスしてページを表示できます。

3. バックエンド開発

1. Django4 プロジェクトの作成

   ターミナルで次のコマンドを実行して、新しい Django4 プロジェクトを作成します:
   

   django-admin startproject backend

2. アプリケーションの作成

   プロジェクト ディレクトリに移動し、次のコマンドを実行して新しいアプリケーションを作成します。
   

   cd backend
   python manage.py startapp tasks

3. データベースとモデルを設定します

   プロジェクト設定 .py でデータベース情報を構成し、タスク アプリケーションの models.py で必要なモデルを作成します。たとえば、タスク モデルは次のように定義できます。
   

   from django.db import models
   
   class Task(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    status = models.CharField(max_length=20)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

API ビューの作成
4. タスク アプリケーションの views.py に API ビューを作成し、関連するルートを定義します。 Django の REST フレームワークを使用すると、API ビューとルートを簡単に作成できます。
   
CORS の構成
5. フロントエンドとバックエンドは異なるドメイン名またはポートで実行されるため、クロスドメイン リソース共有 (CORS) を構成する必要があります。クロスドメインリクエストは、settings.py を設定することで実装できます。
   

4. フロントエンドとバックエンドの統合

1. バックエンド サーバーの実行

   ターミナルで次のコマンドを実行して、 Django 開発サーバー:
   

   python manage.py runserver

フロントエンド API リクエストの構成
2. フロントエンド
   api.js ファイルで API リクエストのベース URL を構成します。バックエンドサーバーのアドレスとポートを指します。
フロントエンド ルーティングの構成
3. 実際のニーズに応じて、フロントエンド
   router.js ファイルでルーティングを構成します。

これで、フロントエンドとバックエンドの統合作業が完了しました。フロントエンドの URL にアクセスすることで、アプリケーションの機能をテストし、バックエンドと通信できます。

5. 概要

この記事では、フルスタック開発に Vue3 と Django4 を使用する方法を紹介し、実際の例を通じてその実践的なプロセスを示します。フロントエンドとバックエンドの分離開発モデルにより、強力な Web アプリケーションをより効率的に開発および保守できます。この記事が初心者にインスピレーションを与え、実際の開発に役立つことを願っています。不備がある場合は、修正してください。

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