技術詳解：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全新項目構建的詳細內容，更多請關注www.92cms.cn其它相關文章！
