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.mzph.cn/web/66146.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

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协议的认证、加…
阅读更多...
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上配置用…
阅读更多...
数据分析：非度量多维排列 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…
阅读更多...
Linux离线部署ELK

Linux离线部署ELK

文章目录 前期准备开始安装安装elastic search安装logstash安装kibana 配置ELK配置ElasticSearch配置logstash配置kibana 启动ELK启动命令启动测试 设置ELK策略创建ILM策略将ILM策略与日志index关联查看索引是否被ILM策略管理 前期准备 ELK包含三部分软件 ElasticSearch用作搜…
阅读更多...
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 #以管理…
阅读更多...
【深度学习地学应用|滑坡制图、变化检测、多目标域适应、感知学习、深度学习】跨域大尺度遥感影像滑坡制图方法：基于原型引导的领域感知渐进表示学习（一）

【深度学习地学应用|滑坡制图、变化检测、多目标域适应、感知学习、深度学习】跨域大尺度遥感影像滑坡制图方法：基于原型引导的领域感知渐进表示学习（一）

【深度学习地学应用|滑坡制图、变化检测、多目标域适应、感知学习、深度学习】跨域大尺度遥感影像滑坡制图方法&#xff1a;基于原型引导的领域感知渐进表示学习&#xff08;一&#xff09; 【深度学习地学应用|滑坡制图、变化检测、多目标域适应、感知学习、深度学习】跨域大…
阅读更多...
《C++11》并发库：简介与应用

《C++11》并发库：简介与应用

在C11之前&#xff0c;C并没有提供原生的并发支持。开发者通常需要依赖于操作系统的API&#xff08;如Windows的CreateThread或POSIX的pthread_create&#xff09;或者第三方库&#xff08;如Boost.Thread&#xff09;来创建和管理线程。这些方式存在以下几个问题&#xff1a; …
阅读更多...
了解Node.js

了解Node.js

Node.js是一个基于V8引擎的JavaScript运行时环境&#xff0c;它允许JavaScript代码在服务器端运行&#xff0c;从而实现后端开发。Node.js的出现&#xff0c;使得前端开发人员可以利用他们已经掌握的JavaScript技能&#xff0c;扩展技能树并成为全栈开发人员。本文将深入浅出地…
阅读更多...
js解决 Number失精度问题

js解决 Number失精度问题

const updatePromises adinfo.rows.map(async item > {const cwf await uniCloud.httpclient.request("https://api.oceanengine.com/open_api/v3.0/project/list/", {method: GET,data: {advertiser_id: item.account_id},// 1. 指定text数据格式dataType: tex…
阅读更多...
实力认证 | 海云安入选《信创安全产品及服务购买决策参考》

实力认证 | 海云安入选《信创安全产品及服务购买决策参考》

近日&#xff0c;国内知名安全调研机构GoUpSec发布了2024年中国网络安全行业《信创安全产品及服务购买决策参考》&#xff0c;报告从产品特点、产品优势、成功案例、安全策略等维度对各厂商信创安全产品及服务进行调研了解。 海云安凭借AI大模型技术在信创安全领域中的创新应用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023