首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3前端与Django后端接口

Vue3前端与Python(Django)后端接口简单代码示例

2025-01-15 09:04:32 作者：闲人陈二狗

这篇文章主要介绍了如何使用Django创建项目和应用,配置跨域访问,并编写视图和API,同时还讲述了如何使用Vue3创建项目,编写组件调用后端API,需要的朋友可以参考下

后端（Django）

创建Django项目和应用：
- 确保你已经安装了Django。如果没有安装，可以使用以下命令安装：
```
pip install django
```
- 创建一个新的Django项目：
```
django-admin startproject myproject
```
- 进入项目目录并创建一个新的应用程序：
```
cd myproject
python manage.py startapp myapp
```
配置项目：
- 在 myproject/settings.py 文件中，将 myapp 添加到 INSTALLED_APPS 列表中，并配置允许跨域访问（因为Vue和Django可能运行在不同端口）。安装 corsheaders 库：
```
pip install django-cors-headers
```
- 在 INSTALLED_APPS 中添加 corsheaders：
```
INSTALLED_APPS = [
  ...
    'corsheaders',
   'myapp',
]
```
- 在 MIDDLEWARE 中添加 corsheaders 中间件：
```
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
  ...
]
```
- 配置允许所有来源访问（在生产环境中请替换为实际的前端域名）：
```
CORS_ALLOW_ALL_ORIGINS = True
```

编写视图和API：

在 myapp/views.py 中编写一个简单的视图函数：

from django.http import JsonResponse

def get_data(request):
    data = {'message': '这是来自Django后端的数据'}
    return JsonResponse(data)

在 myapp/urls.py 中配置URL：

from django.urls import path
from. import views

urlpatterns = [
    path('api/data/', views.get_data, name='get_data'),
]

在 myproject/urls.py 中包含 myapp 的URL配置：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls')),
]

运行后端：
```
python manage.py runserver
```

前端（Vue 3）

创建Vue 3项目：
- 确保你已经安装了 vue@latest。如果没有安装，可以使用以下命令安装：
```
npm create vue@latest
```
- 选择默认配置或根据提示进行自定义配置。

编写Vue组件：

在 src/views/Home.vue 中修改代码以调用后端API：

<template>
    <div>
        <h1>Vue 3与Django集成示例</h1>
        <p>{{ responseData.message }}</p>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const responseData = ref({});

const fetchData = async () => {
    try {
        const response = await axios.get('http://127.0.0.1:8000/api/data/');
        responseData.value = response.data;
    } catch (error) {
        console.error('Error fetching data:', error);
    }
};

fetchData();
</script>

<style scoped>
/* 样式 */
</style>

运行前端：
- 在项目目录中运行以下命令启动Vue开发服务器：
```
npm run dev
```

现在，Vue 3前端应用可以成功调用Django后端提供的API，并展示返回的数据。请确保后端和前端服务器都在运行，并且根据实际情况调整API的URL。

总结

到此这篇关于Vue3前端与Python(Django)后端接口的文章就介绍到这了,更多相关Vue3前端与Django后端接口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

Vue3前端与Python(Django)后端接口简单代码示例

后端（Django）

前端（Vue 3）

总结

您可能感兴趣的文章: