用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
关键词: