python-56-基于Vue和Flask进行前后端分离的项目开发示例实战

文章目录

  • 1 创建Vue前端项目
    • 1.1 运行demo
    • 1.2 实现需求
  • 2 flask部署上述dist(前后端未分离)
    • 2.1 代码app.py
    • 2.2 运行访问
  • 3 nginx部署(前后端分离)
    • 3.1 nginx前端服务
      • 3.3.1 windows安装nginx
      • 3.3.2 修改nginx.conf配置文件
      • 3.3.3 启动nginx
      • 3.3.3 停止nginx
    • 3.2 启动后端服务
      • 3.2.1 app.py(去除前端渲染)
      • 3.2.2 启动flask服务
  • 4 三种方式对接Vue与Python前后端
    • 4.1 通过API接口通信
      • 4.1.1 Python后端创建API接口
      • 4.1.2 Vue前端调用API接口
    • 4.2 使用WebSocket进行实时通信
      • 4.2.1 Python后端实现WebSocket
      • 4.2.2 Vue前端连接WebSocket
    • 4.3 通过静态文件进行简单的数据交换
      • 4.3.1 Python后端生成静态文件
      • 4.3.2 Vue前端读取静态文件
  • 5 参考附录

三种方式对接Vue与Python前后端(1)通过API接口通信。(2)使用WebSocket进行实时通信。(3)通过静态文件进行简单的数据交换。

1 创建Vue前端项目

1.1 运行demo

(1)基于node.js,查看node.js的版本,需要更新node.js的版本
下载安装新的nodejs安装包node-v22.14.0-x64.msi。
安装目录D:\Program Files\nodejs\。

CMD>node -v  查看版本 输出v22.14.0

(2)进入指定目录,新建一个Vue项目,名称为demo。

CMD>npm init vue@latest  安装和执行create-vue

create-vue是Vue提供的官方脚手架工具。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/36795.html

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

相关文章

剑指Offer精选:Java与Spring高频面试题深度解析

一、Java底层核心机制 🔥 问题1:谈谈对Java的理解? 📌 核心技术特性 平台无关性 "一次编译,到处运行":通过JVM实现跨平台兼容 字节码(.class)作为中间语言,…

RabbitMQ 集群降配

