簡介

在我們的應(yīng)用小程序中，我們是前后端分離的。前端頁面只負(fù)責(zé)渲染，而后端需要處理數(shù)據(jù)。但是如果遇到數(shù)據(jù)量很大的情況下，我們處理起來就很緩慢，如果我們想通過AJAX的方法追蹤后臺數(shù)據(jù)變化的進(jìn)度，需要用到輪詢的方案，這個是非常消耗資源的。這里我們用VueJS和Fastapi的小例子演示前端傳遞數(shù)據(jù)，后臺用10秒處理數(shù)據(jù)并實時反應(yīng)進(jìn)度給前臺的實現(xiàn)。

后端Fastapi

因為后端寫起來相對簡單，我們先寫個后端

新建my-fastapi目錄，然后新建main.py文件，代碼如下所示：

前端

前端用Vuejs+NaiveUI實現(xiàn)：

創(chuàng)建一個Vite項目：

安裝 Naive-UI

將src/app.vue?中的內(nèi)容刪除，替換成下面的：

完整效果和原文請查看：

https://www.xiaohanyuese.top/blogs/c9-vue-websocket