基礎到實戰：Vue3+Django4全端開發入門篇-Vue.js-PHP中文網

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

WBOY

發布： 2023-09-08 18:16:41

原創

1863 人瀏覽過

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

基礎到實戰：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和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開發伺服器: