HTML共享办公预订页面制作教程

{
  "rooms": [
    {
      "id": "rm-a101",
      "name": "创意间A",
      "capacity": 6,
      "bookings": [{"start": "10:00", "end": "12:00", "user": "张三"}]
    }
  ],
  "desks": [
    {"id": "desk-03", "status": "available", "floor": 2}
  ]
}

前端用 fetch() 拿到后，用 map() 渲染，每个项加 data-id 和 data-status，方便后续点击时传参。别手动拼 HTML 字符串，用 document.createElement() 或模板字符串更稳。

• 状态样式统一用 class 控制：class="desk booked" / class="desk available"
• 如果工位数超 50，加 loading 占位和节流滚动加载，不然 Safari 会卡顿
• 别把全天时间轴（如 9:00–18:00 每 30 分钟一格）全画出来——只渲染当前视口+前后两屏，用 IntersectionObserver 触发补全

点击预订按钮后，为什么 onclick 拦不住重复提交？

用户手快连点两次，submit 请求发出去两个，后端没做幂等处理的话，就真订了两回。解决不在前端“禁用按钮”这种表面功夫，而要：

• 提交前生成唯一请求标识：const reqId = Date.now() + '-' + Math.random().toString(36).substr(2, 9)，传给后端
• 后端收到后先查 req_id 是否已存在（Redis 存 10 分钟），存在则直接返回重复
• 前端按钮置灰的同时，加 disabled + data-sending="true" 双保险，防止 onclick 绑定多个事件
• 失败后记得恢复按钮状态，别忘了 catch() 里重置 disabled

localStorage 能不能存预订草稿？存什么、存多久？

可以存，但只能存用户本地未提交的操作，比如选中的工位 ID、期望时间段、备注文字。绝对不要存“已确认预订”的状态——那会和真实数据库对不上。

• 键名用带业务前缀的：localStorage.setItem('coffice_draft_desk_03', JSON.stringify({...}))
• 每次进入页面检查 localStorage 里有没有过期草稿（超过 30 分钟自动清掉）
• 一旦成功提交，立刻 removeItem() 对应草稿；失败则保留，但提示“上次未完成的预订已恢复”
• 别存整个 bookings 数组——容易和真实数据混淆，只存用户主动输入/选择的部分

真正麻烦的是时段冲突逻辑：两个预订只要 start/end 有任意重叠就算冲突，这个计算必须在后端做，前端只负责把用户选的时间段传过去，别自己写判断函数——时区、夏令时、跨天预订都会让它漏判。

理论要掌握，实操不能落！以上关于《HTML共享办公预订页面制作教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！