Django 和 Vue3 前后端分離開發筆記

Django 和 Vue3 前后端分離開發筆記

1. Django Ninja API

Django Ninja 是一個用于使用 Django 和 Python 3.6+ 類型提示構建 API 的網絡框架。它具有以下主要特點：

  1. 簡單易懂：設計為易于使用和符合直覺，適合快速上手。
  2. 快速執行：多虧了 Pydantic 和異步支持，具有非常高的性能。
  3. 快速編程：類型提示和自動文檔生成讓開發者只需關注業務邏輯。
  4. 基于標準：基于 OpenAPI（以前稱為 Swagger）和 JSON 模式。
  5. 對 Django 友好：與 Django 核心和 ORM 有良好的集成。
  6. 可用于生產：被多家公司用于實際項目，穩定可靠。
創建和使用 NinjaAPI

  1. 安裝 Django Ninja：

    pip install django-ninja

  2. 創建 Django 項目（如果還沒有）：

    django-admin startproject apidemo
cd apidemo

  3. 在 urls.py 中配置 API：

    # apidemo/urls.py
from django.contrib import admin
from django.urls import path
from ninja import NinjaAPIapi = NinjaAPI()@api.get("/add")
def add(request, a: int, b: int):return {"result": a + b}urlpatterns = [path("admin/", admin.site.urls),path("api/", api.urls),
]

  4. 運行項目：

    python manage.py runserver

  5. 訪問 API：
    打開瀏覽器，訪問 http://127.0.0.1:8000/api/add?a=1&b=2，你將看到 JSON 響應為：

    {"result": 3}

  6. 交互式 API 文檔：
    訪問 http://127.0.0.1:8000/api/docs，你將看到自動的、交互式 API 文檔（由 OpenAPI / Swagger UI 或 Redoc 提供）。

NinjaAPI 的主要參數
  • title：API 的標題。
  • version：API 的版本。
  • description：API 的描述。
  • openapi_url：OpenAPI 規范的相對 URL。
  • docs_url：API 文檔的相對 URL。
  • servers：目標主機列表，用于 OpenAPI 規范。
  • csrf：是否要求 CSRF 令牌（已棄用，現在由 auth 處理）。
  • auth：認證類。
  • renderer：默認響應渲染器。
  • parser：默認請求解析器。
  • openapi_extra：OpenAPI 規范的額外屬性。
示例

以下是一個更復雜的示例，展示了如何使用 NinjaAPI 創建一個帶有輸入和輸出模型的 API：

# apidemo/api.py
from ninja import NinjaAPI, Schema
from ninja import UploadedFile, File
from django.core.files.storage import FileSystemStorage
from django.shortcuts import get_object_or_404
from .models import Employee, Departmentapi = NinjaAPI()class EmployeeIn(Schema):first_name: strlast_name: strdepartment_id: int = Nonebirthdate: date = Noneclass EmployeeOut(Schema):id: intfirst_name: strlast_name: strdepartment_id: int = Nonebirthdate: date = None@api.post("/employees")
def create_employee(request, payload: EmployeeIn, cv: UploadedFile = File(...)):fs = FileSystemStorage()filename = fs.save(cv.name, cv)payload_dict = payload.dict()payload_dict['cv'] = filenameemployee = Employee.objects.create(**payload_dict)return {"id": employee.id}@api.get("/employees/{employee_id}")
def get_employee(request, employee_id: int):employee = get_object_or_404(Employee, id=employee_id)return EmployeeOut.from_orm(employee)

在這個示例中，我們定義了兩個模型 EmployeeIn 和 EmployeeOut，分別用于輸入和輸出。我們還創建了兩個 API 端點：一個用于創建員工，另一個用于獲取員工信息。

在 urls.py 中使用 api.py：
# apidemo/urls.py
from django.contrib import admin
from django.urls import path
from .api import apiurlpatterns = [path("admin/", admin.site.urls),path("api/", api.urls),
]

2. 跨域請求問題

從你提供的信息來看，你遇到了一個常見的跨源資源共享（CORS）問題。這個錯誤信息表明，當你從 http://localhost:5173 發起請求到 http://127.0.0.1:8000/api/test/ 時，服務器沒有返回 Access-Control-Allow-Origin 頭，導致瀏覽器阻止了這次請求。

解決 CORS 問題的方法
1. 在服務器端設置 CORS 頭

最根本的解決方法是在服務器端設置 Access-Control-Allow-Origin 頭。

手動設置

from django.http import HttpResponsedef my_view(request):# 創建一個HttpResponse對象response = HttpResponse("這是我的響應內容")# 手動設置CORS頭部response['Access-Control-Allow-Origin'] = '*'return response

