前端vscode vite vue3 typescript OpenPlayers flv.jsVS Code前端代码编辑器只是开发工具不参与程序运行用来写.ts、.vue、样式文件提供代码提示、调试、插件支持。Vite构建工具作用开发时快速启动本地调试服务、热更新改代码页面立刻刷新打包上线把源码编译、压缩输出 html/js/css 静态资源包丢给 Nginx 部署。 对比旧方案 Webpack启动更快、热更新延迟低现在 Vue3 项目首选构建工具。Vue3前端框架网页核心业务框架负责组织页面组件、管理界面状态、渲染 DOM。 页面按组件拆分登录页、设备列表、地图面板、视频弹窗、告警表格等。TypeScriptTS 开发语言JavaScript 超集增加类型定义。 可以提前校验变量、接口数据格式减少线上 bug大型监控平台项目必备最终打包时会编译成普通 JS 在浏览器运行。OpenLayers【OpenLayers 地图库】开源 WebGIS 地图库。 用途加载底图、绘制无人机航线、标记设备点位、绘制围栏、轨迹回放Web 端地图核心依赖。flv.js浏览器原生不支持直接播放实时监控流RTSP。 后端 / 流媒体服务把视频转成FLV 格式 HTTP-FLVflv.js 在浏览器解码渲染视频画面 典型场景无人机图传、摄像头实时视频窗口。类比QtC二、后端技术栈Java Spring Cloud 微服务架构Java后端开发编程语言。Spring Cloud一套微服务生态套件不是单一框架。 把庞大系统拆成多个独立小服务 例如用户权限服务、设备管理服务、航线任务服务、视频流转发服务、历史数据存储服务。 每个服务独立部署、独立扩容某一个模块故障不导致整个平台崩溃适合无人机监控这种业务系统。三、服务间通信Spring Cloud OpenFeignSpring Cloud 内部组件场景微服务和微服务之间互相调用例告警服务需要查询设备信息 → 调用设备服务接口本质封装 HTTP 客户端声明式调用。只需要写接口注解不需要手写 http 请求代码简化微服务内部通信。区分边界✅ OpenFeign后端 ↔ 后端❌ 不用于 前端 ↔ 后端四、前后端实时通信HTTP/HTTPS JSONHTTP/HTTPS JSON前端向后端常规请求方案 前端 axios/fetch 发起 http 请求后端返回 JSON 结构数据。适用查询设备列表、下发航线指令、分页查询历史记录。 HTTPS HTTP 加密版本生产环境使用。单纯 HTTP 是单向通信只能前端主动问后端后端无法主动推送消息。WebSocket用于双向实时通信五、完整数据流向串联演示开发人员用 VS Code 写 Vue3TS 代码Vite 本地调试打包后的前端静态资源部署在 Nginx操作员打开浏览器访问页面场景 1查询设备信息前端 axios 发起 HTTPS 请求 → 网关 → 设备微服务Java/SpringCloud→ 查询数据库返回 JSON 给前端OpenLayers 刷新地图点位。场景 2查看无人机视频前端通过 flv.js 连接流媒体地址加载 HTTP-FLV 视频流播放画面场景 3微服务内部联动告警服务检测到异常需要获取设备名称 → 通过OpenFeign远程调用设备服务接口。