技术详解：Vue3+Django4全新项目构建-Vue.js-PHP中文网

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

WBOY

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

原创

1203 人浏览过

技术详解：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中文网其他相关文章！