技術詳解：Vue3+Django4全新專案構建-Vue.js-PHP中文網

技術詳解：Vue3+Django4全新專案構建

WBOY

發布： 2023-09-08 08:51:27

原創

1204 人瀏覽過

技術詳解：Vue3+Django4全新專案構建

技術詳解：Vue3 Django4全新專案建置

#引言:
當下，前後端分離的開發模式已成為企業開發的必備技能。 Vue和Django是當下非常流行的前端和後端框架，它們的結合可以大幅提高開發效率和程式碼品質。本文將詳細介紹如何建構一個全新項目，使用Vue3作為前端框架，Django4作為後端框架，為讀者提供程式碼範例和詳盡的技術講解。

一、環境建置

前端環境建置
首先，確保你已經安裝了Node.js環境。然後，使用下列指令安裝Vue CLI 4.x:

npm install -g @vue/cli

登入後複製

使用下列指令建立一個新的Vue3專案：

vue create project-name

登入後複製

在專案初始化過程中，需要選擇Vue3作為版本。初始化完成後，進入專案目錄，使用以下命令執行專案：

cd project-name
npm run serve

登入後複製

後端環境建立
首先，確保您已經安裝了Python環境，建議使用Python 3.9. 然後，使用以下指令安裝Django 4.x:

pip install Django

登入後複製

建立一個新的Django專案：

django-admin startproject project-name

登入後複製

進入專案目錄，使用下列指令執行專案：

cd project-name
python manage.py runserver

登入後複製

二、前後端聯調

前端配置
在Vue3專案的根目錄下，找到vue.config.js文件，如果沒有則手動建立。在該檔案中加入以下程式碼：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000', // 后端地址
        ws: true,
        changeOrigin: true
      }
    }
  }
}

登入後複製

這段程式碼配置了代理伺服器，將前端的API請求轉送到後端的位址。

後端配置
在Django專案的根目錄下，找到settings.py文件，修改ALLOWED_HOSTS和INSTALLED_APPS如下：

ALLOWED_HOSTS = ['localhost', '127.0.0.1']

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware',
    ...
]

登入後複製

然後，在settings. py檔案的末尾添加以下程式碼：

CORS_ALLOW_ALL_ORIGINS = True

登入後複製

這段程式碼配置了允許跨域請求。

三、前後端互動

前端請求
在Vue3專案中，透過使用axios函式庫來進行API請求。首先，使用以下命令安裝axios：

npm install axios

登入後複製

然後，在需要呼叫API的元件中，引入axios並發送請求：

import axios from 'axios'

axios.get('/api/example')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

登入後複製

#後端回應

在Django中，使用Django Rest Framework (DRF)來建立API。首先，使用以下指令安裝DRF:

pip install djangorestframework

登入後複製

然後，在Django的app目錄下，建立一個新的檔案serializers.py，寫以下程式碼：

from rest_framework import serializers

class ExampleSerializer(serializers.Serializer):
    id = serializers.IntegerField()
    name = serializers.CharField(max_length=100)

登入後複製

接下來，建立一個新的文件views.py，寫以下程式碼：

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

@api_view(['GET'])
def example(request):
    data = [
        {'id': 1, 'name': 'example1'},
        {'id': 2, 'name': 'example2'},
    ]
    serializer = ExampleSerializer(data, many=True)
    return Response(serializer.data)

登入後複製

最後，在Django的專案目錄下，找到urls.py文件，加入以下程式碼：###

from django.urls import path
from . import views

urlpatterns = [
    path('example/', views.example),
]

登入後複製

###這樣，當前端發送GET請求到/api/example時，後端將傳回範例資料。 ######結語:###透過本文的詳細講解，讀者將了解如何使用Vue3作為前端框架，Django4作為後端框架進行全新專案的建構。我們講解了環境搭建、前後端聯調以及前後端互動的過程，並提供了相應的程式碼範例。希望讀者能夠透過本文掌握Vue和Django的基本用法，並且能夠將它們應用到實際的專案中。 ###

以上是技術詳解：Vue3+Django4全新專案構建的詳細內容。更多資訊請關注PHP中文網其他相關文章！