1. 概述
Vue 3 和 Django 4 都是非常流行的框架,它们分别可以进行前端和后端开发。Vue 3 提供了更好的性能和更多的功能,而Django则提供了强大的后端功能,易于使用。本文将详细介绍如何使用 Vue 3 和 Django 4 来构建一个全新的项目。
2. 前端框架搭建
2.1 创建 Vue 3 项目
首先,我们需要安装 Vue CLI,这是一个基于 Node.js 的命令行工具。
接下来,我们可以使用 Vue CLI 快速创建一个 Vue 3 项目:
当你运行上述命令时,Vue CLI 会提示你选择一个 preset。我们选择 "Manually select features",然后选择你需要的功能。
2.2 配置 Axios
接下来,我们需要使用 Axios 来处理 HTTP 请求。Axios 是一个流行的 JavaScript 库,可以在浏览器和 Node.js 中使用。
我们将 Axios 安装为依赖项:
然后在 "src/main.js" 中添加以下代码:
这里我们设置了 Axios 的默认 baseURL 为我们 Django 服务器的地址。接下来,我们可以在 Vue 组件中使用 Axios 来处理 HTTP 请求。
3. 后端框架搭建
3.1 创建 Django 4 项目
我们可以使用 Django CLI 来快速创建一个 Django 4 项目:
然后我们创建一个 app:
3.2 配置数据库
接下来,我们需要配置数据库。Django 4 默认使用 SQLite 数据库,我们可以修改 "myproject/settings.py" 文件来使用 PostgreSQL 数据库:
在使用 PostgreSQL 数据库之前,你需要安装 PostgreSQL 和 psycopg2 包:
4. 前后端联调
现在,我们已经成功搭建了前端和后端框架,接下来,我们需要将它们连接起来。
4.1 Vue 3 与 Django 4 连接
我们将在 Vue 3 中使用 Axios 来发送 HTTP 请求,并在 Django 4 中使用 Django REST framework 来处理这些请求。
我们首先可以创建一个简单的 Django 4 视图来处理 "GET" 请求。在 "myapp/views.py" 中添加以下代码:
这个视图返回一个 JSON 格式的数据。
接下来,我们需要将这个 API 视图绑定到一个 URL 上。在 "myproject/urls.py" 中添加以下代码:
现在,我们已经创建了一个非常简单的 API。我们可以在 Vue 3 中使用 Axios 来发送 "GET" 请求:
5. 结语
到此,我们已经成功搭建了一个 Vue 3 和 Django 4 的项目。我们通过 Axios 和 Django REST framework 来处理 HTTP 请求,使得前后端能够良好地连接。这个项目可以作为学习 Vue 3 和 Django 4 的入门程序,但需要注意的是,这只是一个非常简单的示例。在实际项目中,你需要更加注重项目的架构和安全性。