简介这是一套面向企业数据监控与业务分析场景的轻量级可视化大屏实战项目采用Python与Flask搭建后端配合前端工程化方案实现多页面切换与实时数据渲染适合具备一定Python与Web基础、希望积累完整项目经验的开发者学习参考。压缩包共24个文件约1.02MB包含4个Python脚本承载后端逻辑与数据接口3个JavaScript与2个HTML文件负责页面结构与图表渲染另有CSS样式、字体、图片等静态资源以及说明文档和许可证文件目录划分清晰便于按模块阅读。已有104人学习下载。项目内置数据看板、空气质量监测、计算机性能指标等模块分别对应业务趋势图表、环境指数展示与服务器CPU、内存等指标监控读者可据此理解前后端数据流转与实时推送思路并借助附赠的前端工程化资源完成定制扩展。1. 从一块“没人维护的看板”说起这套 Flask 大屏到底能干什么去年帮一个做园区运维的朋友收拾烂摊子他手上那套数据大屏是外包做的前端一堆写死的假数据后端接口散在三个脚本里换个页面就白屏。后来我干脆用 Python Flask 重写了一套轻量级方案也就是这份资源里的思路一个后端服务同时喂多个页面前端靠定时轮询做实时渲染页面之间用路由切换不依赖重型前端框架。它适合谁适合手里有监控数据、想快速搭一块能跑起来的大屏、又不想被前端工程化拖住的后端开发者也适合拿它当“前端工程化实战项目”练手的学生。核心模块就三块数据看板、空气质量监测、计算机性能指标每个模块一个独立页面共用一套数据接口和渲染逻辑。下面我按“能干什么 → 怎么跑 → 怎么改”的顺序把这份源码拆开讲。2. 项目结构与技术选型为什么是 Flask 而不是重型框架2.1 目录结构长什么样拿到压缩包解压后目录大致是下面这个形态。我按常见 Flask 项目的组织方式还原实际文件以你下载到的为准但结构逻辑基本一致dashboard/ ├── app.py # Flask 入口注册路由和蓝图 ├── config.py # 端口、轮询间隔、数据源配置 ├── requirements.txt # 依赖清单 ├── data/ │ ├── air_quality.json # 空气质量模拟/采集数据 │ └── perf_metrics.json # 计算机性能指标数据 ├── static/ │ ├── css/ │ │ └── dashboard.css # 大屏统一样式 │ ├── js/ │ │ ├── common.js # 轮询、格式化、图表初始化 │ │ ├── board.js # 数据看板页逻辑 │ │ ├── air.js # 空气质量页逻辑 │ │ └── perf.js # 性能指标页逻辑 │ └── lib/ # 图表库等第三方静态资源 └── templates/ ├── base.html # 公共骨架含导航和容器 ├── board.html # 数据看板 ├── air.html # 空气质量监测 └── perf.html # 计算机性能指标这个结构的关键点在于templates只负责页面骨架static/js里每个页面一个脚本app.py只做路由和数据接口。多页面切换靠 Flask 的render_template直接返回不同 HTML而不是单页应用那套前端路由。好处是简单、可调试坏处是每次切页面会重新加载静态资源所以我在common.js里把图表库做了缓存处理。2.2 技术栈与选型理由后端就是 Flask Jinja2 模板数据层用 JSON 文件模拟真实场景下换成数据库或采集接口即可。前端没有上 Vue/React图表用 ECharts 这类库直接挂载。为什么这么选因为大屏的核心诉求是“稳定出图 定时刷新”不是复杂交互。用 Flask 的好处是接口和页面在同一个进程里调试时改完 Python 直接重启不用等前端构建。我一般会把数据接口和页面路由分开写接口统一返回 JSON页面只负责渲染容器这样后面接真实数据源时只改接口层。# app.py 核心骨架 from flask import Flask, render_template, jsonify import json, os app Flask(__name__) BASE os.path.dirname(os.path.abspath(__file__)) def load_json(name): # 统一读取 data 目录下的 JSON异常时返回空结构避免页面白屏 path os.path.join(BASE, data, name) try: with open(path, r, encodingutf-8) as f: return json.load(f) except (FileNotFoundError, json.JSONDecodeError): return {} app.route(/) def index(): return render_template(board.html) app.route(/air) def air(): return render_template(air.html) app.route(/perf) def perf(): return render_template(perf.html) app.route(/api/air) def api_air(): # 真实场景这里换成采集逻辑返回结构保持一致 return jsonify(load_json(air_quality.json)) app.route(/api/perf) def api_perf(): return jsonify(load_json(perf_metrics.json)) if __name__ __main__: app.run(host0.0.0.0, port5000, debugTrue)这段代码里load_json做了容错文件缺失或格式错误时返回空字典前端拿到空数据只会显示空图表不会整页崩掉。host0.0.0.0是为了让同一局域网内的其他机器也能访问大屏debugTrue只在开发时开上线要关掉。三个页面路由分别对应三个模板接口路由以/api/开头方便后面加权限或做反向代理时按前缀区分。2.3 多页面切换的实现方式页面切换没有用前端路由而是base.html里放一个导航条每个链接指向 Flask 路由。这样做的代价是切换时整页刷新但换来的是每个页面状态独立、调试直观。如果后面想改成无刷新切换可以把导航改成fetch加载对应模板片段但那就偏离“轻量”的初衷了。我的建议是先按现在的多页面跑通确认数据链路没问题再考虑要不要上单页。3. 跑起来从零启动到三个页面出图3.1 环境准备与依赖安装先确认 Python 版本Flask 2.x 以上对 Python 3.7 都友好。建议用虚拟环境避免和系统里的包打架python -m venv venv # Windows venv\Scripts\activate # macOS / Linux source venv/bin/activate pip install flaskrequirements.txt里通常只列了 Flask图表库是静态资源放在static/lib下不需要 npm 安装。如果你下载到的版本里图表库是 CDN 引用离线环境要把它换成本地文件否则大屏在内网会白屏——这是最常见的翻车点之一。3.2 启动服务与验证接口装完依赖直接跑入口文件python app.py终端出现Running on http://0.0.0.0:5000就说明起来了。先别急着看页面用浏览器或 curl 验证接口curl http://127.0.0.1:5000/api/air curl http://127.0.0.1:5000/api/perf返回的 JSON 结构要和前端脚本里解析的字段对得上。我一般会先看接口返回再看页面渲染因为页面白屏十有八九是接口字段名不一致或者数据为空。确认接口正常后依次访问/、/air、/perf三个页面应该都能出图。3.3 实时渲染的轮询逻辑实时数据靠前端定时拉取common.js里封装了一个通用的轮询函数// common.js 轮询封装 function startPolling(url, interval, onData) { async function tick() { try { const res await fetch(url, { cache: no-store }); if (!res.ok) throw new Error(HTTP res.status); const data await res.json(); onData(data); // 交给各页面自己的渲染函数 } catch (e) { console.warn(轮询失败保留上次数据:, e.message); } finally { setTimeout(tick, interval); // 无论成败都排下一次避免断流 } } tick(); }interval建议 30005000 毫秒太短会给后端压力太长大屏看起来像卡住。cache: no-store是为了防止浏览器缓存旧数据这个细节不加的话某些浏览器会一直显示第一次的结果排查起来很玄学。finally里排下一次轮询保证单次失败不会让整个刷新链断掉这是血泪经验早期版本用setInterval一次异常后定时器还在跑但数据不更新看起来像“假死”。3.4 三个模块的页面挂载每个页面脚本只做一件事拿到数据后更新对应图表。以空气质量页为例// air.js const chart echarts.init(document.getElementById(air-chart)); startPolling(/api/air, 4000, (data) { const points (data.points || []).map(p ({ name: p.time, value: p.aqi })); chart.setOption({ xAxis: { data: points.map(p p.name) }, series: [{ data: points.map(p p.value) }] }); });data.points是接口返回的数组字段名要和后端 JSON 一致。echarts.init只调一次后面用setOption增量更新避免重复初始化导致内存泄漏。性能指标页同理只是图表类型换成折线或仪表盘。数据看板页通常是多个图表拼在一起建议把每个图表的初始化拆成独立函数方便单独调试。4. 核心模块拆解数据看板、空气质量与性能指标4.1 数据看板的聚合渲染数据看板是三个模块里最“重”的页面因为它要同时展示多个指标。我的做法是后端提供一个聚合接口把多个数据源合并成一个 JSON 返回前端一次请求渲染多个图表减少请求数app.route(/api/board) def api_board(): air load_json(air_quality.json) perf load_json(perf_metrics.json) return jsonify({ summary: { air_avg: sum(p[aqi] for p in air.get(points, [])) / max(len(air.get(points, [])), 1), cpu_avg: sum(p[cpu] for p in perf.get(points, [])) / max(len(perf.get(points, [])), 1) }, air: air, perf: perf })这里用max(len(...), 1)防止空数组除零是很容易忽略的边界。summary里放的是看板顶部的汇总数字下面两个字段给详细图表用。前端拿到后先渲染汇总卡片再分别渲染图表这样首屏感知更快。4.2 空气质量监测的数据结构空气质量模块的数据结构建议固定成points数组每个点包含time和aqi如果要展示 PM2.5、PM10 等多指标就在每个点里加字段{ points: [ {time: 10:00, aqi: 62, pm25: 35, pm10: 58}, {time: 10:05, aqi: 68, pm25: 41, pm10: 63} ] }字段名一旦定下来前端脚本和后端采集都要遵守改字段等于改契约必须同步改两边。真实场景下这个 JSON 由采集程序定时写入Flask 只负责读所以要注意文件读写并发写入时先写临时文件再原子替换避免读到半截 JSON 导致解析失败。4.3 计算机性能指标的采集与展示性能指标模块的数据来源通常是本机或目标机器的 CPU、内存、磁盘使用率。Python 里可以用psutil采集写成一个独立函数接口调用时实时取import psutil def collect_perf(): return { points: [{ time: now, cpu: psutil.cpu_percent(interval0.5), mem: psutil.virtual_memory().percent, disk: psutil.disk_usage(/).percent }] }cpu_percent(interval0.5)会阻塞半秒来算平均使用率放在接口里要注意别让请求超时。如果大屏刷新频率高建议改成后台线程定时采集、接口只读缓存这样接口响应稳定在毫秒级。展示端用仪表盘或折线都行关键是阈值告警超过 80% 换个颜色运维一眼就能看到。4.4 前后端字段契约的维护三个模块共用一套轮询和图表初始化逻辑字段契约就是命脉。我的习惯是在config.py里维护一份字段说明或者干脆在接口返回里带一个schema字段前端启动时校验一次。别小看这一步多人协作时字段名被改掉一个字母排查半天是常事。5. 避坑与排查那些让大屏白屏的常见问题5.1 页面白屏但接口正常现象访问页面一片空白但/api/xxx返回正常 JSON。原因多半是前端脚本报错比如echarts未加载、容器id写错、或者data.points为undefined导致map抛异常。解决打开浏览器控制台看第一条红色报错按报错定位到具体脚本行同时确认static/lib下的图表库路径和模板里引用的路径一致。5.2 数据不刷新一直显示第一次的结果现象接口数据在变页面数字不动。原因通常是浏览器缓存或者轮询链断了。解决fetch加cache: no-store并检查轮询函数是否在异常分支里漏了setTimeout。另外确认没有用setInterval叠加多个定时器多个定时器同时跑会导致请求堆积。5.3 局域网其他机器访问不了现象本机127.0.0.1:5000正常同事的电脑打不开。原因app.run默认只监听127.0.0.1。解决改成host0.0.0.0同时检查防火墙是否放行 5000 端口。如果部署在服务器上还要确认安全组规则。5.4 JSON 文件被写坏导致接口 500现象接口偶尔返回 500日志里是JSONDecodeError。原因采集程序正在写文件时 Flask 读到半截内容。解决写入端用“临时文件 os.replace”原子替换读取端在load_json里捕获异常返回空结构保证接口不崩。5.5 图表重复初始化导致内存上涨现象页面开久了浏览器变卡。原因每次轮询都调echarts.init实例越积越多。解决初始化只做一次轮询里只调setOption页面切换或销毁时调chart.dispose()。6. 二次开发把模拟数据换成真实数据源的三步改法这份源码最大的改造点就是数据层。我的建议是分三步走别一上来就大改。第一步把load_json替换成统一的get_data(source)函数内部先保留读文件逻辑外部调用不变第二步针对每个模块写采集器空气质量接采集接口或数据库性能指标用psutil后台线程定时写缓存第三步把接口层改成读缓存保证响应时间稳定。下面是一个改造后的接口示例from functools import lru_cache import time _cache {air: {ts: 0, data: {}}, perf: {ts: 0, data: {}}} def get_cached(key, ttl3): item _cache[key] if time.time() - item[ts] ttl: # 这里换成真实采集失败时保留旧数据 item[data] collect_real_data(key) item[ts] time.time() return item[data]ttl控制缓存有效期采集失败时不清空旧数据大屏最多显示稍旧的值不会白屏。改造时注意保持返回结构不变前端一行不用改。验证方法很简单先断掉采集源看页面是否还能显示上次数据再恢复采集看是否在ttl内更新。我一般还会加一个/api/health接口返回各数据源的最后更新时间排查时一眼就能看出是采集挂了还是前端没刷新。还有一个容易忽略的点多页面切换时静态资源会重复加载如果图表库较大可以在base.html里统一引入并利用浏览器缓存或者把公共脚本合并。改完记得在局域网内用两台机器同时打开大屏跑半小时观察内存和请求频率这比看日志直观。从那以后我每次接这类大屏项目都强制先把“接口契约 缓存 健康检查”三件套搭好再写页面返工次数少了很多。希望帮到你。本文还有配套的精品资源点击获取
简介这是一套面向企业数据监控与业务分析场景的轻量级可视化大屏实战项目采用Python与Flask搭建后端配合前端工程化方案实现多页面切换与实时数据渲染适合具备一定Python与Web基础、希望积累完整项目经验的开发者学习参考。压缩包共24个文件约1.02MB包含4个Python脚本承载后端逻辑与数据接口3个JavaScript与2个HTML文件负责页面结构与图表渲染另有CSS样式、字体、图片等静态资源以及说明文档和许可证文件目录划分清晰便于按模块阅读。已有104人学习下载。项目内置数据看板、空气质量监测、计算机性能指标等模块分别对应业务趋势图表、环境指数展示与服务器CPU、内存等指标监控读者可据此理解前后端数据流转与实时推送思路并借助附赠的前端工程化资源完成定制扩展。1. 从一块“没人维护的看板”说起这套 Flask 大屏到底能干什么去年帮一个做园区运维的朋友收拾烂摊子他手上那套数据大屏是外包做的前端一堆写死的假数据后端接口散在三个脚本里换个页面就白屏。后来我干脆用 Python Flask 重写了一套轻量级方案也就是这份资源里的思路一个后端服务同时喂多个页面前端靠定时轮询做实时渲染页面之间用路由切换不依赖重型前端框架。它适合谁适合手里有监控数据、想快速搭一块能跑起来的大屏、又不想被前端工程化拖住的后端开发者也适合拿它当“前端工程化实战项目”练手的学生。核心模块就三块数据看板、空气质量监测、计算机性能指标每个模块一个独立页面共用一套数据接口和渲染逻辑。下面我按“能干什么 → 怎么跑 → 怎么改”的顺序把这份源码拆开讲。2. 项目结构与技术选型为什么是 Flask 而不是重型框架2.1 目录结构长什么样拿到压缩包解压后目录大致是下面这个形态。我按常见 Flask 项目的组织方式还原实际文件以你下载到的为准但结构逻辑基本一致dashboard/ ├── app.py # Flask 入口注册路由和蓝图 ├── config.py # 端口、轮询间隔、数据源配置 ├── requirements.txt # 依赖清单 ├── data/ │ ├── air_quality.json # 空气质量模拟/采集数据 │ └── perf_metrics.json # 计算机性能指标数据 ├── static/ │ ├── css/ │ │ └── dashboard.css # 大屏统一样式 │ ├── js/ │ │ ├── common.js # 轮询、格式化、图表初始化 │ │ ├── board.js # 数据看板页逻辑 │ │ ├── air.js # 空气质量页逻辑 │ │ └── perf.js # 性能指标页逻辑 │ └── lib/ # 图表库等第三方静态资源 └── templates/ ├── base.html # 公共骨架含导航和容器 ├── board.html # 数据看板 ├── air.html # 空气质量监测 └── perf.html # 计算机性能指标这个结构的关键点在于templates只负责页面骨架static/js里每个页面一个脚本app.py只做路由和数据接口。多页面切换靠 Flask 的render_template直接返回不同 HTML而不是单页应用那套前端路由。好处是简单、可调试坏处是每次切页面会重新加载静态资源所以我在common.js里把图表库做了缓存处理。2.2 技术栈与选型理由后端就是 Flask Jinja2 模板数据层用 JSON 文件模拟真实场景下换成数据库或采集接口即可。前端没有上 Vue/React图表用 ECharts 这类库直接挂载。为什么这么选因为大屏的核心诉求是“稳定出图 定时刷新”不是复杂交互。用 Flask 的好处是接口和页面在同一个进程里调试时改完 Python 直接重启不用等前端构建。我一般会把数据接口和页面路由分开写接口统一返回 JSON页面只负责渲染容器这样后面接真实数据源时只改接口层。# app.py 核心骨架 from flask import Flask, render_template, jsonify import json, os app Flask(__name__) BASE os.path.dirname(os.path.abspath(__file__)) def load_json(name): # 统一读取 data 目录下的 JSON异常时返回空结构避免页面白屏 path os.path.join(BASE, data, name) try: with open(path, r, encodingutf-8) as f: return json.load(f) except (FileNotFoundError, json.JSONDecodeError): return {} app.route(/) def index(): return render_template(board.html) app.route(/air) def air(): return render_template(air.html) app.route(/perf) def perf(): return render_template(perf.html) app.route(/api/air) def api_air(): # 真实场景这里换成采集逻辑返回结构保持一致 return jsonify(load_json(air_quality.json)) app.route(/api/perf) def api_perf(): return jsonify(load_json(perf_metrics.json)) if __name__ __main__: app.run(host0.0.0.0, port5000, debugTrue)这段代码里load_json做了容错文件缺失或格式错误时返回空字典前端拿到空数据只会显示空图表不会整页崩掉。host0.0.0.0是为了让同一局域网内的其他机器也能访问大屏debugTrue只在开发时开上线要关掉。三个页面路由分别对应三个模板接口路由以/api/开头方便后面加权限或做反向代理时按前缀区分。2.3 多页面切换的实现方式页面切换没有用前端路由而是base.html里放一个导航条每个链接指向 Flask 路由。这样做的代价是切换时整页刷新但换来的是每个页面状态独立、调试直观。如果后面想改成无刷新切换可以把导航改成fetch加载对应模板片段但那就偏离“轻量”的初衷了。我的建议是先按现在的多页面跑通确认数据链路没问题再考虑要不要上单页。3. 跑起来从零启动到三个页面出图3.1 环境准备与依赖安装先确认 Python 版本Flask 2.x 以上对 Python 3.7 都友好。建议用虚拟环境避免和系统里的包打架python -m venv venv # Windows venv\Scripts\activate # macOS / Linux source venv/bin/activate pip install flaskrequirements.txt里通常只列了 Flask图表库是静态资源放在static/lib下不需要 npm 安装。如果你下载到的版本里图表库是 CDN 引用离线环境要把它换成本地文件否则大屏在内网会白屏——这是最常见的翻车点之一。3.2 启动服务与验证接口装完依赖直接跑入口文件python app.py终端出现Running on http://0.0.0.0:5000就说明起来了。先别急着看页面用浏览器或 curl 验证接口curl http://127.0.0.1:5000/api/air curl http://127.0.0.1:5000/api/perf返回的 JSON 结构要和前端脚本里解析的字段对得上。我一般会先看接口返回再看页面渲染因为页面白屏十有八九是接口字段名不一致或者数据为空。确认接口正常后依次访问/、/air、/perf三个页面应该都能出图。3.3 实时渲染的轮询逻辑实时数据靠前端定时拉取common.js里封装了一个通用的轮询函数// common.js 轮询封装 function startPolling(url, interval, onData) { async function tick() { try { const res await fetch(url, { cache: no-store }); if (!res.ok) throw new Error(HTTP res.status); const data await res.json(); onData(data); // 交给各页面自己的渲染函数 } catch (e) { console.warn(轮询失败保留上次数据:, e.message); } finally { setTimeout(tick, interval); // 无论成败都排下一次避免断流 } } tick(); }interval建议 30005000 毫秒太短会给后端压力太长大屏看起来像卡住。cache: no-store是为了防止浏览器缓存旧数据这个细节不加的话某些浏览器会一直显示第一次的结果排查起来很玄学。finally里排下一次轮询保证单次失败不会让整个刷新链断掉这是血泪经验早期版本用setInterval一次异常后定时器还在跑但数据不更新看起来像“假死”。3.4 三个模块的页面挂载每个页面脚本只做一件事拿到数据后更新对应图表。以空气质量页为例// air.js const chart echarts.init(document.getElementById(air-chart)); startPolling(/api/air, 4000, (data) { const points (data.points || []).map(p ({ name: p.time, value: p.aqi })); chart.setOption({ xAxis: { data: points.map(p p.name) }, series: [{ data: points.map(p p.value) }] }); });data.points是接口返回的数组字段名要和后端 JSON 一致。echarts.init只调一次后面用setOption增量更新避免重复初始化导致内存泄漏。性能指标页同理只是图表类型换成折线或仪表盘。数据看板页通常是多个图表拼在一起建议把每个图表的初始化拆成独立函数方便单独调试。4. 核心模块拆解数据看板、空气质量与性能指标4.1 数据看板的聚合渲染数据看板是三个模块里最“重”的页面因为它要同时展示多个指标。我的做法是后端提供一个聚合接口把多个数据源合并成一个 JSON 返回前端一次请求渲染多个图表减少请求数app.route(/api/board) def api_board(): air load_json(air_quality.json) perf load_json(perf_metrics.json) return jsonify({ summary: { air_avg: sum(p[aqi] for p in air.get(points, [])) / max(len(air.get(points, [])), 1), cpu_avg: sum(p[cpu] for p in perf.get(points, [])) / max(len(perf.get(points, [])), 1) }, air: air, perf: perf })这里用max(len(...), 1)防止空数组除零是很容易忽略的边界。summary里放的是看板顶部的汇总数字下面两个字段给详细图表用。前端拿到后先渲染汇总卡片再分别渲染图表这样首屏感知更快。4.2 空气质量监测的数据结构空气质量模块的数据结构建议固定成points数组每个点包含time和aqi如果要展示 PM2.5、PM10 等多指标就在每个点里加字段{ points: [ {time: 10:00, aqi: 62, pm25: 35, pm10: 58}, {time: 10:05, aqi: 68, pm25: 41, pm10: 63} ] }字段名一旦定下来前端脚本和后端采集都要遵守改字段等于改契约必须同步改两边。真实场景下这个 JSON 由采集程序定时写入Flask 只负责读所以要注意文件读写并发写入时先写临时文件再原子替换避免读到半截 JSON 导致解析失败。4.3 计算机性能指标的采集与展示性能指标模块的数据来源通常是本机或目标机器的 CPU、内存、磁盘使用率。Python 里可以用psutil采集写成一个独立函数接口调用时实时取import psutil def collect_perf(): return { points: [{ time: now, cpu: psutil.cpu_percent(interval0.5), mem: psutil.virtual_memory().percent, disk: psutil.disk_usage(/).percent }] }cpu_percent(interval0.5)会阻塞半秒来算平均使用率放在接口里要注意别让请求超时。如果大屏刷新频率高建议改成后台线程定时采集、接口只读缓存这样接口响应稳定在毫秒级。展示端用仪表盘或折线都行关键是阈值告警超过 80% 换个颜色运维一眼就能看到。4.4 前后端字段契约的维护三个模块共用一套轮询和图表初始化逻辑字段契约就是命脉。我的习惯是在config.py里维护一份字段说明或者干脆在接口返回里带一个schema字段前端启动时校验一次。别小看这一步多人协作时字段名被改掉一个字母排查半天是常事。5. 避坑与排查那些让大屏白屏的常见问题5.1 页面白屏但接口正常现象访问页面一片空白但/api/xxx返回正常 JSON。原因多半是前端脚本报错比如echarts未加载、容器id写错、或者data.points为undefined导致map抛异常。解决打开浏览器控制台看第一条红色报错按报错定位到具体脚本行同时确认static/lib下的图表库路径和模板里引用的路径一致。5.2 数据不刷新一直显示第一次的结果现象接口数据在变页面数字不动。原因通常是浏览器缓存或者轮询链断了。解决fetch加cache: no-store并检查轮询函数是否在异常分支里漏了setTimeout。另外确认没有用setInterval叠加多个定时器多个定时器同时跑会导致请求堆积。5.3 局域网其他机器访问不了现象本机127.0.0.1:5000正常同事的电脑打不开。原因app.run默认只监听127.0.0.1。解决改成host0.0.0.0同时检查防火墙是否放行 5000 端口。如果部署在服务器上还要确认安全组规则。5.4 JSON 文件被写坏导致接口 500现象接口偶尔返回 500日志里是JSONDecodeError。原因采集程序正在写文件时 Flask 读到半截内容。解决写入端用“临时文件 os.replace”原子替换读取端在load_json里捕获异常返回空结构保证接口不崩。5.5 图表重复初始化导致内存上涨现象页面开久了浏览器变卡。原因每次轮询都调echarts.init实例越积越多。解决初始化只做一次轮询里只调setOption页面切换或销毁时调chart.dispose()。6. 二次开发把模拟数据换成真实数据源的三步改法这份源码最大的改造点就是数据层。我的建议是分三步走别一上来就大改。第一步把load_json替换成统一的get_data(source)函数内部先保留读文件逻辑外部调用不变第二步针对每个模块写采集器空气质量接采集接口或数据库性能指标用psutil后台线程定时写缓存第三步把接口层改成读缓存保证响应时间稳定。下面是一个改造后的接口示例from functools import lru_cache import time _cache {air: {ts: 0, data: {}}, perf: {ts: 0, data: {}}} def get_cached(key, ttl3): item _cache[key] if time.time() - item[ts] ttl: # 这里换成真实采集失败时保留旧数据 item[data] collect_real_data(key) item[ts] time.time() return item[data]ttl控制缓存有效期采集失败时不清空旧数据大屏最多显示稍旧的值不会白屏。改造时注意保持返回结构不变前端一行不用改。验证方法很简单先断掉采集源看页面是否还能显示上次数据再恢复采集看是否在ttl内更新。我一般还会加一个/api/health接口返回各数据源的最后更新时间排查时一眼就能看出是采集挂了还是前端没刷新。还有一个容易忽略的点多页面切换时静态资源会重复加载如果图表库较大可以在base.html里统一引入并利用浏览器缓存或者把公共脚本合并。改完记得在局域网内用两台机器同时打开大屏跑半小时观察内存和请求频率这比看日志直观。从那以后我每次接这类大屏项目都强制先把“接口契约 缓存 健康检查”三件套搭好再写页面返工次数少了很多。希望帮到你。本文还有配套的精品资源点击获取
