本文讲解如何在前后端分离架构中，根据 python 后端返回的数值（如时间差分钟数），在 html 前端自动应用不同颜色样式（例如 ≥15 分钟显示为红色），并提供安全、可维护的实现方案。
在实际开发中，将样式逻辑混入后端返回值（如直接返回带 的 HTML 字符串）虽能快速见效，但存在明显缺陷：破坏数据与视图的职责分离、增加 XSS 风险、难以复用样式、不利于 CSS 主题管理。更专业、可持续的做法是——后端只返回纯净数据，前端根据规则动态渲染样式。
✅ 推荐实践：后端保持语义化输出
修改 zulu_extracts 函数，确保它始终返回原始数值或标准占位符（如 None 或字符串 'N/A'），不嵌入任何 HTML：
def zulu_extracts(weather_input, datis=None):
raw_utc = Root_class().date_time(raw_utc='HM')[-4:]
raw_utc_dt = datetime.strptime(raw_utc, "%H%M")
zulu_item_re = re.findall(r'[0-9]{4}Z', weather_input)
if zulu_item_re:
zulu_weather = zulu_item_re[0][:-1]
zulu_weather_dt = datetime.strptime(zulu_weather, "%H%M")
diff = raw_utc_dt - zulu_weather_dt
return int(diff.seconds / 60) # ✅ 纯数字，无 HTML
else:
return None # ✅ 明确表示无效值，比 'N/A' 更易判断✅ 前端使用 JavaScript 动态着色（推荐）
假设你通过 AJAX 获取该值并插入到 ID 为 #zulu-diff 的元素中：
当前 ZULU 时间差：-- 分钟
// 示例：使用 fetch 获取后端结果（假设 API 返回 JSON { "diff": 18 }）
fetch('/api/zulu')
.then(res => res.json())
.then(data => {
const el = document.getElementById('zulu-diff');
const value = data.diff;
// 清空内容并设置文本 + 样式类
el.textContent = value ?? 'N/A';
el.className = ''; // 重置 class
if (typeof value === 'number') {
if (value >= 15) {
el.classList.add('diff-high'); // 对应 CSS 定义红色
} else if (value >= 5) {
el.classList.add('diff-medium'); // 可扩展为橙色
}
// 其他阈值同理
}
});配套 CSS（推荐分离样式，便于主题切换）：
.diff-high { color: #d32f2f; font-weight: bold; }
.diff-medium { color: #ed6c02; }
/* 可全局复用，支持暗色模式覆盖 */⚠️ 注意事项：
瑞志企业建站系统(ASP版)2.2
下载
支持模板化设计，基于标签调用数据 支持N国语言，并能根据客户端自动识别当前语言 支持扩展现有的分类类型，并可修改当前主要分类的字段 支持静态化和伪静态 会员管理功能，询价、订单、收藏、短消息功能 基于组的管理员权限设置 支持在线新建、修改、删除模板 支持在线管理上传文件 使用最新的CKEditor作为后台可视化编辑器 支持无限级分类及分类的移动、合并、排序 专题管理、自定义模块管理 支持缩略图和图
- ❌ 避免在后端拼接 HTML 返回（如 return '...'），这违反前后端分离原则，且若 diff 来自不可信输入，可能引发 XSS；
- ✅ 使用 textContent 而非 innerHTML 渲染数值，确保安全性；
- ✅ 将阈值逻辑（如 >=15）抽离为配置常量，便于后期调整；
- ✅ 若使用框架（Vue/React），可封装为带颜色逻辑的组件，提升复用性。
总结：颜色属于表现层职责，应由前端控制。后端专注计算与数据交付，前端负责响应式呈现——这才是清晰、健壮、可测试的现代 Web 开发范式。
立即学习“前端免费学习笔记（深入）”；
