Vue-21-利用Vue3的axios+Python的flask實現前后端交互功能

文章目錄

  • 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…