用VueJS和Fastapi通过websocket实现进度条追踪
2023-08-09 22:09:34
|
来源：哔哩哔哩
(资料图)
简介
在我们的应用小程序中，我们是前后端分离的。前端页面只负责渲染，而后端需要处理数据。但是如果遇到数据量很大的情况下，我们处理起来就很缓慢，如果我们想通过AJAX的方法追踪后台数据变化的进度，需要用到轮询的方案，这个是非常消耗资源的。这里我们用VueJS和Fastapi的小例子演示前端传递数据，后台用10秒处理数据并实时反应进度给前台的实现。
后端Fastapi
因为后端写起来相对简单，我们先写个后端
新建my-fastapi目录，然后新建文件，代码如下所示：
前端
前端用Vuejs+NaiveUI实现：
创建一个Vite项目：
安装 Naive-UI
将src/中的内容删除，替换成下面的：
完整效果和原文请查看：
/blogs/c9-vue-websocket
