前端：

vscode + vite + vue3 + typescript + OpenPlayers + flv.js

1. VS Code
   前端代码编辑器，只是开发工具，不参与程序运行；用来写.ts、.vue、样式文件，提供代码提示、调试、插件支持。

2. Vite（构建工具）
   作用：
   开发时：快速启动本地调试服务、热更新（改代码页面立刻刷新）
   打包上线：把源码编译、压缩，输出 html/js/css 静态资源包，丢给 Nginx 部署。 对比旧方案 Webpack：启动更快、热更新延迟低，现在 Vue3 项目首选构建工具。

3. Vue3（前端框架）
   网页核心业务框架，负责组织页面组件、管理界面状态、渲染 DOM。 页面按组件拆分：登录页、设备列表、地图面板、视频弹窗、告警表格等。

4. TypeScript（TS 开发语言）
   JavaScript 超集，增加类型定义。 可以提前校验变量、接口数据格式，减少线上 bug，大型监控平台项目必备；最终打包时会编译成普通 JS 在浏览器运行。

5. OpenLayers【OpenLayers 地图库】
   开源 WebGIS 地图库。 用途：加载底图、绘制无人机航线、标记设备点位、绘制围栏、轨迹回放，Web 端地图核心依赖。

6. flv.js
   浏览器原生不支持直接播放实时监控流（RTSP）。 后端 / 流媒体服务把视频转成FLV 格式 + HTTP-FLV，flv.js 在浏览器解码渲染视频画面； 典型场景：无人机图传、摄像头实时视频窗口。

类比Qt（C++）

二、后端技术栈

Java + Spring Cloud 微服务架构

1. Java：后端开发编程语言。
2. Spring Cloud一套微服务生态套件，不是单一框架。 把庞大系统拆成多个独立小服务： 例如：用户权限服务、设备管理服务、航线任务服务、视频流转发服务、历史数据存储服务。 每个服务独立部署、独立扩容，某一个模块故障不导致整个平台崩溃，适合无人机监控这种业务系统。

三、服务间通信：Spring Cloud OpenFeign

Spring Cloud 内部组件

• 场景：微服务和微服务之间互相调用例：告警服务需要查询设备信息 → 调用设备服务接口
• 本质：封装 HTTP 客户端，声明式调用。只需要写接口注解，不需要手写 http 请求代码，简化微服务内部通信。

区分边界：
✅ OpenFeign：后端 ↔ 后端
❌ 不用于 前端 ↔ 后端

四、前后端实时通信：HTTP/HTTPS + JSON

1. HTTP/HTTPS + JSON前端向后端常规请求方案： 前端 axios/fetch 发起 http 请求，后端返回 JSON 结构数据。
   适用：查询设备列表、下发航线指令、分页查询历史记录。 HTTPS = HTTP 加密版本，生产环境使用。
   单纯 HTTP 是单向通信：只能前端主动问后端，后端无法主动推送消息。
2. WebSocket用于双向实时通信

五、完整数据流向串联演示

1. 开发人员用 VS Code 写 Vue3+TS 代码，Vite 本地调试；
2. 打包后的前端静态资源部署在 Nginx；
3. 操作员打开浏览器访问页面；
4. 场景 1：查询设备信息前端 axios 发起 HTTPS 请求 → 网关 → 设备微服务（Java/SpringCloud）→ 查询数据库，返回 JSON 给前端；OpenLayers 刷新地图点位。
5. 场景 2：查看无人机视频前端通过 flv.js 连接流媒体地址，加载 HTTP-FLV 视频流播放画面；
6. 场景 3：微服务内部联动告警服务检测到异常，需要获取设备名称 → 通过OpenFeign远程调用设备服务接口。