如果你使用的是 Django，可以安裝 django-cors-headers 庫來處理 CORS 問題。

  1. 安裝 django-cors-headers：

    pip install django-cors-headers

  2. 在 settings.py 中配置：

    # apidemo/settings.pyINSTALLED_APPS = [...'corsheaders',...
]MIDDLEWARE = [...'corsheaders.middleware.CorsMiddleware','django.middleware.common.CommonMiddleware',...
]CORS_ALLOWED_ORIGINS = ["http://localhost:5173",
]

  3. 確保 CORS_ALLOWED_ORIGINS 包含你的前端開發服務器的 URL。

2. 使用代理

如果你無法修改服務器端的設置，可以在開發環境中使用代理來繞過 CORS 限制。Vite 提供了代理配置選項，可以在 vite.config.js 中設置。

  1. 創建或修改 vite.config.js：

    // vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],server: {proxy: {'/api': {target: 'http://127.0.0.1:8000', changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
});

  2. 修改請求 URL：
    在前端代碼中，將請求 URL 從 http://127.0.0.1:8000/api/test/ 改為 /api/test/。

    // src/components/Person.vue
fetch('/api/test/').then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json();}).then(data => {console.log(data);}).catch(error => {console.error('There was a problem with the fetch operation:', error);});
檢查和重試

  1. 檢查 URL 的合法性：

    • 確保 http://127.0.0.1:8000/api/test/ 是正確的，并且服務器已經啟動。
    • 嘗試在瀏覽器中直接訪問該 URL，看是否能返回預期的結果。

  2. 重試請求：

    • 有時候網絡問題可能導致請求失敗，可以嘗試重新發送請求。

  3. 檢查網絡連接：

    • 確保你的開發環境的網絡連接正常，沒有防火墻或代理服務器阻止請求。
總結

CORS 問題通常是由于服務器端沒有正確設置 Access-Control-Allow-Origin 頭導致的。你可以通過在服務器端設置 CORS 頭或在開發環境中使用代理來解決這個問題。如果問題仍然存在，建議檢查 URL 的合法性和網絡連接，適當重試請求。

Vue3 前端項目設置

1. 創建 Vue3 項目

你可以使用 Vue CLI 或 Vite 來創建 Vue3 項目。這里以 Vite 為例：

npm create vite@latest frontend --template vue
cd frontend
npm install
npm install axios
2. 配置 main.js

確保在 main.js 中引入 Vue 和 Axios：

// frontend/src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'const app = createApp(App)
app.config.globalProperties.$axios = axios
app.mount('#app')
3. 創建組件

創建一個簡單的組件來測試 API 請求：

<!-- frontend/src/components/Person.vue -->
<template><div><button @click="sendRequest">發送請求</button><hr><p>{{ response }}</p></div>
</template><script setup>
import { ref } from 'vue';
import axios from 'axios';const response = ref(null);async function sendRequest() {try {const res = await axios.get('/api/test/');response.value = res.data;} catch (error) {console.error('請求失敗:', error);}
}
</script><style scoped>
button {padding: 10px 20px;margin-bottom: 10px;
}
</style>
4. 運行 Vue3 項目
npm run dev

確保你的 Vue3 項目運行在 http://localhost:5173，并且通過 Vite 配置的代理正確地將請求發送到 Django 后端。

數據庫模型示例

為了完整演示，這里提供一個簡單的數據庫模型示例：

# apidemo/models.py
from django.db import modelsclass Department(models.Model):name = models.CharField(max_length=100)def __str__(self):return self.nameclass Employee(models.Model):first_name = models.CharField(max_length=50)last_name = models.CharField(max_length=50)department = models.ForeignKey(Department, on_delete=models.SET_NULL, null=True, blank=True)birthdate = models.DateField(null=True, blank=True)cv = models.FileField(upload_to='cvs/', null=True, blank=True)def __str__(self):return f"{self.first_name} {self.last_name}"
5. 遷移數據庫
python manage.py makemigrations
python manage.py migrate

測試和調試

  1. 確保后端和前端都在運行：

    • 后端：http://127.0.0.1:8000
    • 前端：http://localhost:5173

  2. 檢查瀏覽器控制臺：

    • 查看是否有任何錯誤信息。
    • 確認請求是否成功，并且返回的數據是否正確。

  3. 使用 Postman 或瀏覽器開發者工具：

    • 使用 Postman 測試 API 端點。
    • 使用瀏覽器開發者工具查看網絡請求和響應。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/66146.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/66146.shtml
英文地址，請注明出處：http://en.pswp.cn/web/66146.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

44_Lua迭代器

44_Lua迭代器

在Lua中，迭代器是一種用于遍歷集合元素的重要工具。掌握迭代器的使用方法，對于提高Lua編程的效率和代碼的可讀性具有重要意義。 1.迭代器概述 1.1 迭代器介紹 迭代器是一種設計模式，它提供了一種訪問集合元素的方法，而不需要暴露其底層結構。在Lua中，迭代器通常以一個函…
閱讀更多...
hot100_240. 搜索二維矩陣 II

hot100_240. 搜索二維矩陣 II

hot100_240. 搜索二維矩陣 II 直接遍歷列減行增 編寫一個高效的算法來搜索 m x n 矩陣 matrix 中的一個目標值 target 。該矩陣具有以下特性&#xff1a; 每行的元素從左到右升序排列。 每列的元素從上到下升序排列。 示例 1&#xff1a; 輸入&#xff1a;matrix [[1,4,7,1…
閱讀更多...
一步到位Python Django部署，淺談Python Django框架

一步到位Python Django部署，淺談Python Django框架

Django是一個使用Python開發的Web應用程序框架&#xff0c;它遵循MVC&#xff08;Model-View-Controller&#xff09;設計模式&#xff0c;旨在幫助開發人員更快、更輕松地構建和維護高質量的Web應用程序。Django提供了強大的基礎設施和工具&#xff0c;以便于處理復雜的業務邏…
閱讀更多...
Apache PAIMON 學習

Apache PAIMON 學習

參考&#xff1a;Apache PAIMON&#xff1a;實時數據湖技術框架及其實踐 數據湖不僅僅是一個存儲不同類數據的技術手段&#xff0c;更是提高數據分析效率、支持數據驅動決策、加速AI發展的基礎設施。 新一代實時數據湖技術&#xff0c;Apache PAIMON兼容Apache Flink、Spark等…
閱讀更多...
《計算機網絡》課后探研題書面報告_了解PPPoE協議

《計算機網絡》課后探研題書面報告_了解PPPoE協議

PPPoE協議的工作原理與應用分析 摘 要 PPPoE&#xff08;Point-to-Point Protocol over Ethernet&#xff09;是一種廣泛應用于寬帶接入的網絡協議&#xff0c;特別是在DSL&#xff08;數字用戶線路&#xff09;和光纖網絡中具有重要的應用價值。PPPoE結合了PPP協議的認證、加…
閱讀更多...
【MySQL學習筆記】MySQL存儲過程

【MySQL學習筆記】MySQL存儲過程

存儲過程 1、基礎語法2、變量2.1 系統變量2.2 用戶自定義變量2.3 局部變量 3、if 流程控制4、參數5、case 流程控制6、循環結構6.1 while 循環6.2 repeat 循環6.3 loop 循環 7、游標8、存儲函數 存儲過程是事先經過編譯并存儲在數據庫中的一段 SQL 語句的集合&#xff0c;調用存…
閱讀更多...
MAC上安裝Octave

MAC上安裝Octave

1. 當前最新版Octave是9.3版本&#xff0c;需要把mac os系統升級到14版本&#xff08;本人之前的版本是10版本&#xff09; https://wiki.octave.org/Octave_for_macOS octave的歷史版本參考此文檔&#xff1a;Octave for macOS (outdated) - Octavehttps://wiki.octave.org/Oc…
閱讀更多...
mysql-5.7.18保姆級詳細安裝教程

mysql-5.7.18保姆級詳細安裝教程

本文主要講解如何安裝mysql-5.7.18數據庫&#xff1a; 將綠色版安裝包mysql-5.7.18-winx64解壓后目錄中內容如下圖&#xff0c;該例是安裝在D盤根目錄。 在mysql安裝目錄中新建my.ini文件&#xff0c;文件內容及各配置項內容如下圖&#xff0c;需要先將配置項【skip-grant-tab…
閱讀更多...
VSCode連接Github的重重困難及解決方案！

VSCode連接Github的重重困難及解決方案！

一、背景&#xff1a; 我首先在github創建了一個新的項目&#xff0c;并自動創建了readme文件其次在vscode創建項目并寫了兩個文件在我想將vscode的項目上傳到對應的github上時&#xff0c;錯誤出現了 二、報錯及解決方案&#xff1a; 1.解決方案&#xff1a; 需要在git上配置用…
閱讀更多...
YOLOV8漲點技巧之混合注意力與特征金字塔網絡融合

YOLOV8漲點技巧之混合注意力與特征金字塔網絡融合

YOLO發展歷程 自2015年YOLOv1問世以來，這一革命性的目標檢測算法經歷了一系列重大升級。以下是YOLO各版本的主要發展里程碑： 版本 發布時間 主要開發者 YOLOv1 2015年6月 Joseph Redmon YOLOv2(YOLO9000) 2016年12月 Joseph Redmon YOLOv3 2018年4月 Joseph Redmon
閱讀更多...
數據分析：非度量多維排列 NMDS (Non-metric multidimensional scaling)ANOSIM檢驗分析

數據分析：非度量多維排列 NMDS (Non-metric multidimensional scaling)ANOSIM檢驗分析

