建構全端應用：Vue3+Django4實戰案例

建構全端應用：Vue3 Django4實戰案例

引言：
隨著行動互聯網的發展，全端開發越來越受到關注。全端開發工程師能夠獨立完成前後端開發，提升開發效率。在這篇文章中，我們將介紹如何使用最新的Vue3和Django4建立全端應用，並提供一個實戰案例。

一、Vue3框架簡介
Vue3是目前最受歡迎的前端框架之一，它採用了一種稱為「組合式API」的全新API風格，使得程式碼更加可讀、可維護。 Vue3也引進了一些新特性，如Teleport、Suspense、Fragment等，讓開發體驗更加豐富。

在編寫Vue3應用程式之前，我們首先需要安裝並設定Vue3的開發環境。我們可以使用npm或yarn來安裝Vue3：

$ npm install -g @vue/cli

二、Django框架簡介
Django是一個高效、靈活和安全的Python Web開發框架，它提供了一整套用於處理Web請求、存取資料庫、處理表單等的元件。使用Django可以輕鬆建立複雜的Web應用程式。

為了使用最新的Django4，我們首先需要安裝Python和Django。我們可以使用pip指令來安裝Django：

$ pip install Django

三、建置全端應用程式
現在，我們已經準備好建置一個全端應用程式了。我們將使用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專案中建立一個名為tasks的應用程式。

3. 定義資料庫模型
   在Django專案中，我們需要定義資料庫模型來儲存任務資料。開啟tasks/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請求的視圖函數。開啟tasks/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)

這將定義一個名為task_list的視圖函數，用於處理GET和POST請求。 GET請求返回所有任務列表，而POST請求用於建立新的任務。

5. 建立API序列化器
   在Django專案中，我們需要建立序列化器來進行資料的序列化和反序列化。序列化器負責將資料庫模型轉換為JSON格式的數據，並將JSON數據轉換為資料庫模型。在tasks目錄下建立一個名為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的序列化器，用於對Task模型進行序列化和反序列化。

6. 設定URL路由
   最後，我們需要設定URL路由，將API檢視對應到特定的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/路徑。

四、建構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元件在App頁面中正常顯示，並且當建立任務後會觸發fetchTasks方法。

五、運行應用程式
現在，我們已經完成了前後端的開發工作，可以執行應用程式進行測試了。

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中文網其他相關文章！