这里写自定义目录标题 摘要检查状态1. 检查 RabbitMQ 服务状态2. 检查 RabbitMQ 端口监听3. 检查 RabbitMQ 管理插件是否启用4. 检查开机自启状态5. 确认集群高可用性6. 检查使用该集群的服务是否做了断开重连 实操1. 负载均衡配置2. 逐个节点降配(滚动操作&#xf…

【正点原子K210连载】第七十六章 音频FFT实验 摘自【正点原子】DNK210使用指南-CanMV版指南

第七十六章 音频FFT实验 本章将介绍CanMV下FFT的应用,通过将时域采集到的音频数据通过FFT为频域。通过本章的学习,读者将学习到CanMV下控制FFT加速器进行FFT的使用。 本章分为如下几个小节: 32.1 maix.FFT模块介绍 32.2 硬件设计 32.3 程序设…

嵌入式开发之STM32学习笔记day08

从“门铃”到“中断”:手把手玩转STM32的外部中断控制器(EXTI) 引言:为什么我们需要“中断”? (类比生活场景:用“快递按门铃”解释中断的意义) 想象一下:当你在…

JVM的一些知识

JVM简介 JVM 是 Java Virtual Machine 的简称,意为 Java 虚拟机。 虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统。常见的虚拟机:JVM、VMwave、Virtual Box。 JVM 和其他两个虚拟机的区别: VMw…

Mac:JMeter 下载+安装+环境配置(图文详细讲解)

📌 下载JMeter 下载地址:https://jmeter.apache.org/download_jmeter.cgi 📌 无需安装 Apache官网下载 JMeter 压缩包,无需安装,下载解压后放到自己指定目录下即可。 按我自己的习惯,我会在用户 jane 目…

【简单有效!】Gradio利用html插件实现video视频流循环播放

文章目录 前言 & 思路静态资源挂载完整代码结果示例 前言 & 思路 需要利用gradio在前端搭建一个页面,循环播放视频。思路是直接调用gr.HTML插件实现,简单有效!!! 静态资源挂载 app.mount("/static&quo…

⭐算法OJ⭐克隆图【BFS】(C++实现)Clone Graph

前情提要:图论入门【数据结构基础】:什么是图?如何表示图? 133. Clone Graph Given a reference of a node in a connected undirected graph. Return a deep copy (clone) of the graph. Each node in the graph contains a va…

SpringSecurity——基于角色权限控制和资源权限控制

目录 基于角色权限控制 1.1 自定义 UserDetailsService 1.2 加载用户角色 1.3. 给角色配置能访问的资源(使用切面拦截,使用注解) 总结 资源权限控制 2.2. 需要有一个用户;(从数据库查询用户) 2.2 基…

【MySQL】表的约束

目录 零、前言一、空属性二、默认值三、列描述四、zerofill五、主键六、自增长七、唯一键八、外键结尾 零、前言 表中一定要有各种约束,通过约束来让用户未来插入的数据是符合要求的。约束的本质就是通过计算反过来要求用户插入正确的数据。所以站在MySQL的角度上来…

SQLMesh系列教程:SQLMesh虚拟数据环境

各种工具都已将软件工程实践引入到数据工程中,但仍有差距存在,尤其是在测试和工作流等领域。SQLMesh 的目标是在这些领域开辟新的天地,解决像 dbt 这样的竞争产品尚未提供强大解决方案的难题。在这篇文章中,我将对 SQLMesh 进行简…

基于Babylon.js的Shader入门之五:让Shader支持法线贴图

如果一个比较平坦的物体表面要添加更多的凹凸细节,但是我们又不想通过建模实现,这时候法线贴图就派上用场了。法线贴图是通过与灯光的交互来让一个平坦表面造成凹凸效果假象的,在基于Babylon.js的Shader入门之四:让Shader支持基础…

活码在实际操作中的具体场景有哪些?怎么应用?

当传统二维码因“内容固定、无法追踪、流量拥堵”等问题逐渐失效时,活码正在成为企业破解运营痛点的关键工具。 无论是需要实时更新内容的线下物料,还是面临用户分流压力的线上客服,动态二维码都能通过“一码多用、灵活配置”的特性&#xf…

极空间NAS部署gitea教程

极空间NAS部署gitea步骤教程 背景1. 准备镜像1.1 极空间官方1.2 Win系统docker再上传1.3 镜像转录 2. MySql配置2.1 容器配置2.2 命令行配置 3. gitea配置3.1 容器配置3.2 打开网页3.3 网页配置安装 参考资料 背景 极空间Nas和别的Nas不同的地方就在于,他不是那种标…

Wireshark:在 显示过滤器中“加入条件”过滤后,出现其他类型的数据包,为什么?

一、 在Wireshark中使用“tcp协议”过滤后,仍出现TLSv1.2协议的数据包,原因如下: 1. ‌协议层次关系‌ ‌TCP是传输层协议‌,而‌TLS属于应用层协议‌,后者直接运行于TCP之上‌28。因此,所有TLS流量&…

【医学影像 AI】大型语言模型生成 ROP 患者信息材料的能力

【医学影像 AI】大型语言模型生成 ROP 患者信息材料的能力 0. 论文简介0.1 基本信息0.2 摘要 1. 引言2. 材料与方法2.1 大语言模型的使用2.2 可读性标准2.3 统计分析 3. 结果3.1 Bezirci-Yılmaz可读性评分3.2 Ateşman可读性评分3.3 全面性评分3.4 准确性评分 4. 讨论4.1 可读…

设计模式(行为型)-策略模式

目录 定义 类图 角色 角色详解 Strategy(抽象策略类)​ Context(环境类 / 上下文类)​ ConcreteStrategy(具体策略类)​ 优缺点 优点​ 缺点​ 使用场景 类行为差异场景​ 动态算法选…

服装零售行业数字化时代的业务与IT转型规划P111(111页PPT)(文末有下载方式)

服装零售行业数字化时代的业务与IT转型规划P111 详细资料请看本解读文章的最后内容。 随着数字化技术的迅猛发展,服装零售行业正经历着前所未有的变革。本文将对《服装零售行业数字化时代的业务与IT转型规划P111》进行详细解读,探讨未来几年内该行业的…

【大语言模型_6】mindie启动模型错误整理

一、启动报 [hccl_runner.cpp:141] AllGatherHcclRunner:0 HcclCommInitRootInfo fa il, error:2, rank:0, rankSize:2 背景:运行DeepSeek-R1-Distill-Qwen-14B模型,在2张300 P卡可以运行,单独一张启动报以上错误。 问题分析&…

STM32F429单片机FMC接口驱动TFT LCD和SDRAM

1、FMC接口介绍 FMC 接口(即可变存储控制器)是一种用于管理外部存储器的外设接口,支持多种类型的存储器,主要分为三大类:NOR/SRAM/PSRAM设备(TFTLCD相当于SRAM)、NOR FLASH/NAND FLASH/PC卡设备…