快捷導(dǎo)航

Vue3前端與Python(Django)后端接口簡(jiǎn)單代碼示例

更新時(shí)間：2025年01月15日 09:05:08 作者：閑人陳二狗

這篇文章主要介紹了如何使用Django創(chuàng)建項(xiàng)目和應(yīng)用,配置跨域訪問(wèn),并編寫視圖和API,同時(shí)還講述了如何使用Vue3創(chuàng)建項(xiàng)目,編寫組件調(diào)用后端API,需要的朋友可以參考下

后端（Django）

創(chuàng)建Django項(xiàng)目和應(yīng)用：
- 確保你已經(jīng)安裝了Django。如果沒(méi)有安裝，可以使用以下命令安裝：
```
pip install django
```
- 創(chuàng)建一個(gè)新的Django項(xiàng)目：
```
django-admin startproject myproject
```
- 進(jìn)入項(xiàng)目目錄并創(chuàng)建一個(gè)新的應(yīng)用程序：
```
cd myproject
python manage.py startapp myapp
```
配置項(xiàng)目：
- 在 myproject/settings.py 文件中，將 myapp 添加到 INSTALLED_APPS 列表中，并配置允許跨域訪問(wèn)（因?yàn)閂ue和Django可能運(yùn)行在不同端口）。安裝 corsheaders 庫(kù)：
```
pip install django-cors-headers
```
- 在 INSTALLED_APPS 中添加 corsheaders：
```
INSTALLED_APPS = [
  ...
    'corsheaders',
   'myapp',
]
```
- 在 MIDDLEWARE 中添加 corsheaders 中間件：
```
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
  ...
]
```
- 配置允許所有來(lái)源訪問(wèn)（在生產(chǎn)環(huán)境中請(qǐng)?zhí)鎿Q為實(shí)際的前端域名）：
```
CORS_ALLOW_ALL_ORIGINS = True
```

編寫視圖和API：

在 myapp/views.py 中編寫一個(gè)簡(jiǎn)單的視圖函數(shù)：

from django.http import JsonResponse

def get_data(request):
    data = {'message': '這是來(lái)自Django后端的數(shù)據(jù)'}
    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')),
]

運(yùn)行后端：
```
python manage.py runserver
```

前端（Vue 3）

創(chuàng)建Vue 3項(xiàng)目：
- 確保你已經(jīng)安裝了 vue@latest。如果沒(méi)有安裝，可以使用以下命令安裝：
```
npm create vue@latest
```
- 選擇默認(rèn)配置或根據(jù)提示進(jìn)行自定義配置。

編寫Vue組件：

在 src/views/Home.vue 中修改代碼以調(diào)用后端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>