實作經驗分享：Vue3+Django4全端專案開發指南

實務經驗分享：Vue3 Django4全端專案開發指南

引言：
在當今網路高度發展的時代，全端開發已變得越來越多開發者關注和學習的方向。 Vue框架作為目前最受歡迎的前端框架之一，而Django作為強大的Python後端框架，它們的結合可以為我們提供一種全面的全端開發體驗。本文將介紹如何使用Vue3和Django4建立完整的全端項目，並分享一些開發經驗和程式碼範例。

一、環境準備
在開始專案之前，需要做好環境準備。確保你已經安裝了以下軟體：

1. Node.js和npm：用於安裝和管理前端相依性。
2. Python和pip：用於安裝和管理後端相依性。
3. Vue CLI：用於建立Vue專案的命令列工具。
4. Django：用於建立和管理後端專案。

二、建立Vue3專案
首先，我們使用Vue CLI建立一個Vue3專案。開啟命令列介面，執行以下命令：

$ vue create vue_project

依照命令列提示，選擇自己需要的配置，等待專案建立完成。

三、創建Django專案
接下來，我們使用Django建立後端專案。在命令列介面執行以下命令：

$ django-admin startproject django_project

這將在目前目錄下建立一個名為django_project的資料夾，並產生一個專案的骨架。

四、設定前後端連接
在這一步，我們需要設定前後端連接，以使得前後端可以相互通訊。首先，在vue_project/src目錄下建立一個檔案.env.development，並加入以下內容：

VUE_APP_BACKEND_URL=http://localhost:8000

這裡的http://localhost:8000是Django後端運行的位址。

接下來，打開vue_project/src/main.js文件，加入以下程式碼到createApp之前：

import axios from 'axios'
axios.defaults.baseURL = process.env.VUE_APP_BACKEND_URL

這個程式碼片段設定了axios的預設基礎URL為我們剛才配置的後端位址。

五、開發前端頁面
現在，我們可以開始開發前端頁面了。 Vue3的語法與Vue2略有不同，但大致相似。 Vue3提供了更強大的組合式API，可以更好地管理程式碼邏輯。下面是一個簡單的例子。

首先，在vue_project/src/components目錄下建立一個名為HelloWorld.vue的元件文件，並新增以下內容：

<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue3!')
    return {
      message
    }
  }
}
</script>

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

這個元件顯示了一個紅色的標題，標題內容透過ref定義的響應式變數設定。

為了在頁面中使用這個元件，我們需要在vue_project/src/App.vue中引入它。首先，刪除原有的內容，然後新增以下程式碼：

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Arial', sans-serif;
}
</style>

這裡我們匯入了剛才建立的HelloWorld.vue元件，並在頁面中引用它。

六、開發後端API
在Django專案中，我們需要建立API來提供後端服務。以建立一個簡單的使用者API為例。

首先，在django_project目錄下執行以下指令，建立一個名為users的應用程式：

$ python manage.py startapp users

在users目錄下建立一個名為views. py的文件，並加入以下程式碼：

from django.http import JsonResponse

def get_users(request):
    users = [
        {"id": 1, "name": "Alice"},
        {"id": 2, "name": "Bob"},
        {"id": 3, "name": "Charlie"}
    ]
    return JsonResponse(users, safe=False)

這個簡單的視圖函數傳回一個帶有使用者資訊的JSON回應。

接下來，打開django_project/django_project/urls.py文件，並添加以下程式碼：

from django.urls import path
from users.views import get_users

urlpatterns = [
    path('api/users', get_users),
]

這個程式碼段將get_users視圖函數對應到路徑 /api/users上。

七、前後端通訊
為了讓前端可以存取後端API，我們需要使用axios發送HTTP請求。回到vue_project/src/components/HelloWorld.vue文件，在setup函數中加入以下程式碼：

import axios from 'axios'
export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue3!')
    axios.get('/api/users').then((response) => {
      console.log(response.data)
    })
    return {
      message
    }
  }
}

這個程式碼片段使用axios發送一個GET請求到/api/ users，並列印傳回的資料。

八、運行專案
最後，我們只需要將前後端專案分別運行起來就可以了。

在vue_project目錄下執行以下命令：

$ npm install
$ npm run serve

在django_project目錄下執行以下命令：

$ python manage.py runserver

現在，打開瀏覽器並訪問http:// localhost:8080，如果一切順利，你應該可以在控制台看到後端API回傳的資料。

總結：
本文介紹如何使用Vue3和Django4建立一個完整的全端項目，並分享了一些實務經驗和程式碼範例。透過這種全端開發方式，我們可以更有效率地建立具有前後端分離的Web應用程式。希望本文能幫助正在學習全端開發的開發者們。

以上是實作經驗分享：Vue3+Django4全端專案開發指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！