0

仅使用 HTML、CSS、JavaScript 和带有服务器端脚本语言（例如 PHP 和 MySQL）的关系数据库，您如何检索和显示数据对象并直观地操作它们？

通过操作，我的意思是创建新对象、检索存储的对象、可视化它们的属性（例如，使圆直径变大或变小），以及基于拖放（改变大小、形状和位置）调用方法和设置字段值。

一个使用示例是带有磁性计数器的物理办公室白板的在线表示，用于问题监控和跟踪。一个表有指定问题所有者的行，以及代表业务工作流的列，例如 4 阶段“分配”、“调查”、“实施”、“同意关闭”流程（或其他任何内容，只是一个示例）。

用户将单击一个按钮来创建一个新的问题对象，该对象具有自己的唯一 ID 号。它的形状取决于它的问题类型、它的颜色和它的状态（红色、琥珀色、绿色，例如没有计划，落后但恢复计划，计划中）。将其拖到相关的表格单元格将根据其行索引将其分配给所有者，并根据列索引设置生命周期状态。每次拖放或更改对象时，视觉更改都会反映在数据库中的对象属性中。

我在使用 HTML5 画布元素或带有一些巧妙 CSS 的 SVG 之间纠结。我可以弄清楚如何将数据库中已有的内容放到屏幕上，但不知道如何通过屏幕操作和存储更改。我还假设这可以在 HTML/CSS/JavaScript/PHP/MySQL 中完成，但是可以使用哪些其他技术？

4

1 回答 1

2

这听起来最适合作为客户端中心 ajax 的东西。这表示：

  • 用 Javascript 编写整个 UI。是使用 canvas、svg 还是纯 HTML5 + CSS3，取决于您的个人偏好、浏览器支持和功能要求。
  • 服务器有两个工作：服务于 javascript 应用程序，并响应 ajax 请求。

然后可以完全在 Javascript 中完成拖放；您可能想使用一个为您实现细节的 javascript 库（您可以使用一些 jQuery 扩展）；您只需要订阅正确的事件，并触发 ajax 请求来更新和查询您的数据。例如，如果用户将一个项目拖到一个表格单元格中，您将获得该项目的 ID、表格单元格的 ID，并触发一个 ajax 请求，告诉服务器“项目 X 现在分配给单元格 Y”，服务器响应“OK”（在这种情况下，您可以在 UI 中使更改永久化）或错误消息（在这种情况下，您可能想要弹出通知或类似的东西）。

通信协议最好的选择是 JSON；它内置于 jQuery 以及大多数 javascript 实现中，它可以轻松通过防火墙和 Web 浏览器，并且大多数编程生态系统（包括 PHP）都内置了 JSON 编码和解码。此外，与基于 XML 的替代方案相比，JSON 的开销非常低。

无论哪种方式，这都不容易，没有灵丹妙药让它只需点击几下就可以工作，你必须问是否值得付出努力。另外，考虑到很明显，当脚本被阻止或在没有足够支持的平台上时，大量 javascript 的界面将无法正常工作（或根本无法正常工作）——想想 CPU 较弱的移动设备和不合标准的网络浏览器， ETC。

于 2012-05-04T10:44:15.403 回答