实践经验分享：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的组件文件，并添加以下内容：
<template>
<div class="hello">
<h1>{{ message }}</h1>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'HelloWorld',
setup() {
const message = ref('Hello, Vue3!')
return {
message
}
}
}
</script>
<style scoped>
h1 {
color: red;
}
</style>这个组件显示了一个红色的标题，标题内容通过ref定义的响应式变量设置。
为了在页面中使用这个组件，我们需要在vue_project/src/App.vue中引入它。首先，删除原有的内容，然后添加以下代码：
<template>
<div id="app">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Arial', sans-serif;
}
</style>这里我们导入了刚才创建的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目录下执行以下命令：
$ npm install $ npm run serve
在django_project目录下执行以下命令：
$ python manage.py runserver
现在，打开浏览器并访问http://localhost:8080，如果一切顺利，你应该能在控制台看到后端API返回的数据。
总结：
本文介绍了如何使用Vue3和Django4搭建一个完整的全栈项目，并分享了一些实践经验和代码示例。通过这种全栈开发方式，我们可以更加高效地构建具有前后端分离的Web应用程序。希望本文能帮助到正在学习全栈开发的开发者们。
