實務經驗分享：Vue3 Django4全端專案開發指南
引言：
在當今網路高度發展的時代，全端開發已變得越來越多開發者關注和學習的方向。 Vue框架作為目前最受歡迎的前端框架之一，而Django作為強大的Python後端框架，它們的結合可以為我們提供一種全面的全端開發體驗。本文將介紹如何使用Vue3和Django4建立完整的全端項目，並分享一些開發經驗和程式碼範例。
一、環境準備
在開始專案之前，需要做好環境準備。確保你已經安裝了以下軟體：
二、建立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中文網其他相關文章！