禁止商業或二改轉載，僅供自學使用，侵權必究，如需截取部分內容請后臺聯系作者! 文章目錄 介紹原理步驟加載R包數據下載導入數據數據預處理計算距離矩陣ANOSIM檢驗非度量多維排列NMDS應力值（stress value）畫圖輸出系統信息介紹 非度量多維排列（Non-metric Multidimensiona…
閱讀更多...
Open FPV VTX開源之ardupilot配置

Open FPV VTX開源之ardupilot配置

Open FPV VTX開源之ardupilot配置 1. 源由2. 配置3. 總結4. 參考資料5. 補充5.1 飛控固件版本5.2 配置Ardupilot的BF OSD5.3 OSD偏左問題 1. 源由 飛控嵌入式OSD - ardupilot配置使用ardupliot配套OSD圖片。 Choose correct font depending on Flight Controller SW. ──>…
閱讀更多...
硬件實用技巧：TPS54331DR橫杠標識識別1引腳

硬件實用技巧：TPS54331DR橫杠標識識別1引腳

若該文為原創文章&#xff0c;轉載請注明原文出處 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/145116969 長沙紅胖子Qt&#xff08;長沙創微智科&#xff09;博文大全&#xff1a;開發技術集合&#xff08;包含Qt實用技術、樹莓派、三維、OpenCV…
閱讀更多...
Python庫之PyAutoGUI安裝以及使用方法

Python庫之PyAutoGUI安裝以及使用方法

Date: 2025.01.15 20:54:01 author: lijianzhan PyAutoGUI是一個功能強大的Python庫&#xff0c;它允許我們用于通過編程控制鼠標和鍵盤&#xff0c;實現自動化任務。它可以模擬用戶的輸入操作&#xff0c;例如點擊、拖動、輸入文本等&#xff0c;適用于 GUI 自動化、測試腳本、…
閱讀更多...
Linux離線部署ELK

Linux離線部署ELK

文章目錄 前期準備開始安裝安裝elastic search安裝logstash安裝kibana 配置ELK配置ElasticSearch配置logstash配置kibana 啟動ELK啟動命令啟動測試 設置ELK策略創建ILM策略將ILM策略與日志index關聯查看索引是否被ILM策略管理 前期準備 ELK包含三部分軟件 ElasticSearch用作搜…
閱讀更多...
Go語言的數據競爭 (Data Race) 和 競態條件 (Race Condition)

Go語言的數據競爭 (Data Race) 和 競態條件 (Race Condition)

文章精選推薦 1 JetBrains Ai assistant 編程工具讓你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的圖標增強神器 3 IDEA插件推薦-SequenceDiagram&#xff0c;自動生成時序圖 4 BashSupport Pro 這個ides插件主要是用來干嘛的 &#xff1f; 5 IDEA必裝的插件&…
閱讀更多...
Node.js - Express框架

Node.js - Express框架

1. 介紹 Express 是一個基于 Node.js 的 Web 應用程序框架&#xff0c;主要用于快速、簡便地構建 Web 應用程序 和 API。它是目前最流行的 Node.js Web 框架之一&#xff0c;具有輕量級、靈活和功能豐富的特點。 核心概念包括路由&#xff0c;中間件&#xff0c;請求與響應&a…
閱讀更多...
《光學遙感圖像中顯著目標檢測的多內容互補網絡》2021-9

《光學遙感圖像中顯著目標檢測的多內容互補網絡》2021-9

一、簡介 在本文中&#xff0c;我們提出了一種新的多內容互補網絡 &#xff08;MCCNet&#xff09; 來探索 RSI-SOD 的多內容互補性。具體來說&#xff0c;MCCNet 基于通用的編碼器-解碼器架構&#xff0c;并包含一個名為 multi-content complementation module &#xff08;MC…
閱讀更多...
【STM8S】STM8S之自定義短、長、連擊按鍵

【STM8S】STM8S之自定義短、長、連擊按鍵

本文最后修改時間&#xff1a;2018年10月22日 01:57 一、本節簡介 本文介紹STM8S系列如何實現按鍵的短按、長按、連擊。 二、實驗平臺 編譯軟件&#xff1a;IAR for STM8 1.42.2 硬件平臺&#xff1a;stm8s003f3p6開發板 仿真器&#xff1a;ST-LINK 庫函數版本&#xff1a…
閱讀更多...
數據庫（MySQL）練習

數據庫（MySQL）練習

數據庫&#xff08;MySQL&#xff09;練習 一、練習1.15練習練習 二、注意事項2.1 第四天 一、練習 1.15練習 win11安裝配置MySQL超詳細教程: https://baijiahao.baidu.com/s?id1786910666566008458&wfrspider&forpc 準備工作&#xff1a; mysql -uroot -p #以管理…
閱讀更多...
最新文章

Copyright @ 2022~2023