技术详解：Vue3+Django4全新项目构建

百变鹏仔 3周前 (09-25) #VUE

文章标签详解

引言:
当下，前后端分离的开发模式已经成为企业开发的必备技能。Vue和Django是当下非常流行的前端和后端框架，它们的结合可以大幅提高开发效率和代码质量。本文将详细介绍如何构建一个全新项目，使用Vue3作为前端框架，Django4作为后端框架，为读者提供代码示例和详尽的技术讲解。

一、环境搭建

前端环境搭建
首先，确保你已经安装了Node.js环境。然后，使用以下命令安装Vue CLI 4.x:

npm install -g @vue/cli

使用以下命令创建一个新的Vue3项目：

立即学习“前端免费学习笔记（深入）”；

vue create project-name

在项目初始化过程中，需要选择Vue3作为版本。初始化完成后，进入项目目录，使用以下命令运行项目：

cd project-namenpm run serve

后端环境搭建
首先，确保你已经安装了Python环境，推荐使用Python 3.9. 然后，使用以下命令安装Django 4.x:

pip install Django

创建一个新的Django项目：

django-admin startproject project-name

进入项目目录，使用以下命令运行项目：

cd project-namepython 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 serializersclass ExampleSerializer(serializers.Serializer):    id = serializers.IntegerField()    name = serializers.CharField(max_length=100)

接下来，创建一个新的文件views.py，编写以下代码：

from rest_framework.decorators import api_viewfrom rest_framework.response import Responsefrom .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 pathfrom . import viewsurlpatterns = [    path('example/', views.example),]

这样，当前端发送GET请求到/api/example时，后端将返回示例数据。

结语:
通过本文的详细讲解，读者将了解到如何使用Vue3作为前端框架，Django4作为后端框架进行全新项目的构建。我们讲解了环境搭建、前后端联调以及前后端交互的过程，并提供了相应的代码示例。希望读者能够通过本文掌握Vue和Django的基本用法，并能够将它们应用到实际的项目中。

文章推荐

技术详解：Vue3+Django4全新项目构建

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器