1. 介绍
Vue 和 Django 是两个非常流行的框架，用于前端和后端应用程序的开发。Vue 是一个用于构建用户界面的渐进式框架，而 Django 是一个高效的 Python Web 框架，用于快速开发 Web 应用。在本文中，我们将介绍如何利用 Vue3 和 Django4 构建全栈 Web 应用程序。
2. 环境设置
2.1 Vue3 环境设置
首先，我们需要安装最新版本的 Node.js，它是 Vue 的运行环境。接着，使用以下命令安装和创建 Vue 项目：
npm install -g @vue/cli
vue create my-project
这将创建一个名为“my-project”的 Vue 项目。
2.2 Django4 环境设置
接下来，我们需要安装 Django4。确保您运行的是 Python3：
pip install Django使用以下命令创建 Django 项目：
django-admin startproject mysite这将创建名为“mysite”的 Django 项目。
3. 连接 Vue3 和 Django4
现在我们已经创建了 Vue 和 Django 项目，接下来我们需要将它们连接在一起。让我们先添加一个简单的 RESTful API，该 API 将返回一个 JSON 格式的消息。在 Django 项目的根目录创建一个名为“api”的应用程序：
python manage.py startapp api接着在 api/views.py 文件中创建以下 API 视图：
from django.http import JsonResponse
def api(request):
data = {'message': 'Hello from Django!'}
return JsonResponse(data)
现在在 Django 项目的 urls.py 文件中创建以下 URL：
from django.urls import path
from api import views
urlpatterns = [
path('api/', views.api, name='api')
]
保存更改并运行 Django 服务器：
python manage.py runserver现在我们在浏览器中可以访问以下 URL 来测试我们的 API：http://localhost:8000/api/
我们将使用 Axios 库来在 Vue 应用程序中调用该 API。在 Vue 项目中安装 Axios：
npm install axios然后在 Vue 应用程序中创建以下代码：
import axios from 'axios';
export default {
name: 'App',
data() {
return {
message: '',
}
},
mounted() {
axios.get('http://localhost:8000/api/')
.then(response => {
this.message = response.data.message;
})
.catch(error => {
console.log(error);
});
}
}
现在在 Vue 组件中，我们将通过调用该 API 来获取数据并将其与 Vue 数据绑定。
4. 组件开发
在 Vue3 中，组件是构建用户界面的基本单元。在组件中，逻辑、模板和样式都被封装在一起，使得代码更加模块化。我们将创建一个简单的组件来展示我们从 Django API 获取到的数据。在 Vue 项目的 src/components 目录中创建一个名为“HelloWorld.vue”的组件：
<template>
<div class="hello">
<h1>{{ message }}</h1>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'HelloWorld',
data() {
return {
message: '',
}
},
mounted() {
axios.get('http://localhost:8000/api/')
.then(response => {
this.message = response.data.message;
})
.catch(error => {
console.log(error);
});
}
}
</script>
<style scoped>
.hello {
font-size: 2em;
text-align: center;
}
</style>
现在我们需要在 Vue 应用程序中使用此组件。编辑 App.vue 文件，将以下代码添加到 template 中：
<HelloWorld />现在运行 Vue 项目：
npm run serve您现在应该能够在浏览器中看到从 Django API 获取到的数据。
5. 总结
通过使用 Vue3 和 Django4，我们已经了解了如何构建全栈 Web 应用程序。我们通过创建 API 连接 Django 和 Vue，然后创建 Vue 组件来展示从 Django API 获取的数据。这只是一个简单的示例，Vue3 和 Django4 提供了许多工具和模块用于构建更大规模的应用程序。