当前位置: 首页 > news >正文

Vue 3前端与Python(Django)后端接口简单示例

项目

    • 后端(Django)
    • 前端(Vue 3)

后端(Django)

  1. 创建Django项目和应用
    • 确保你已经安装了Django。如果没有安装,可以使用以下命令安装:
    pip install django
    
    • 创建一个新的Django项目:
    django-admin startproject myproject
    
    • 进入项目目录并创建一个新的应用程序:
    cd myproject
    python manage.py startapp myapp
    
  2. 配置项目
    • 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
    
  3. 编写视图和API
    • myapp/views.py 中编写一个简单的视图函数:
    from django.http import JsonResponsedef get_data(request):data = {'message': '这是来自Django后端的数据'}return JsonResponse(data)
    
    • myapp/urls.py 中配置URL:
    from django.urls import path
    from. import viewsurlpatterns = [path('api/data/', views.get_data, name='get_data'),
    ]
    
    • myproject/urls.py 中包含 myapp 的URL配置:
    from django.contrib import admin
    from django.urls import path, includeurlpatterns = [path('admin/', admin.site.urls),path('', include('myapp.urls')),
    ]
    
  4. 运行后端
    python manage.py runserver
    

前端(Vue 3)

  1. 创建Vue 3项目
    • 确保你已经安装了 vue@latest。如果没有安装,可以使用以下命令安装:
    npm create vue@latest
    
    • 选择默认配置或根据提示进行自定义配置。
  2. 编写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>
    
  3. 运行前端
    • 在项目目录中运行以下命令启动Vue开发服务器:
    npm run dev
    

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

相关文章:

Vue 3前端与Python(Django)后端接口简单示例

项目 后端&#xff08;Django&#xff09;前端&#xff08;Vue 3&#xff09; 后端&#xff08;Django&#xff09; 创建Django项目和应用&#xff1a; 确保你已经安装了Django。如果没有安装&#xff0c;可以使用以下命令安装&#xff1a; pip install django创建一个新的Dja…...

《拉依达的嵌入式\驱动面试宝典》—操作系统篇(二)

《拉依达的嵌入式\驱动面试宝典》—操作系统篇(二) 你好,我是拉依达。 感谢所有阅读关注我的同学支持,目前博客累计阅读 27w,关注1.5w人。其中博客《最全Linux驱动开发全流程详细解析(持续更新)-CSDN博客》已经是 Linux驱动 相关内容搜索的推荐首位,感谢大家支持。 《拉…...

STM32和国民技术(N32)单片机串口中断接收数据及数据解析

一、串口配置 根据单片机不同&#xff0c;串口IO口配置也不同&#xff0c;像STM32单片机&#xff0c;RX脚可以配置为复用输出&#xff0c;也可以配置为浮空输入模式。但是国民技术单片机&#xff08;N32&#xff09;的RX是不能配置为复用输出模式的&#xff0c;这样是收不到数…...

【人工智能】大语言模型的微调:让模型更贴近你的业务需求

大语言模型的微调&#xff1a;让模型更贴近你的业务需求 随着大语言模型&#xff08;LLM, Large Language Model&#xff09;如 GPT-4、BERT 和 T5 等的广泛应用&#xff0c;模型的微调&#xff08;Fine-tuning&#xff09;技术成为实现领域专属任务的重要手段。通过微调&…...

大语言模型的稀疏性:提升效率与性能的新方向

大语言模型的稀疏性&#xff1a;提升效率与性能的新方向 大语言模型&#xff08;LLM, Large Language Model&#xff09;随着参数规模的不断扩大&#xff0c;其性能得到了显著提升&#xff0c;但也带来了巨大的计算和存储开销。稀疏性&#xff08;Sparsity&#xff09;作为一种…...

Linux Bridge与Open vSwitch的工作原理及协作

在虚拟化和云计算环境中&#xff0c;Linux Bridge和Open vSwitch&#xff08;OVS&#xff09;都是用于构建虚拟网络的关键组件。它们提供了二层交换功能&#xff0c;并且能够将虚拟机或容器连接到物理网络中。然而&#xff0c;两者在实现细节和技术特性上有所不同&#xff0c;下…...

async++源码阅读——task模块

1、task_base.h 本人将自己的理解以注释的形式添加的代码中&#xff0c;方便需要的时候重新复习。该文件中用到的一些技术&#xff1a; 该文件中的类并没有使用virtual&#xff0c;而是自定义了需函数表&#xff0c;但是并没有放到每个对象的开始位置&#xff0c;而是通过指针…...

项目开发实践——基于SpringBoot+Vue3实现的在线考试系统(五)

文章目录 一、学生管理模块功能实现1、添加学生功能实现1.1 页面设计1.2 前端功能实现1.3 后端功能实现1.4 效果展示2、学生管理功能实现2.1 页面设计2.2 前端功能实现2.3 后端功能实现2.3.1 后端查询接口实现2.3.2 后端编辑接口实现2.3.3 后端删除接口实现2.4 效果展示二、代码…...

