当前位置: 首页 > 热点

用VueJS和Fastapi通过websocket实现进度条追踪


(资料图)

简介

在我们的应用小程序中,我们是前后端分离的。前端页面只负责渲染,而后端需要处理数据。但是如果遇到数据量很大的情况下,我们处理起来就很缓慢,如果我们想通过AJAX的方法追踪后台数据变化的进度,需要用到轮询的方案,这个是非常消耗资源的。这里我们用VueJS和Fastapi的小例子演示前端传递数据,后台用10秒处理数据并实时反应进度给前台的实现。

后端Fastapi

因为后端写起来相对简单,我们先写个后端

新建my-fastapi目录,然后新建文件,代码如下所示:

前端

前端用Vuejs+NaiveUI实现:

创建一个Vite项目:

安装 Naive-UI

src/中的内容删除,替换成下面的:

完整效果和原文请查看:

/blogs/c9-vue-websocket

关键词:

相关阅读

Copyright   2015-2022 每日技术网 版权所有  备案号:浙ICP备2022016517号-15   联系邮箱:5 146 761 13 @qq.com