文章目录

  • 1 任务需求
  • 2 前端
    • 2.1 模板template
    • 2.2 JS代码script
    • 2.3 Calculate.vue(子组件)
    • 2.4 App.vue(根组件)
  • 3 后端
    • 3.1 导入模块
    • 3.2 创建应用实例
    • 3.3 配置CORS
    • 3.4 定义路由
    • 3.5 处理请求
    • 3.6 main.py
  • 4 附录
    • 4.1 CORS
      • 4.1.1 全局启用CORS
      • 4.1.2 限制允许的域名(更安全)
      • 4.1.3 按路由控制(使用装饰器)
    • 4.2 参考附录

方式一:使用vue/cli脚手架
CMD>vue create 项目名称方式二:使用vite创建Vue3项目
注意node.js的版本要是最新的
CMD>npm create vue@latest

1 任务需求

功能:在网页中输入两个数字后,点击计算按钮在线计算获得两数之和。
实现:前端使用vue3的axios向服务器发送post请求,利用flask框架使python服务器返回计算后的数值,赋给前端的变量,最终在浏览器上显示。

2 前端

CMD>vue create vue3_cal
CMD>npm install axios

2.1 模板template

<template><div>

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

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

相关文章

动态规划之最长回文子串

题目&#xff1a;最长回文子串 给你一个字符串 s&#xff0c;找到 s 中最长的 回文 子串。 示例 1&#xff1a; 输入&#xff1a;s “babad” 输出&#xff1a;“bab” 解释&#xff1a;“aba” 同样是符合题意的答案。 示例 2&#xff1a; 输入&#xff1a;s “cbbd” 输…

Linux 编程中的错误处理机制详解 —— `errno` 全解析

文章目录Linux 编程中的错误处理机制详解 —— errno 全解析一、什么是 errno&#xff1f;❓为什么需要 errno&#xff1f;✅ 它在哪里定义&#xff1f;二、errno 的设置与读取规则⚠️ errno 不是总是有效&#xff01;❗使用 errno 的正确步骤&#xff1a;三、与 errno 配套使…

力扣-最长递增子序列

简单记录学习~给你一个整数数组 nums &#xff0c;找到其中最长严格递增子序列的长度。子序列 是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序。例如&#xff0c;[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。示例…

公司内部网址怎么在外网打开?如何让外网访问内网的网站呢?

很多公司内部本地会部署有中小型的服务器&#xff0c;可以很好的方便用于一些办公业务系统&#xff0c;或测试开发需要。在数字化办公和生活场景中&#xff0c;除了公司内部局域网内访问公司系统外&#xff0c;经常会遇到需要让外网访问内网网站的情况。比如企业员工远程办公时…

有趣的css - 多选立体标签按钮

&#x1f36d; 大家好&#xff0c;我是 Just&#xff0c;这里是「设计师工作日常」&#xff0c;今天分享的是一个交互较完整的多选立体标签按钮。 最新文章通过公众号「设计师工作日常」发布。 目录整体效果核心代码html 代码css 部分代码完整代码如下html 页面css 样式页面渲…

C++中byte*和char*的区别

在C中&#xff0c;byte*&#xff08;通常指 std::byte*&#xff09;和 char* 都是指针类型&#xff0c;但它们在语义和用途上有重要区别&#xff1a;1. 类型定义char* char 是C内置的基本类型&#xff0c;表示字符&#xff08;通常是1字节&#xff09;。 char* 常用于&#xff…

【node】npm包本地开发与调试

npm link 进入本地的 babel-plugin-function-try-catch 这个 npm 包的根目录执行&#xff1a; npm link上面的命令可以将当前的这个包安装在全局&#xff08;mac 中的路径是 /usr/local/bin&#xff09;&#xff0c;也就是 npm i -g 安装包的目录。 执行后结果如图&#xff…

突破量子仿真瓶颈:微算法科技MLGO量子算法的算术化与核操作迭代模型

近年来&#xff0c;量子计算机的迅速发展和潜在的强大计算能力吸引了全球科研机构和企业的广泛关注。量子计算机利用量子力学的特性来处理复杂的计算任务&#xff0c;具有在某些方面远超经典计算机的潜力。然而&#xff0c;真正实用的量子计算机尚未大规模普及&#xff0c;因此…

python中读取 Excel 表格数据

