vue3+ts+flask+websocket实现实时异物检测

文章目录

1.学习目的

最近有个需求,界面需要有两种检测方式,一种是静态的,也就是使用普通的flask接口即可,一种是利用前后端建立websocket通信,实现数据实时传输,然后我们后端检测模型实时进行视频检测,这样一来,我们就可以方便的进行检测见面展示,以及后期的语音播报等下游任务。

2.技术栈

  • 前端:vue3+ts
  • 后端:flask/fastAPI中的websocket

3.框架一些前置知识以及bug处理

图1 vue3主程序入口

图2 语法校验需要添加的rules

如上图,HelloWorld报错,提示信息实际上是说这个组件没有默认导出,但是vue3新特性明确指出,setup语法糖是默认导出的,再仔细检查,vetur语法检查存在bug,所以我们不必太过理会。

上图是一些ts配置,可以配一下。

对vue不太了解的话,建议去官网学习

通过这个,可以把传统的按钮嵌套icon进行封装,直接调用elementUI即可很好的实现这种带log的按钮

4.具体实现

  • 利用webpack搭建vue3项目
  • npm install
    - 利用npm安装elementui库
    - vue3--main.ts中引入elementUI

    注意这里是全局引入,如果需要轻量化引入,可以参考elementUI官网进行处理,这里不再重复说明。

    使用icon需要额外下载这个包,不然看不见那些icon

后端返回数据的时候,还是采用mimeType比较好,必须设置好前后端返回数据类型格式。必须设置好相应的前后端交互数据类型。
文件上传操作

typescript 复制代码
</template>
 <input type="file" @change="onFileChange" />
</template>
<!-- 编写界面逻辑js -->
 <script setup lang='ts'>
const onFileChange = (event: Event) => {
  const target = event.target as HTMLInputElement;
  if (target.files && target.files[0]) {
    selectedFile.value = target.files[0];
  }
};
</script>

4.结果展示

5.总结

本次改进比较简单,关注我,继续学习前端知识~

相关推荐
PixelMind5 分钟前
【LLIE技术专题】 SCI代码讲解
图像处理·python·低照度图像增强·llie
天才测试猿27 分钟前
Python常用自动化测试框架—Pytest详解
自动化测试·软件测试·python·测试工具·职场和发展·测试用例·pytest
胡耀超40 分钟前
2、CPU深度解析:从微架构到性能优化
python·性能优化·架构·arm·cpu·x86·多核心
en-route1 小时前
使用 Flask 构建 Web 应用:静态页面与动态 API 访问
前端·python·flask
ZeroNews内网穿透1 小时前
新版发布!“零讯”微信小程序版本更新
运维·服务器·网络·python·安全·微信小程序·小程序
hrrrrb2 小时前
【Python】文件处理(二)
开发语言·python
太阳伞下的阿呆2 小时前
Http与WebSocket
websocket·网络协议·http
万粉变现经纪人5 小时前
如何解决 pip install 安装报错 ModuleNotFoundError: No module named ‘tokenizers’ 问题
python·selenium·测试工具·scrapy·beautifulsoup·fastapi·pip
编程武士7 小时前
从50ms到30ms:YOLOv10部署中图像预处理的性能优化实践
人工智能·python·yolo·性能优化
我的xiaodoujiao7 小时前
Windows系统Web UI自动化测试学习系列2--环境搭建--Python-PyCharm-Selenium
开发语言·python·测试工具