技术详解: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 的入门程序,但需要注意的是,这只是一个非常简单的示例。在实际项目中,你需要更加注重项目的架构和安全性。