技术详解：Vue3+Django4全新项目构建-猿码集

1. 概述

Vue 3 和 Django 4 都是非常流行的框架，它们分别可以进行前端和后端开发。Vue 3 提供了更好的性能和更多的功能，而Django则提供了强大的后端功能，易于使用。本文将详细介绍如何使用 Vue 3 和 Django 4 来构建一个全新的项目。

2. 前端框架搭建

2.1 创建 Vue 3 项目

首先，我们需要安装 Vue CLI，这是一个基于 Node.js 的命令行工具。

npm install -g @vue/cli

接下来，我们可以使用 Vue CLI 快速创建一个 Vue 3 项目：

vue create my-project

当你运行上述命令时，Vue CLI 会提示你选择一个 preset。我们选择 "Manually select features"，然后选择你需要的功能。

2.2 配置 Axios

接下来，我们需要使用 Axios 来处理 HTTP 请求。Axios 是一个流行的 JavaScript 库，可以在浏览器和 Node.js 中使用。

我们将 Axios 安装为依赖项：

npm install axios

然后在 "src/main.js" 中添加以下代码：

import axios from 'axios';
import { createApp } from 'vue';
import App from './App.vue';
axios.defaults.baseURL = 'http://localhost:8000/api/';
createApp(App).mount('#app');

这里我们设置了 Axios 的默认 baseURL 为我们 Django 服务器的地址。接下来，我们可以在 Vue 组件中使用 Axios 来处理 HTTP 请求。

3. 后端框架搭建

3.1 创建 Django 4 项目

我们可以使用 Django CLI 来快速创建一个 Django 4 项目：

python -m venv myenv source myenv/bin/activate pip install Django

django-admin startproject myproject

然后我们创建一个 app：

cd myproject

python manage.py startapp myapp

3.2 配置数据库

接下来，我们需要配置数据库。Django 4 默认使用 SQLite 数据库，我们可以修改 "myproject/settings.py" 文件来使用 PostgreSQL 数据库：

DATABASES = { 'default': { 'ENGINE': 'django.db.backends.postgresql', 'NAME': 'mydatabase', 'USER': 'mydatabaseuser', 'PASSWORD': 'mypassword', 'HOST': 'localhost', 'PORT': '5432', }

}

在使用 PostgreSQL 数据库之前，你需要安装 PostgreSQL 和 psycopg2 包：

sudo apt-get install postgresql postgresql-contrib

pip install psycopg2

4. 前后端联调

现在，我们已经成功搭建了前端和后端框架，接下来，我们需要将它们连接起来。

4.1 Vue 3 与 Django 4 连接

我们将在 Vue 3 中使用 Axios 来发送 HTTP 请求，并在 Django 4 中使用 Django REST framework 来处理这些请求。

我们首先可以创建一个简单的 Django 4 视图来处理 "GET" 请求。在 "myapp/views.py" 中添加以下代码：

from django.http import JsonResponse
def my_view(request):
    data = {'message': 'Hello, world!'}
    return JsonResponse(data)

这个视图返回一个 JSON 格式的数据。

接下来，我们需要将这个 API 视图绑定到一个 URL 上。在 "myproject/urls.py" 中添加以下代码：

from django.urls import path
from myapp.views import my_view
urlpatterns = [
    path('my-api/', my_view),
]

现在，我们已经创建了一个非常简单的 API。我们可以在 Vue 3 中使用 Axios 来发送 "GET" 请求：

import axios from 'axios';
export default {
    data() {
        return {
            message: '',
        }
    },
    mounted() {
        axios.get('http://localhost:8000/api/my-api/')
        .then(response => {
            this.message = response.data.message;
        })
        .catch(error => {
            console.log(error);
        });
    }
}

5. 结语

到此，我们已经成功搭建了一个 Vue 3 和 Django 4 的项目。我们通过 Axios 和 Django REST framework 来处理 HTTP 请求，使得前后端能够良好地连接。这个项目可以作为学习 Vue 3 和 Django 4 的入门程序，但需要注意的是，这只是一个非常简单的示例。在实际项目中，你需要更加注重项目的架构和安全性。

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