EF Core一对一和多对多

目录 EF Core一对一 关系属性 关系配置 使用 EF Core多对多 关系属性 关系配置 使用 EF Core一对一 关系属性 必须显式的在其中一个实体类中声明一个外键属性&#xff0c;可以在Order建立Delivery&#xff0c;也可以在Delivery建立OrderId class Order {public long…...

记一次sealos部署k8s集群之delete了第一台master如何恢复

记一次sealos部署k8s集群之delete了第一台master如何恢复 一、背景描述 使用sealos部署了一套K8S集群 master信息:172.27.100.1、172.27.100.2、172.27.100.3 node信息:172.27.100.4、172.27.100.5 sealos安装在172.27.100.1节点,根目录下/root/.sealos/文件还在! [root…...

vue3+vite+ts集成第三方js

npm run dev可以正常运行和测试。但是npm run build会报错。 要实现引入静态js&#xff0c;避免使用全局变量报错。 1. HTML 引入第三方 JS 在你的 HTML 文件中&#xff0c;通过 <script> 标签引入一个本地第三方 JS 文件&#xff0c;例如&#xff1a; <script sr…...

android framework.jar 在应用中使用

在开发APP中&#xff0c;有时会使用系统提供的framework.jar 来替代 android.jar, 在gradle中配置如下&#xff1a; 放置framework.jar 依赖配置 3 优先级配置 gradle.projectsEvaluated {tasks.withType(JavaCompile) {Set<File> fileSet options.bootstrapClasspat…...

FFmpeg入门

在音视频处理领域&#xff0c;有一款神器级的工具横扫开发者圈&#xff0c;那就是 FFmpeg。它被誉为“音视频处理的瑞士军刀”&#xff0c;凭借强大的功能和开源的特性成为众多开发者和媒体从业者的首选。今天&#xff0c;我们就来聊聊 FFmpeg 的入门使用&#xff0c;带你轻松开…...

云平台一键部署【Video-Background-Removal】视频换背景,无任何限制,随意换

Video-Background-Removal 是一款革命性的视频背景替换工具&#xff0c;旨在让用户轻松实现视频背景的快速更换。无论你是专业创作者还是普通用户&#xff0c;这款软件都能让你在几秒钟内改变背景&#xff0c;完全消除限制&#xff0c;随心所欲&#xff0c;随时随地想换就换&am…...

量子计算:从薛定谔的猫到你的生活

文章背景 说到量子计算&#xff0c;不少人觉得它神秘又遥不可及。其实&#xff0c;它只是量子物理学的一个“应用小分支”。它的核心在于量子比特的“叠加”和“纠缠”&#xff0c;这些听上去像科幻小说的概念&#xff0c;却为计算世界开辟了一片全新的天地。如果经典计算是“…...

51单片机——I2C-EEPROM

I2C&#xff1a;总线标准或通信协议 EEPROM&#xff1a;AT24C02芯片 开发板板载了1个EEPROM模块&#xff0c;可实现IIC通信 1、EEPROM模块电路&#xff08;AT24C02&#xff09; 芯片的SCL和SDA管脚是连接在单片机的P2.1和P2.0上 2、I2C介绍 I2C&#xff08;Inter&#xff…...

R语言的语法糖

R语言的语法糖 引言 在编程语言中&#xff0c;所谓的“语法糖”是指那些使得程序员能够以更简洁、直观的方式书写代码的语法形式。R语言作为一种用于统计分析和数据可视化的编程语言&#xff0c;具有丰富的功能和灵活的语法。本文将深入探讨R语言中的语法糖&#xff0c;帮助读…...

【算法学习笔记】30:埃氏筛(Sieve of Eratosthenes)和线性筛(Linear Sieve)

测试题目&#xff1a;AcWing 868. 筛质数 埃氏筛&#xff08;Sieve of Eratosthenes&#xff09; 如果 i i i是素数&#xff0c;每次把 i i i的倍数都筛掉&#xff0c;存在重复筛选&#xff0c;时间复杂度 n ⋅ l o g ( l o g n ) n \cdot log(logn) n⋅log(logn)。 #includ…...

【AscendC】tiling方案设计不当引起的一个时隐时现的bug

在设计tiling方案时&#xff0c;通常会考虑到非对齐的场景&#xff0c;对输入数据进行补全操作从而使得非对齐场景也能正确的完成计算。但在某些算子的实现过程中&#xff0c;沿用上述操作却会造成数据的错误计算&#xff0c;且这种错误出现与否取决于随机生成的测试数据质量。…...

视频转码对画质有影响吗?视频融合平台EasyCVR支持哪些转码格式?

视频转码过程是将视频文件从一种编码格式转换为另一种格式的过程&#xff0c;这一过程在现代数字媒体中扮演着至关重要的角色。众所周知&#xff0c;视频转码不仅仅是简单的格式转换&#xff0c;它涉及多个关键参数的改变&#xff0c;例如视频编码格式、比特率、分辨率以及帧率…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...