快速入門：Vue3+Django4全端開發入門指南

快速入門：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 id="message">{{ 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中文網其他相關文章！