技术详解：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的基本用法，并能够将它们应用到实际的项目中。
