django+vue3详细教程

Django 是一个基于 Python 的 Web 应用框架，Vue3 是一个流行的前端 JavaScript 框架。结合使用 Django 和 Vue3 可以构建现代化的全栈 Web 应用程序。下面是一个基本的 Django + Vue3 教程：

1. 创建 Django 项目

首先，我们需要创建一个 Django 项目。打开终端并输入以下命令：

django-admin startproject myproject
cd myproject

这将创建一个名为 `myproject` 的 Django 项目，并将您的当前工作目录更改为该项目目录。

2. 创建 Django 应用程序

接下来，我们将创建一个 Django 应用程序。在终端中运行以下命令：

python manage.py startapp myapp

这将创建一个名为 `myapp` 的 Django 应用程序。

3. 安装 Django REST framework

现在，我们需要安装 Django REST framework。在终端中运行以下命令：

pip install djangorestframework

这将安装 Django REST framework。

4. 创建 Vue3 项目

接下来，我们将创建一个 Vue3 项目。打开另一个终端窗口并输入以下命令：

vue create myproject-ui
cd myproject-ui

这将使用 Vue CLI 创建一个名为 `myproject-ui` 的 Vue3 项目，并将您的当前工作目录更改为该项目目录。

5. 配置 Django REST framework

现在，我们需要配置 Django REST framework。打开 `myproject/settings.py` 文件并添加以下行：

INSTALLED_APPS = [
    # ...
    'rest_framework',
    'myapp',
]

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
}

6. 创建 Vue3 组件

现在，我们将创建一个 Vue3 组件。打开 `myproject-ui/src/App.vue` 文件并添加以下行：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello, World!'
    }
  }
}
</script>

这将创建一个简单的 Vue3 组件，其中包含一个带有文本的标题。

7. 启动 Django 服务器

现在，我们将启动 Django 服务器。在终端中输入以下命令：

python manage.py runserver

这将启动 Django 服务器并监听端口 8000。

8. 启动 Vue3 应用程序

接下来，我们将启动 Vue3 应用程序。在另一个终端窗口中输入以下命令：

npm run serve

这将启动 Vue3 开发服务器并监听端口 8080。

9. 集成 Django 和 Vue3

现在，我们将集成 Django 和 Vue3。打开 `myproject-ui/src/main.js` 文件并添加以下行：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.config.globalProperties.$djangoUrl = 'http://localhost:8000'

app.mount('#app')

这将创建一个 Vue3 应用程序实例，并将 `http://localhost:8000` 设置为 Django 服务器的 URL。

10. 使用 Django REST framework 提供数据

最后，我们将使用 Django REST framework 提供数据。打开 `myapp/views.py` 文件并添加以下行：

from django.http import JsonResponse

def hello(request):
    return JsonResponse({'message': 'Hello, World!'})

这将创建一个简单的 Django 视图函数，该函数返回一个 JSON 响应。

11. 在 Vue3 中使用数据

最后，我们将在 Vue3 中使用数据。打开 `myproject-ui/src/App.vue` 文件并添加以下行：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    fetch(`${this.$djangoUrl}/hello`)
      .then(response => response.json())
      .then(data => {
        this.message = data.message
      })
  }
}
</script>

这将使用 `fetch()` 函数从 Django 服务器获取数据，并将其显示在 Vue3 组件中。

现在，您已经学会了如何使用 Django 和 Vue3 构建全栈 Web 应用程序！