開發思路

1、使用fastapi開發第一個后端接口
2、使用fastapi解決cors跨域的問題。cors跨域是瀏覽器的問題，只要使用瀏覽器，不同IP或者不同端口之間通信，就會存在這個問題。前后端分離是兩個服務，端口不一樣，所以必須要解決跨域的問題。
3、使用vite創建一個JavaScript的vue3項目，整合primeflex依賴，編寫一個簡單的vue3界面
4、整合axios依賴，用來請求后端的數據，實現vue3和fastapi的前后端交互通信
5、在vue3中，使用axios請求fastapi開發的接口，并將接口的返回數據，渲染到vue3開發的頁面中

后端代碼

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddlewareapp = FastAPI()origins = ["*"
]app.add_middleware(CORSMiddleware,allow_origins=origins,allow_credentials=True,allow_methods=["*"],allow_headers=["*"],
)@app.get("/")
async def main():arr = [str(i) for i in range(2, 101, 2)]message = ",".join(arr)return {"message": message}if __name__ == '__main__':import uvicornuvicorn.run(app, host='0.0.0.0', port=8001)

前端代碼

<script setup>
import axios from "axios"
import {onMounted, ref} from "vue";const message = ref("frontend variable")onMounted(() => {console.log("on mounted")axios.get('http://127.0.0.1:8001/').then(function (response) {// 處理成功情況console.log("response", response);console.log("response", response.data.message);message.value = response.data.message}).catch(function (error) {// 處理錯誤情況console.log(error);}).finally(function () {// 總是會執行});
})</script><template><h1>{{ message }}</h1>
</template>

開發后端項目

創建虛擬環境：

python -m venv venv

使用pycharm選擇虛擬環境：

選擇venv目錄下的python：

此時重新打開pycharm的終端，前面會多一個venv：

有了就說明我們的環境配置好了。

安裝fastapi

pip install fastapi

開發第一個fastapi接口

文檔地址：https://fastapi.tiangolo.com/zh/tutorial/first-steps/

from fastapi import FastAPIapp = FastAPI()@app.get("/")
async def root():return {"message": "Hello World"}if __name__ == '__main__':import uvicornuvicorn.run(app, host='0.0.0.0', port=8001)

解決跨域的問題

文檔：https://fastapi.tiangolo.com/zh/tutorial/cors/

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddlewareapp = FastAPI()app.add_middleware(CORSMiddleware,allow_origins=["*"],allow_credentials=True,allow_methods=["*"],allow_headers=["*"],
)@app.get("/")
async def main():return {"message": "Hello World"}if __name__ == '__main__':import uvicornuvicorn.run(app, host='0.0.0.0', port=8001)

創建前端項目

pnpm create vite

使用webstorm打開項目，點擊配置：

配置一個npm的啟動：

安裝依賴：

pnpm i

點擊啟動按鈕：

瀏覽器訪問：http://127.0.0.1:5173

安裝axios

pnpm i axios

修改 src/App.vue，請求后端數據：

<script setup>
import axios from "axios";
import {ref} from "vue";const message = ref("frontend variable")
axios.get('http://127.0.0.1:8001/').then(function (response) {// 處理成功情況console.log(response);message.value = response.data.message}).catch(function (error) {// 處理錯誤情況console.log(error);}).finally(function () {// 總是會執行});
</script><template>
<h1>{{ message }}</h1>
</template>

整合primeflex

文檔：https://primeflex.org/

pnpm i primeflex

修改 src/main.js

import {createApp} from 'vue'
import 'primeflex/primeflex.css'
import 'primeflex/themes/primeone-light.css '
import App from './App.vue'createApp(App).mount('#app')

修改 src/App.vue

<script setup>
import axios from "axios";
import {ref} from "vue";const message = ref("frontend variable")
axios.get('http://127.0.0.1:8001/').then(function (response) {// 處理成功情況console.log(response);message.value = response.data.message}).catch(function (error) {// 處理錯誤情況console.log(error);}).finally(function () {// 總是會執行});
</script><template>
<div class="w-20rem h-12rem bg-indigo-300">{{ message }}</div>
</template>