フルスタック アプリケーションの構築: Vue3+Django4 の実践例

フルスタック アプリケーションの構築: Vue3 Django4 の実践例

はじめに:
モバイル インターネットの発展に伴い、フルスタック開発がますます注目を集めています。 。フルスタック開発エンジニアはフロントエンドとバックエンドの開発を独立して完了できるため、開発効率が向上します。この記事では、最新のVue3とDjango4を使ってフルスタックアプリケーションを構築する方法と実践事例を紹介します。

1. Vue3 フレームワークの紹介
Vue3 は現在最も人気のあるフロントエンド フレームワークの 1 つで、コードをより読みやすく、保守しやすくするために「結合 API」と呼ばれる新しい API スタイルを採用しています。 Vue3 には、テレポート、サスペンス、フラグメントなどのいくつかの新機能も導入されており、開発エクスペリエンスがより豊かになります。

Vue3 アプリケーションを作成する前に、まず Vue3 開発環境をインストールして構成する必要があります。 npm または Yarn を使用して Vue3 をインストールできます:

$ npm install -g @vue/cli

2. Django フレームワークの概要
Django は、効率的で柔軟かつ安全な Python Web 開発フレームワークであり、Web リクエストを処理するためのツールの完全なセットを提供します。 , データベースへのアクセス、フォームの処理などを行うためのコンポーネント。 Django を使用すると、複雑な Web アプリケーションを簡単に構築できます。

最新の Django4 を使用するには、まず Python と Django をインストールする必要があります。 pip コマンドを使用して Django をインストールできます:

$ pip install Django

3. フルスタック アプリケーションを構築する
これで、フルスタック アプリケーションを構築する準備が整いました。フロントエンド フレームワークとして Vue3 を使用し、バックエンド フレームワークとして Django を使用して、単純なタスク管理アプリケーションを構築します。

1. Django プロジェクトの作成
   まず、Django プロジェクトを作成する必要があります。コマンド ライン ウィンドウを開き、次のコマンドを実行します。

$ django-admin startproject task_manager

このコマンドは、現在のディレクトリに task_manager という名前の Django プロジェクトを作成します。

2. Django アプリケーションの作成
   次に、Django プロジェクトでアプリケーションを作成する必要があります。コマンド ラインで次のコマンドを実行します。

$ cd task_manager
$ python manage.py startapp tasks

このコマンドは、Django プロジェクトに task という名前のアプリケーションを作成します。

3. データベース モデルの定義
   Django プロジェクトでは、タスク データを保存するデータベース モデルを定義する必要があります。 task/models.py ファイルを開き、次のコードを追加します。

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

これにより、Task という名前のモデルが定義されます。このモデルには、タスクのタイトル、説明、作成時刻が含まれます。

4. API ビューの作成
   次に、API リクエストを処理するためのビュー関数を作成する必要があります。 task/views.py ファイルを開き、次のコードを追加します。

from rest_framework.decorators import api_view
from rest_framework.response import Response

from .models import Task
from .serializers import TaskSerializer

@api_view(['GET', 'POST'])
def task_list(request):
    if request.method == 'GET':
        tasks = Task.objects.all()
        serializer = TaskSerializer(tasks, many=True)
        return Response(serializer.data)
    elif request.method == 'POST':
        serializer = TaskSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=201)
        return Response(serializer.errors, status=400)

これにより、GET リクエストと POST リクエストを処理するための、tasks_list という名前のビュー関数が定義されます。 GET リクエストはすべてのタスクのリストを返しますが、POST リクエストは新しいタスクの作成に使用されます。

5. API シリアライザーの作成
   Django プロジェクトでは、データをシリアル化および逆シリアル化するためのシリアライザーを作成する必要があります。シリアライザーは、データベース モデルを JSON 形式のデータに変換し、JSON データをデータベース モデルに変換する役割を果たします。タスク ディレクトリに Serializers.py という名前のファイルを作成し、次のコードを追加します:

from rest_framework import serializers

from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ['id', 'title', 'description', 'created_at']

これにより、タスク モデルをシリアル化およびデコードするための TaskSerializer という名前のシリアライザーが定義されます。

