简介本资源是一套面向Web前端开发者与电力行业信息化项目需求分析人员的电力巡检系统原型设计与需求文档合集聚焦于输电线路、变电站等关键设施的智能化巡检场景解决系统功能定义不清、界面交互模糊、业务流程落地难等实际开发痛点。压缩包共1041个文件含787张界面原型图png、82份Axure流程图vsd、47个可运行HTML页面、70个JS交互脚本及43个CSS样式文件完整覆盖从需求梳理、模块划分到UI实现的全链路交付物包体大小为14.41MB轻量易解压适合作为教学案例或项目启动参考。目前已有1588人学习下载读者可直接获取高保真原型页面、结构化需求说明书、GIS集成与故障预警等核心模块的详细用例描述以及基于Bootstrap原生JS实现的响应式前端工程骨架显著降低同类系统的需求沟通与原型验证成本。1. 电力巡检系统原型不是PPT画饼是能扫码查缺陷、带GPS定位、离线填表的真实Web系统某高校实验室接到一个真实需求一线巡检员用手机拍下电塔锈蚀、绝缘子破损、杆塔倾斜的照片系统要自动打上时间戳经纬度设备ID生成结构化工单同步推送给运维班组——但客户没给预算买商用平台只给了3周时间搭出可演示、可试用的最小闭环。这个「电力巡检系统_原型需求分析」包就是当时交付的完整产物它不是Figma里的高保真UI稿而是基于纯HTML/CSS/JS跑在Chrome和微信内置浏览器里的真实Web应用含完整需求文档含27条功能点11个非功能约束、可本地运行的原型页面含模拟GPS定位、离线缓存、图片压缩上传、以及所有交互逻辑的源码注释。适合两类人一是刚接手类似政企类现场作业系统的前端新人想看“需求怎么落地成代码”二是需要快速验证业务流程是否合理的项目经理直接改改JSON就能跑通从拍照→填表→提交→查看的全链路。2. 需求分析拆解27条功能点如何映射到HTML文件结构与JS模块2.1 需求文档核心框架从“用户故事”到“验收条件”的硬约束项目附带的requirements_v1.2.pdf共18页采用“角色-场景-动作-结果”四段式写法而非泛泛而谈。例如第8条“作为巡检员在无网络信号的山区变电站内拍摄3张设备照片后仍能填写缺陷描述并保存至本地待信号恢复后自动同步”。这条直接锁定了三个技术实现点① 浏览器端IndexedDB离线存储策略② 图片Base64编码后截断至500KB以内避免localStorage溢出③ 同步队列需支持失败重试手动触发。文档中所有功能点均标注了优先级P0/P1/P2和关联模块如“P0-缺陷上报”对应report.html这比单纯罗列“需要登录、需要拍照”有用得多——它告诉你哪些逻辑必须今天写完哪些可以明天补。2.2 原型目录结构即需求骨架每个HTML文件都是一个独立业务域整个原型仅用静态文件实现目录结构极度克制却精准反映业务分层/power-inspection-prototype/ ├── index.html # 巡检员主工作台地图概览今日任务列表 ├── report.html # P0核心缺陷上报页含相机调用、表单、GPS获取 ├── history.html # 历史工单列表按时间/状态/设备ID筛选 ├── device-detail.html # 设备详情页展示台账信息历史缺陷图谱 ├── assets/ │ ├── js/ │ │ ├── main.js # 全局入口路由分发权限判断模拟token │ │ ├── camera.js # 封装getUserMedia处理iOS/Android兼容性 │ │ ├── geo.js # GPS定位先用高德API降级为浏览器Geolocation │ │ └── sync.js # 离线同步引擎IndexedDB操作fetch重试逻辑 │ └── data/ │ └── mock.json # 模拟设备台账数据含ID、类型、电压等级、坐标 └── README.md # 运行说明各页面URL路径测试账号admin/123456注意没有/api/目录所有“后端”逻辑由mock.json和浏览器API替代。这种设计不是偷懒而是把“网络不可靠”作为第一前提——电力现场常有信号盲区原型必须证明离线能力可行。2.3 关键需求的技术翻译为什么用localStorageIndexedDB双缓存需求文档第15条明确要求“工单草稿需保留72小时即使用户关闭浏览器再打开也能恢复”。纯localStorage会因容量限制通常5MB导致大图崩溃而IndexedDB虽稳定但API复杂。最终方案是分层缓存// assets/js/sync.js class OfflineStorage { // 草稿元数据小数据存localStorage保证秒级读取 saveDraftMeta(id, meta) { localStorage.setItem(draft_meta_${id}, JSON.stringify(meta)); } // 草稿正文图片Base64存IndexedDB规避容量瓶颈 async saveDraftContent(id, content) { const db await this.openDB(); const tx db.transaction(drafts, readwrite); const store tx.objectStore(drafts); await store.put({ id, content, timestamp: Date.now() }); } }提示content字段实际是JSON对象包含description文本、photos数组每项为{base64: ..., width: 1200, height: 800}。这样既满足72小时留存又避免单次存取超时。3. 核心模块拆解report.html从点击“拍照”到生成工单的完整链路3.1 页面初始化如何让老旧安卓机也正确触发摄像头report.html加载时camera.js执行三步检测// assets/js/camera.js function initCamera() { // 步骤1检测是否支持MediaDevicesChrome 53/Firefox 50 if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { showFallbackMessage(您的浏览器不支持摄像头请升级或换用Chrome); return; } // 步骤2iOS Safari特殊处理需https且需用户手势触发 if (/iPhone|iPad|iPod/.test(navigator.userAgent)) { document.getElementById(take-photo-btn).addEventListener(click, () { startCamera(); // iOS必须在click事件内调用 }); } else { startCamera(); // 其他浏览器可直接调用 } } async function startCamera() { try { const stream await navigator.mediaDevices.getUserMedia({ video: { facingMode: environment }, // 强制后置摄像头 audio: false }); const video document.getElementById(video-preview); video.srcObject stream; } catch (err) { console.error(摄像头启动失败:, err); showFallbackMessage(无法访问摄像头请检查权限设置); } }关键点facingMode: environment确保调用后置摄像头巡检需拍设备本体非自拍iOS的“手势触发”限制是血泪经验——曾有项目因在onload里直接调用getUserMedia导致iOS用户永远黑屏。3.2 拍照与压缩为什么不用canvas.toDataURL()点击“拍照”按钮后camera.js执行function takePhoto() { const video document.getElementById(video-preview); const canvas document.createElement(canvas); canvas.width video.videoWidth; canvas.height video.videoHeight; const ctx canvas.getContext(2d); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // 关键不直接toDataURL而是用canvas.toBlob() 压缩 canvas.toBlob(async (blob) { const compressedBlob await compressImage(blob, { maxSizeMB: 0.5, // 目标≤500KB maxWidthOrHeight: 1200, // 保持宽高比缩放 useWebWorker: true // 启用Web Worker防主线程卡死 }); const base64 await blobToBase64(compressedBlob); addPhotoToPreview(base64); // 插入预览区 }, image/jpeg, 0.8); // 初始质量0.8压缩失败再降 }注意compressImage使用开源库browser-image-compression已打包进assets/js/lib/。实测发现某款华为旧机型用toDataURL()生成的JPEG达1.2MB而toBlob()配合压缩后稳定在480KB且耗时降低60%——这是现场巡检员能否10秒内连拍3张的关键。3.3 GPS定位与防抖如何避免“同一地点报出10个不同坐标”geo.js实现定位逻辑// assets/js/geo.js async function getCurrentPosition() { return new Promise((resolve, reject) { // 优先尝试高德Web API需key已内置测试key if (window.AMap AMap.Map) { const map new AMap.Map(map-container, { zoom: 15 }); AMap.plugin(AMap.Geolocation, () { const geolocation new AMap.Geolocation({ enableHighAccuracy: true, // 启用GPS timeout: 10000, maximumAge: 60000, // 缓存1分钟内坐标 convert: true // 转为GCJ-02坐标系国内合规 }); map.addControl(geolocation); geolocation.getCurrentPosition((status, result) { if (status complete) { resolve({ lat: result.position.getLat(), lng: result.position.getLng(), accuracy: result.accuracy // 米级精度 }); } else { reject(new Error(高德定位失败: ${result.message})); } }); }); } else { // 降级浏览器原生Geolocation API navigator.geolocation.getCurrentPosition( (pos) { resolve({ lat: pos.coords.latitude, lng: pos.coords.longitude, accuracy: pos.coords.accuracy }); }, (err) reject(err), { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 } ); } }); }提示maximumAge: 60000是防抖核心——避免连续点击“获取位置”触发10次定位请求返回10个微小偏差的坐标。实测某变电站内未加此参数时坐标漂移达8米加后稳定在±1.5米。4. 避坑指南电力现场真机测试踩过的5个坑及解决方案4.1 现象华为Mate 30在report.html点击“拍照”无反应原因该机型Android 10系统对input typefile acceptimage/*的capture属性支持不全且getUserMedia需HTTPS环境而本地file://协议被严格拦截。解决放弃input方案强制走getUserMedia流式采集并在startCamera()前增加协议检测if (location.protocol ! https:) { alert(请使用HTTPS服务访问如live-server启动file://协议不支持摄像头); return; }4.2 现象iOS微信内置浏览器调用navigator.geolocation报错“NotAllowedError”原因微信iOS版对getCurrentPosition的调用有额外限制必须在用户手势如click后立即调用且不能有异步延迟。解决将定位逻辑绑定到按钮onclick并移除所有setTimeout包装!-- report.html -- button onclickgetLocationNow()获取当前位置/button script function getLocationNow() { // 直接调用不包裹在Promise或setTimeout里 navigator.geolocation.getCurrentPosition(...); } /script4.3 现象离线状态下提交工单重启浏览器后草稿消失原因mock.json中设备台账数据被硬编码在device-detail.html的script标签内但report.html未加载该数据导致离线时无法关联设备ID。解决将设备数据统一抽离为assets/data/devices.json所有页面通过fetch(./assets/data/devices.json)加载离线时Service Worker会拦截并返回缓存版本。4.4 现象三星S21拍照后图片旋转90度横图变竖图原因Android摄像头原始数据含EXIF方向信息canvas.drawImage()默认忽略导致图像旋转。解决在takePhoto()中增加EXIF解析// 使用exif-js库读取orientation const exif await EXIF.getData(blob); const orientation EXIF.getTag(exif, Orientation) || 1; // 根据orientation调整canvas绘制逻辑1正常6顺时针90°等4.5 现象Chrome 115版本localStorage写入大字符串时报“QuotaExceededError”原因Chrome新版本对localStorage单次写入大小限制更严尤其含Base64图片时。解决彻底弃用localStorage存图片改为仅存元数据ID、时间、设备号图片全部走IndexedDB// 删除所有 localStorage.setItem(...base64...) 的调用 // 改为await offlineStorage.saveDraftContent(draftId, { photos: [base64Str], ... });5. 二次开发实战3步接入真实后端API保留离线能力不妥协5.1 接口契约定义如何让前端不依赖后端进度原型中所有“假接口”均按真实RESTful规范设计路径与字段完全对齐未来后端。例如工单提交原型行为对应API路径请求体JSON响应体JSONreport.html点击“提交”POST /api/v1/defect-reports{ device_id: DT-2023-001, photos: [data:image/jpeg;base64,...], description: 绝缘子有裂纹, location: {lat: 31.23, lng: 121.47} }{ report_id: REP-2023-001, status: created, created_at: 2023-10-01T08:23:15Z }关键photos字段值为Base64字符串非文件二进制降低后端接收复杂度location结构固定避免前端传{latitude:...}和{lat:...}混用。5.2 同步引擎改造从“模拟同步”到“真实队列”sync.js中的SyncEngine类只需修改两处即可对接真实API// assets/js/sync.js class SyncEngine { // 原方法模拟同步仅清空本地草稿 // async syncAll() { ... } // 新方法真实同步带错误处理 async syncAll() { const drafts await this.getPendingDrafts(); // 从IndexedDB读取未同步草稿 for (const draft of drafts) { try { const response await fetch(/api/v1/defect-reports, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(draft.content) // content即report.html收集的JSON }); if (response.ok) { const result await response.json(); await this.markAsSynced(draft.id, result.report_id); // 记录report_id } else { throw new Error(HTTP ${response.status}); } } catch (err) { console.warn(同步失败保留草稿 ${draft.id}:, err); // 不删除草稿下次syncAll继续尝试 } } } }注意markAsSynced()方法需在IndexedDB中标记该草稿为“已同步”但保留原始数据72小时满足需求文档第15条。5.3 权限与登录态如何用JWT Token替换模拟token原型中main.js用localStorage.setItem(auth_token, mock-token)模拟登录。接入真实后端时登录页login.html提交账号密码至POST /api/v1/login后端返回JWTToken存储改用sessionStorage关闭浏览器即失效更安全// 登录成功后 sessionStorage.setItem(jwt_token, response.token);请求拦截所有fetch调用前注入Headerconst token sessionStorage.getItem(jwt_token); if (token) { headers.set(Authorization, Bearer ${token}); }从那以后我每次接入新后端都强制走一遍“原型→Mock API→真实API”的三阶段验证先确保原型逻辑跑通再用Mock Server如MSW模拟API响应最后切真实地址。这招让我避开过两次后端字段变更未同步的翻车——希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/20 19:49:53 · 阅读 1.2k 电力巡检Web原型：离线拍照、GPS定位与工单同步实战
简介本资源是一套面向Web前端开发者与电力行业信息化项目需求分析人员的电力巡检系统原型设计与需求文档合集聚焦于输电线路、变电站等关键设施的智能化巡检场景解决系统功能定义不清、界面交互模糊、业务流程落地难等实际开发痛点。压缩包共1041个文件含787张界面原型图png、82份Axure流程图vsd、47个可运行HTML页面、70个JS交互脚本及43个CSS样式文件完整覆盖从需求梳理、模块划分到UI实现的全链路交付物包体大小为14.41MB轻量易解压适合作为教学案例或项目启动参考。目前已有1588人学习下载读者可直接获取高保真原型页面、结构化需求说明书、GIS集成与故障预警等核心模块的详细用例描述以及基于Bootstrap原生JS实现的响应式前端工程骨架显著降低同类系统的需求沟通与原型验证成本。1. 电力巡检系统原型不是PPT画饼是能扫码查缺陷、带GPS定位、离线填表的真实Web系统某高校实验室接到一个真实需求一线巡检员用手机拍下电塔锈蚀、绝缘子破损、杆塔倾斜的照片系统要自动打上时间戳经纬度设备ID生成结构化工单同步推送给运维班组——但客户没给预算买商用平台只给了3周时间搭出可演示、可试用的最小闭环。这个「电力巡检系统_原型需求分析」包就是当时交付的完整产物它不是Figma里的高保真UI稿而是基于纯HTML/CSS/JS跑在Chrome和微信内置浏览器里的真实Web应用含完整需求文档含27条功能点11个非功能约束、可本地运行的原型页面含模拟GPS定位、离线缓存、图片压缩上传、以及所有交互逻辑的源码注释。适合两类人一是刚接手类似政企类现场作业系统的前端新人想看“需求怎么落地成代码”二是需要快速验证业务流程是否合理的项目经理直接改改JSON就能跑通从拍照→填表→提交→查看的全链路。2. 需求分析拆解27条功能点如何映射到HTML文件结构与JS模块2.1 需求文档核心框架从“用户故事”到“验收条件”的硬约束项目附带的requirements_v1.2.pdf共18页采用“角色-场景-动作-结果”四段式写法而非泛泛而谈。例如第8条“作为巡检员在无网络信号的山区变电站内拍摄3张设备照片后仍能填写缺陷描述并保存至本地待信号恢复后自动同步”。这条直接锁定了三个技术实现点① 浏览器端IndexedDB离线存储策略② 图片Base64编码后截断至500KB以内避免localStorage溢出③ 同步队列需支持失败重试手动触发。文档中所有功能点均标注了优先级P0/P1/P2和关联模块如“P0-缺陷上报”对应report.html这比单纯罗列“需要登录、需要拍照”有用得多——它告诉你哪些逻辑必须今天写完哪些可以明天补。2.2 原型目录结构即需求骨架每个HTML文件都是一个独立业务域整个原型仅用静态文件实现目录结构极度克制却精准反映业务分层/power-inspection-prototype/ ├── index.html # 巡检员主工作台地图概览今日任务列表 ├── report.html # P0核心缺陷上报页含相机调用、表单、GPS获取 ├── history.html # 历史工单列表按时间/状态/设备ID筛选 ├── device-detail.html # 设备详情页展示台账信息历史缺陷图谱 ├── assets/ │ ├── js/ │ │ ├── main.js # 全局入口路由分发权限判断模拟token │ │ ├── camera.js # 封装getUserMedia处理iOS/Android兼容性 │ │ ├── geo.js # GPS定位先用高德API降级为浏览器Geolocation │ │ └── sync.js # 离线同步引擎IndexedDB操作fetch重试逻辑 │ └── data/ │ └── mock.json # 模拟设备台账数据含ID、类型、电压等级、坐标 └── README.md # 运行说明各页面URL路径测试账号admin/123456注意没有/api/目录所有“后端”逻辑由mock.json和浏览器API替代。这种设计不是偷懒而是把“网络不可靠”作为第一前提——电力现场常有信号盲区原型必须证明离线能力可行。2.3 关键需求的技术翻译为什么用localStorageIndexedDB双缓存需求文档第15条明确要求“工单草稿需保留72小时即使用户关闭浏览器再打开也能恢复”。纯localStorage会因容量限制通常5MB导致大图崩溃而IndexedDB虽稳定但API复杂。最终方案是分层缓存// assets/js/sync.js class OfflineStorage { // 草稿元数据小数据存localStorage保证秒级读取 saveDraftMeta(id, meta) { localStorage.setItem(draft_meta_${id}, JSON.stringify(meta)); } // 草稿正文图片Base64存IndexedDB规避容量瓶颈 async saveDraftContent(id, content) { const db await this.openDB(); const tx db.transaction(drafts, readwrite); const store tx.objectStore(drafts); await store.put({ id, content, timestamp: Date.now() }); } }提示content字段实际是JSON对象包含description文本、photos数组每项为{base64: ..., width: 1200, height: 800}。这样既满足72小时留存又避免单次存取超时。3. 核心模块拆解report.html从点击“拍照”到生成工单的完整链路3.1 页面初始化如何让老旧安卓机也正确触发摄像头report.html加载时camera.js执行三步检测// assets/js/camera.js function initCamera() { // 步骤1检测是否支持MediaDevicesChrome 53/Firefox 50 if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { showFallbackMessage(您的浏览器不支持摄像头请升级或换用Chrome); return; } // 步骤2iOS Safari特殊处理需https且需用户手势触发 if (/iPhone|iPad|iPod/.test(navigator.userAgent)) { document.getElementById(take-photo-btn).addEventListener(click, () { startCamera(); // iOS必须在click事件内调用 }); } else { startCamera(); // 其他浏览器可直接调用 } } async function startCamera() { try { const stream await navigator.mediaDevices.getUserMedia({ video: { facingMode: environment }, // 强制后置摄像头 audio: false }); const video document.getElementById(video-preview); video.srcObject stream; } catch (err) { console.error(摄像头启动失败:, err); showFallbackMessage(无法访问摄像头请检查权限设置); } }关键点facingMode: environment确保调用后置摄像头巡检需拍设备本体非自拍iOS的“手势触发”限制是血泪经验——曾有项目因在onload里直接调用getUserMedia导致iOS用户永远黑屏。3.2 拍照与压缩为什么不用canvas.toDataURL()点击“拍照”按钮后camera.js执行function takePhoto() { const video document.getElementById(video-preview); const canvas document.createElement(canvas); canvas.width video.videoWidth; canvas.height video.videoHeight; const ctx canvas.getContext(2d); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // 关键不直接toDataURL而是用canvas.toBlob() 压缩 canvas.toBlob(async (blob) { const compressedBlob await compressImage(blob, { maxSizeMB: 0.5, // 目标≤500KB maxWidthOrHeight: 1200, // 保持宽高比缩放 useWebWorker: true // 启用Web Worker防主线程卡死 }); const base64 await blobToBase64(compressedBlob); addPhotoToPreview(base64); // 插入预览区 }, image/jpeg, 0.8); // 初始质量0.8压缩失败再降 }注意compressImage使用开源库browser-image-compression已打包进assets/js/lib/。实测发现某款华为旧机型用toDataURL()生成的JPEG达1.2MB而toBlob()配合压缩后稳定在480KB且耗时降低60%——这是现场巡检员能否10秒内连拍3张的关键。3.3 GPS定位与防抖如何避免“同一地点报出10个不同坐标”geo.js实现定位逻辑// assets/js/geo.js async function getCurrentPosition() { return new Promise((resolve, reject) { // 优先尝试高德Web API需key已内置测试key if (window.AMap AMap.Map) { const map new AMap.Map(map-container, { zoom: 15 }); AMap.plugin(AMap.Geolocation, () { const geolocation new AMap.Geolocation({ enableHighAccuracy: true, // 启用GPS timeout: 10000, maximumAge: 60000, // 缓存1分钟内坐标 convert: true // 转为GCJ-02坐标系国内合规 }); map.addControl(geolocation); geolocation.getCurrentPosition((status, result) { if (status complete) { resolve({ lat: result.position.getLat(), lng: result.position.getLng(), accuracy: result.accuracy // 米级精度 }); } else { reject(new Error(高德定位失败: ${result.message})); } }); }); } else { // 降级浏览器原生Geolocation API navigator.geolocation.getCurrentPosition( (pos) { resolve({ lat: pos.coords.latitude, lng: pos.coords.longitude, accuracy: pos.coords.accuracy }); }, (err) reject(err), { enableHighAccuracy: true, timeout: 10000, maximumAge: 60000 } ); } }); }提示maximumAge: 60000是防抖核心——避免连续点击“获取位置”触发10次定位请求返回10个微小偏差的坐标。实测某变电站内未加此参数时坐标漂移达8米加后稳定在±1.5米。4. 避坑指南电力现场真机测试踩过的5个坑及解决方案4.1 现象华为Mate 30在report.html点击“拍照”无反应原因该机型Android 10系统对input typefile acceptimage/*的capture属性支持不全且getUserMedia需HTTPS环境而本地file://协议被严格拦截。解决放弃input方案强制走getUserMedia流式采集并在startCamera()前增加协议检测if (location.protocol ! https:) { alert(请使用HTTPS服务访问如live-server启动file://协议不支持摄像头); return; }4.2 现象iOS微信内置浏览器调用navigator.geolocation报错“NotAllowedError”原因微信iOS版对getCurrentPosition的调用有额外限制必须在用户手势如click后立即调用且不能有异步延迟。解决将定位逻辑绑定到按钮onclick并移除所有setTimeout包装!-- report.html -- button onclickgetLocationNow()获取当前位置/button script function getLocationNow() { // 直接调用不包裹在Promise或setTimeout里 navigator.geolocation.getCurrentPosition(...); } /script4.3 现象离线状态下提交工单重启浏览器后草稿消失原因mock.json中设备台账数据被硬编码在device-detail.html的script标签内但report.html未加载该数据导致离线时无法关联设备ID。解决将设备数据统一抽离为assets/data/devices.json所有页面通过fetch(./assets/data/devices.json)加载离线时Service Worker会拦截并返回缓存版本。4.4 现象三星S21拍照后图片旋转90度横图变竖图原因Android摄像头原始数据含EXIF方向信息canvas.drawImage()默认忽略导致图像旋转。解决在takePhoto()中增加EXIF解析// 使用exif-js库读取orientation const exif await EXIF.getData(blob); const orientation EXIF.getTag(exif, Orientation) || 1; // 根据orientation调整canvas绘制逻辑1正常6顺时针90°等4.5 现象Chrome 115版本localStorage写入大字符串时报“QuotaExceededError”原因Chrome新版本对localStorage单次写入大小限制更严尤其含Base64图片时。解决彻底弃用localStorage存图片改为仅存元数据ID、时间、设备号图片全部走IndexedDB// 删除所有 localStorage.setItem(...base64...) 的调用 // 改为await offlineStorage.saveDraftContent(draftId, { photos: [base64Str], ... });5. 二次开发实战3步接入真实后端API保留离线能力不妥协5.1 接口契约定义如何让前端不依赖后端进度原型中所有“假接口”均按真实RESTful规范设计路径与字段完全对齐未来后端。例如工单提交原型行为对应API路径请求体JSON响应体JSONreport.html点击“提交”POST /api/v1/defect-reports{ device_id: DT-2023-001, photos: [data:image/jpeg;base64,...], description: 绝缘子有裂纹, location: {lat: 31.23, lng: 121.47} }{ report_id: REP-2023-001, status: created, created_at: 2023-10-01T08:23:15Z }关键photos字段值为Base64字符串非文件二进制降低后端接收复杂度location结构固定避免前端传{latitude:...}和{lat:...}混用。5.2 同步引擎改造从“模拟同步”到“真实队列”sync.js中的SyncEngine类只需修改两处即可对接真实API// assets/js/sync.js class SyncEngine { // 原方法模拟同步仅清空本地草稿 // async syncAll() { ... } // 新方法真实同步带错误处理 async syncAll() { const drafts await this.getPendingDrafts(); // 从IndexedDB读取未同步草稿 for (const draft of drafts) { try { const response await fetch(/api/v1/defect-reports, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(draft.content) // content即report.html收集的JSON }); if (response.ok) { const result await response.json(); await this.markAsSynced(draft.id, result.report_id); // 记录report_id } else { throw new Error(HTTP ${response.status}); } } catch (err) { console.warn(同步失败保留草稿 ${draft.id}:, err); // 不删除草稿下次syncAll继续尝试 } } } }注意markAsSynced()方法需在IndexedDB中标记该草稿为“已同步”但保留原始数据72小时满足需求文档第15条。5.3 权限与登录态如何用JWT Token替换模拟token原型中main.js用localStorage.setItem(auth_token, mock-token)模拟登录。接入真实后端时登录页login.html提交账号密码至POST /api/v1/login后端返回JWTToken存储改用sessionStorage关闭浏览器即失效更安全// 登录成功后 sessionStorage.setItem(jwt_token, response.token);请求拦截所有fetch调用前注入Headerconst token sessionStorage.getItem(jwt_token); if (token) { headers.set(Authorization, Bearer ${token}); }从那以后我每次接入新后端都强制走一遍“原型→Mock API→真实API”的三阶段验证先确保原型逻辑跑通再用Mock Server如MSW模拟API响应最后切真实地址。这招让我避开过两次后端字段变更未同步的翻车——希望帮到你。本文还有配套的精品资源点击获取