基础到实战：Vue3+Django4全栈开发入门篇

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 提供了许多工具和模块用于构建更大规模的应用程序。