当前位置：首页 > 文章列表 > 文章 > 前端 > 实践经验分享：Vue3+Django4全栈项目开发指南

实践经验分享：Vue3+Django4全栈项目开发指南

2023-09-28 12:40:54 0浏览收藏

golang学习网今天将给大家带来《实践经验分享：Vue3+Django4全栈项目开发指南》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

引言：
在当今互联网高度发达的时代，全栈开发已成为越来越多开发者关注和学习的方向。Vue框架作为目前最流行的前端框架之一，而Django作为强大的Python后端框架，它们的结合可以为我们提供一种全面的全栈开发体验。本文将介绍如何使用Vue3和Django4搭建一个完整的全栈项目，并分享一些开发经验和代码示例。

一、环境准备
在开始项目之前，需要做好环境准备工作。确保你已经安装了以下软件：

Node.js和npm：用于安装和管理前端依赖。
Python和pip：用于安装和管理后端依赖。
Vue CLI：用于创建Vue项目的命令行工具。
Django：用于创建和管理后端项目。

二、创建Vue3项目
首先，我们使用Vue CLI创建一个Vue3项目。打开命令行界面，执行以下命令：

$ vue create vue_project

按照命令行提示，选择自己需要的配置，等待项目创建完成。

三、创建Django项目
接下来，我们使用Django创建后端项目。在命令行界面执行以下命令：

$ django-admin startproject django_project

这将在当前目录下创建一个名为django_project的文件夹，并生成一个项目的骨架。

四、配置前后端连接
在这一步，我们需要配置前后端连接，以使得前后端可以相互通信。首先，在vue_project/src目录下创建一个文件.env.development，并添加以下内容：

VUE_APP_BACKEND_URL=http://localhost:8000

这里的http://localhost:8000是Django后端运行的地址。

接下来，打开vue_project/src/main.js文件，添加以下代码到createApp之前：

import axios from 'axios'
axios.defaults.baseURL = process.env.VUE_APP_BACKEND_URL

这个代码段设置了axios的默认基础URL为我们刚才配置的后端地址。

五、开发前端页面
现在，我们可以开始开发前端页面了。Vue3的语法与Vue2略有不同，但大体上相似。Vue3提供了更加强大的组合式API，可以更好地管理代码逻辑。下面是一个简单的例子。

首先，在vue_project/src/components目录下创建一个名为HelloWorld.vue的组件文件，并添加以下内容：

这个组件显示了一个红色的标题，标题内容通过ref定义的响应式变量设置。

为了在页面中使用这个组件，我们需要在vue_project/src/App.vue中引入它。首先，删除原有的内容，然后添加以下代码：

这里我们导入了刚才创建的HelloWorld.vue组件，并在页面中引用它。

六、开发后端API
在Django项目中，我们需要创建API来提供后端服务。以创建一个简单的用户API为例。

首先，在django_project目录下执行以下命令，创建一个名为users的应用：

$ python manage.py startapp users

在users目录下创建一个名为views.py的文件，并添加以下代码：

from django.http import JsonResponse

def get_users(request):
    users = [
        {"id": 1, "name": "Alice"},
        {"id": 2, "name": "Bob"},
        {"id": 3, "name": "Charlie"}
    ]
    return JsonResponse(users, safe=False)

这个简单的视图函数返回一个带有用户信息的JSON响应。

接下来，打开django_project/django_project/urls.py文件，并添加以下代码：

from django.urls import path
from users.views import get_users

urlpatterns = [
    path('api/users', get_users),
]

这个代码段将get_users视图函数映射到路径/api/users上。

七、前后端通信
为了让前端可以访问后端API，我们需要使用axios发送HTTP请求。回到vue_project/src/components/HelloWorld.vue文件，在setup函数中添加以下代码：

import axios from 'axios'
export default {
  name: 'HelloWorld',
  setup() {
    const message = ref('Hello, Vue3!')
    axios.get('/api/users').then((response) => {
      console.log(response.data)
    })
    return {
      message
    }
  }
}

这个代码段使用axios发送一个GET请求到/api/users，并打印返回的数据。

八、运行项目
最后，我们只需要将前后端项目分别运行起来就可以了。

在vue_project目录下执行以下命令：