フルスタック アプリケーションの構築: 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 を使用して、単純なタスク管理アプリケーションを構築します。
$ django-admin startproject task_manager
このコマンドは、現在のディレクトリに task_manager という名前の Django プロジェクトを作成します。
$ cd task_manager $ python manage.py startapp tasks
このコマンドは、Django プロジェクトに task という名前のアプリケーションを作成します。
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 という名前のモデルが定義されます。このモデルには、タスクのタイトル、説明、作成時刻が含まれます。
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 リクエストは新しいタスクの作成に使用されます。
from rest_framework import serializers
from .models import Task
class TaskSerializer(serializers.ModelSerializer):
class Meta:
model = Task
fields = ['id', 'title', 'description', 'created_at']これにより、タスク モデルをシリアル化およびデコードするための TaskSerializer という名前のシリアライザーが定義されます。
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 を使用してフロントエンド ページを構築します。
$ vue create task-manager
このコマンドは、task-manager という名前の Vue3 プロジェクトを作成します。
$ cd task-manager $ npm install axios
axios は、非同期リクエストを送信するための強力な HTTP クライアントです。 axios を使用して Django バックエンドと通信します。
<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 コンポーネントが定義されます。
<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. アプリケーションを実行する
フロントエンドとバックエンドの開発作業が完了したので、テストのためにアプリケーションを実行できます。
$ cd task_manager $ python manage.py runserver
$ cd task-manager $ npm run serve
结束语：
通过本文的介绍，我们了解了如何使用Vue3和Django4构建全栈应用的基本步骤。通过实战案例，我们学习了如何在Vue3中发送请求，并在Django中处理请求数据。希望本文对您的全栈开发学习之路有所帮助。
以上がフルスタック アプリケーションの構築: Vue3+Django4 の実践例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
