快速入門：Vue3 Django4全端開發入門指南
隨著網路的快速發展，全端開發成為了近年來最熱門的技術趨勢之一。而在全端開發中，結合前端框架和後端框架進行開發是一種常見的方式。本文將帶領大家進入Vue3 Django4全端開發的世界，並提供初學者入門指南。
Vue3是目前最新的Vue.js框架版本，它具有更高的效能、更好的開發體驗和更多的新功能。而Django是一個高級的Python Web框架，它提供了豐富的功能和可擴展性。將它們結合在一起，可以創建出強大而現代化的Web應用程式。
在開始之前，確保你已經正確安裝了Node.js、Vue CLI和Python。安裝完成後，我們可以開始建立我們的專案了。首先，使用Vue CLI建立一個Vue3項目，打開終端機並執行以下命令：
vue create myproject
在建立過程中，你可以選擇使用Vue3預設選項，這將提供給你一個包含Vue Router和Vuex的現成配置。創建完成後，我們進入專案目錄，並安裝Vue和Django的依賴套件：
cd myproject npm install vue@next pip install Django
接下來，我們需要在專案中建立Django應用，透過以下命令來建立：
django-admin startproject backend cd backend python manage.py startapp api
創建完成後，我們可以開始寫程式碼。首先，我們需要在Django的settings.py檔案中新增Vue的靜態檔案路徑，找到STATIC_URL並在其下面新增以下程式碼：
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'frontend/dist'),
]然後，我們建立一個新的urls.py文件，用於處理和Vue前端的請求。此檔案位於api目錄下，編寫以下程式碼：
from django.urls import path
from . import views
urlpatterns = [
path('api/', views.api),
]接下來，我們編寫views.py檔案中的邏輯程式碼，用於處理Vue前端的請求。寫以下程式碼：
from django.shortcuts import render
from django.http import JsonResponse
def api(request):
data = {
'message': 'Hello from Django API!'
}
return JsonResponse(data)在這個簡單的範例中，我們只是回傳了一個包含簡單訊息的JSON回應。在實際的應用中，你可以寫一個更複雜的邏輯來處理不同的請求。
接下來，我們需要用Vue寫前端程式碼。進入到專案目錄並安裝Vue Router和Axios：
cd frontend npm install vue-router@next axios
然後我們打開src/router/index.js文件，並添加以下程式碼：
import { createWebHistory, createRouter } from 'vue-router'
import Home from '../views/Home.vue'
import API from '../views/API.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/api',
name: 'API',
component: API
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router在這個範例中，我們定義了兩個路由：'/'對應Home元件，'/api'對應API元件。然後，我們在src/views目錄下建立Home.vue和API.vue元件，這裡我們只需要簡單的展示一些文字資訊。
現在我們可以在API.vue元件中傳送請求，取得Django API的資料。使用以下程式碼替換掉原有的內容：
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
message: ''
}
},
mounted() {
axios.get('/api/')
.then(response => {
this.message = response.data.message
})
.catch(error => {
console.error(error)
})
}
}
</script>在這個範例中，我們在元件的mounted鉤子函數中發送了一個GET請求，獲取到了Django API返回的數據，並將數據展示到頁面上。
現在我們已經完成了一個使用Vue3和Django4的基本全端應用。你可以執行以下指令來啟動開發伺服器：
cd .. python manage.py runserver
然後在瀏覽器中開啟http://localhost:8000/，你會看到一個包含Django API資料的頁面。
透過本文的指導，我們帶領大家完成了Vue3 Django4全端開發的入門指南。希望對初學者有所幫助，同時也希望你能夠進一步深入學習和探索全端開發的領域。加油！
以上是快速入門：Vue3+Django4全端開發入門指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