6. URL ルーティングの構成
   最後に、API ビューを特定の URL にマップするために URL ルーティングを構成する必要があります。 task_manager/urls.py ファイルを開き、次のコードを追加します。

from django.urls import path

from tasks.views import task_list

urlpatterns = [
    path('api/tasks/', task_list, name='task-list'),
]

これにより、task-list という名前の URL ルートが構成され、task_list ビュー関数が /api/tasks/ パスにマップされます。

4. Vue3 アプリケーションの構築
バックエンドの構築が完了したので、次は Vue3 を使用してフロントエンド ページを構築します。

1. Vue3 プロジェクトの作成
   まず、Vue3 プロジェクトを作成する必要があります。コマンド ラインで次のコマンドを実行します。

$ vue create task-manager

このコマンドは、task-manager という名前の Vue3 プロジェクトを作成します。

2. 依存モジュールのインストール
   プロジェクトを作成した後、いくつかの依存モジュールをインストールする必要があります。コマンド ラインで次のコマンドを実行します。

$ cd task-manager
$ npm install axios

axios は、非同期リクエストを送信するための強力な HTTP クライアントです。 axios を使用して Django バックエンドと通信します。

3. Vue コンポーネントの作成
   次に、タスク リストを表示し、新しいタスクのインターフェイスを作成するために、いくつかの Vue コンポーネントを作成する必要があります。 src/components ディレクトリの TaskList.vue ファイルを開き、次のコードを追加します。

<template>
  <div>
    <h1>Task List</h1>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: []
    }
  },
  mounted() {
    this.fetchTasks()
  },
  methods: {
    async fetchTasks() {
      const response = await this.$http.get('/api/tasks/')
      this.tasks = response.data
    }
  }
}
</script>

これにより、タスク リストを表示するための TaskList という名前の Vue コンポーネントが定義されます。

次に、CreateTask.vue という名前のファイルを作成し、次のコードを追加します。

<template>
  <div>
    <h1>Create Task</h1>
    <input type="text" v-model="title" placeholder="Title">
    <input type="text" v-model="description" placeholder="Description">
    <button @click="createTask">Create</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      description: ''
    }
  },
  methods: {
    async createTask() {
      const data = {
        title: this.title,
        description: this.description
      }
      await this.$http.post('/api/tasks/', data)
      this.title = ''
      this.description = ''
      this.$emit('task-created')
    }
  }
}
</script>

これにより、新しいタスクを作成するための CreateTask という名前の Vue コンポーネントが定義されます。

4. App コンポーネントを変更する
   最後に、App.vue コンポーネントを変更し、TaskList コンポーネントと CreateTask コンポーネントをページに追加する必要があります。 src/App.vue ファイルを開き、次のコードを変更します。

<template>
  <div>
    <task-list @task-created="fetchTasks" />
    <create-task @task-created="fetchTasks" />
  </div>
</template>

<script>
import TaskList from './components/TaskList.vue'
import CreateTask from './components/CreateTask.vue'

export default {
  components: {
    TaskList,
    CreateTask
  },
  methods: {
    fetchTasks() {
      this.$refs.taskList.fetchTasks()
    }
  }
}
</script>

これにより、TaskList コンポーネントと CreateTask コンポーネントがアプリ ページに通常どおり表示され、タスクが完了すると fetchTasks メソッドがトリガーされます。作成した。

5. アプリケーションを実行する
フロントエンドとバックエンドの開発作業が完了したので、テストのためにアプリケーションを実行できます。

1. 启动Django后端
   在命令行中运行以下命令，启动Django后端服务器：

$ cd task_manager
$ python manage.py runserver

2. 启动Vue3前端
   在一个新的命令行窗口中运行以下命令，启动Vue3前端服务器：

$ cd task-manager
$ npm run serve

3. 测试应用
   现在，打开浏览器，访问http://localhost:8080，就可以看到应用的界面了。在任务列表中，可以看到已经创建的任务，点击“Create Task”按钮，可以创建新的任务。

结束语：
通过本文的介绍，我们了解了如何使用Vue3和Django4构建全栈应用的基本步骤。通过实战案例，我们学习了如何在Vue3中发送请求，并在Django中处理请求数据。希望本文对您的全栈开发学习之路有所帮助。

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