基礎到實戰：Vue3 Django4全端開發入門篇
概述：
全端開發是指一個開發者可以同時處理前端和後端的工作，這在現代的Web開發中變得越來越重要。本文將介紹如何使用Vue3和Django4進行全端開發，並提供一些程式碼範例來幫助讀者入門。
安裝和設定Vue3
首先，我們需要安裝Vue CLI來建立和管理我們的Vue專案。在命令列中執行以下命令來安裝Vue CLI:
npm install -g @vue/cli
安裝完成後，使用下列命令建立新的Vue專案:
vue create my-project
根據提示進行選擇，選擇預設選項即可。
建立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>這是一個簡單的元件，包含一個標題和一個按鈕，可以在點擊按鈕時改變標題的內容。
配置Django4
接下來，我們需要安裝Django並建立新的Django專案。在命令列中執行以下命令來安裝Django:
pip install django==4.0.0
安裝完成後，使用以下命令建立新的Django專案:
django-admin startproject myproject
這將在目前目錄下建立一個名為"myproject "的新Django專案。
建立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/'進行關聯。
在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中文網其他相關文章！
