基礎到實戰：Vue3+Django4全端開發入門篇

基礎到實戰：Vue3 Django4全端開發入門篇

概述：
全端開發是指一個開發者可以同時處理前端和後端的工作，這在現代的Web開發中變得越來越重要。本文將介紹如何使用Vue3和Django4進行全端開發，並提供一些程式碼範例來幫助讀者入門。

1. 安裝和設定Vue3
   首先，我們需要安裝Vue CLI來建立和管理我們的Vue專案。在命令列中執行以下命令來安裝Vue CLI:

   npm install -g @vue/cli

   安裝完成後，使用下列命令建立新的Vue專案:

   vue create my-project

   根據提示進行選擇，選擇預設選項即可。

2. 建立Vue元件
   在Vue專案中，我們可以使用元件來建立使用者介面。在Vue專案的src目錄中，建立一個名為"components"的資料夾，並在其中建立一個名為"HelloWorld.vue"的檔案。在該文件中，我們可以編寫我們的元件程式碼，例如：

   <template>
     <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      message: 'Hello World!'
    }
     },
     methods: {
    changeMessage() {
      this.message = 'New Message!'
    }
     }
   }
   </script>

   這是一個簡單的元件，包含一個標題和一個按鈕，可以在點擊按鈕時改變標題的內容。

3. 配置Django4
   接下來，我們需要安裝Django並建立新的Django專案。在命令列中執行以下命令來安裝Django:

   pip install django==4.0.0

   安裝完成後，使用以下命令建立新的Django專案:

   django-admin startproject myproject

   這將在目前目錄下建立一個名為"myproject "的新Django專案。

4. 建立Django視圖和URL
   在Django專案的根目錄下，開啟settings.py文件，並將以下內容新增至INSTALLED_APPS設定:

   INSTALLED_APPS = [
    ...
    'rest_framework',
    'myapp',  // myapp是我们将要创建的应用的名称，根据需要修改
    ...
   ]

   然後，在settings.py檔案的最後加入以下內容:

   REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
   }

   這將設定Django使用REST框架來建立API。

接下來，在Django專案的根目錄下建立一個名為"myapp"的應用程式:

python manage.py startapp myapp

在myapp目錄下，開啟views.py文件，並且添加以下內容:

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def hello_world(request):
    return Response({'message': 'Hello World!'})

這是一個簡單的視圖函數，當我們訪問該URL時，將傳回一個包含"Hello World!"的JSON回應。

接下來，在myproject目錄下，打開urls.py文件，並添加以下內容:

from django.urls import path
from myapp.views import hello_world

urlpatterns = [
    path('api/hello/', hello_world),
]

這將將我們的視圖函數與URL路徑'/api/hello/'進行關聯。

5. 運行專案
   現在，我們已經完成了Vue和Django的基本設定。接下來我們需要將Vue應用程式和Django專案連接起來。

在Vue專案的根目錄下，開啟"main.js"文件，並新增以下內容:

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$http = axios
app.mount('#app')

這將全域設定Vue應用程式使用axios作為HTTP客戶端。

在Vue專案的根目錄下，開啟"App.vue"文件，並新增以下內容:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="getMessage">Get Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    getMessage() {
      this.$http.get('http://localhost:8000/api/hello/')
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

這將在點擊按鈕時向Django的視圖發送請求，並將返回的訊息顯示在頁面上。

現在，我們已經完成了所有設定。在Vue專案的根目錄下，執行以下命令來啟動Vue開發伺服器:

npm run serve

在Django專案的根目錄下，執行以下命令來啟動Django開發伺服器:

python manage.py runserver

現在，在瀏覽器中造訪"http://localhost:8080"，你將看到一個包含"Hello World!"按鈕的頁面。當你點擊按鈕時，頁面將顯示"Hello World!"。

這就是用Vue3和Django4進行全端開發的入門指南。透過這篇文章中的範例程式碼，你可以學習如何建立一個基本的Vue和Django應用，並將它們連接在一起。希望這對你的全端開發之旅有所幫助！

以上是基礎到實戰：Vue3+Django4全端開發入門篇的詳細內容。更多資訊請關注PHP中文網其他相關文章！