在pandas中读取 Excel 表格后&#xff0c;有多种方式可以按列、按行提取数据&#xff0c;下面我将详细介绍常见的方法。 0.声明 在本文中我使用的excel表内容如下&#xff1a;1. 读取 Excel 文件 首先&#xff0c;我们需要使用 pandas 的 read_excel 函数读取 Excel 文件&#…

算法训练营day28 贪心算法②122.买卖股票的最佳时机II、55. 跳跃游戏、 45.跳跃游戏II 、1005.K次取反后最大化的数组和

贪心算法第二篇博客&#xff01;感觉这篇博客中的算法都很巧妙&#xff0c;需要动动脑筋 122.买卖股票的最佳时机II &#xff08;这道题可以遍历数组&#xff0c;如果不能遍历的话&#xff0c;就不能做了&#xff0c;需要注意的是&#xff1a; 只有一只股票&#xff01;当前只…

NumPy核心操作全攻略

NumPy&#xff08;Numerical Python&#xff09;是 Python 生态中用于科学计算的核心库&#xff0c;提供高性能的多维数组对象&#xff08;ndarray&#xff09;及相关的数学运算工具。其核心功能围绕数组操作、线性代数、随机数生成等&#xff0c;是数据科学、机器学习等领域的…

Redis 主从同步对象模型

淘汰策略 对最外层的key进行淘汰 expire(秒)/pexpire(毫秒) ttlmaxmemory:最大内存的一半(持久化fork()子进程) 数据迁移需要额外的空间 maxmemory-policy 提供淘汰机制 默认不会淘汰 lru 最近最少使用 lfu最近最少频次 voltaile 对由expire的进行淘汰持久化: fork:写时复制原理…

C++ 使用 constexpr 、查表法、分治法加速位镜像翻转

代码////// brief 左右翻转位。////// note 翻转后&#xff0c;最低位位将变为最高位&#xff0c;最高位将变为最低位。//////template <typename T>requires(std::is_same_v<T, uint8_t>)constexpr T Reverse(T value){int32_t bit_count sizeof(T) * 8;for (int…

知识库搭建之Meilisearch‘s 搜索引擎 测评-东方仙盟测评师

windows 启动后 启动成功后关键信息 Config file path: "none" Database path: "./data.ms" Server listening on: "http://localhost:7700" Environment: "development" Commit SHA: &quo…

【笔记】Anaconda 重装后虚拟环境写入路径异常的完整排查与解决过程

Anaconda 安装[仅为当前用户安装/为所有用户安装]选项对环境变量设置的影响_anaconda没有添加环境变量-CSDN博客 Anaconda 路径治理指南&#xff1a;路径精简、权限优化与环境隔离-CSDN博客 Windows系统下手动升级Anaconda的详细指南_anaconda升级-CSDN博客 Conda 命令大全&…

QuecPython-正则表达式

该模块通过正则表达式匹配数据。目前支持的操作符较少&#xff0c;部分操作符暂不支持。示例&#xff1a;import ureres $GNRMC,133648.00,A,3149.2969,N,11706.9027,E,0.055,,311020,,,A,V*18 $GNGGA,133648.00,3149.2969,N,11706.9027,E,1,24,1.03,88.9,M,,M,,*6C $GNGLL,3…

QT窗口(3)-状态栏

QT窗口&#xff08;3&#xff09;-状态栏 状态栏 代码如下&#xff1a;//存在就获取&#xff0c;不存在就创建QStatusBar*statusBarthis->statusBar();this->setStatusBar(statusBar);//显示一个临时消息statusBar->showMessage("这是一个状态消息");运行结…

更具个性的域名:解锁互联网多元价值的钥匙

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…

深度学习模块实践手册(第十一期)

46、缩放点积注意力模块论文《Attention Is All You Need》1、作用&#xff1a; 缩放点积注意力&#xff08;Scaled Dot-Product Attention&#xff09;是 Transformer 模型的核心组件&#xff0c;旨在解决序列建模中长距离依赖关系捕捉的问题。传统的循环神经网络&#xff08;…

C++高级技术详解

C高级技术详解 目录 模板 (Templates)右值和移动语义 (Rvalue and Move Semantics)定位 new (Placement new)强类型 (Strong Types)智能指针 (Smart Pointers)容器和算法 (Containers and Algorithms)Lambda表达式常量表达式 (constexpr)多线程和并发 (Multithreading and Co…