文章目錄
- 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>