JavaScript中的CRUD操作指南示例 - 用DHTMLX创建医院管理系统！

创建、读取、更新和删除(CRUD)是现代web和移动应用程序执行的四个基本功能。然而这些函数是如何产生的，它们到底是做什么的？

在本文中，我们将简要介绍CRUD的含义以及它何时被引入编程的。文中我们还将使用用于医院管理的JavaScript演示应用程序，展示如何使用DHTMLX小部件进行创建、读取、更新和删除操作。

DHTMLX专注于JavaScript和HTML5 UI小部件和库，以帮助开发人员更快地构建功能丰富的、交互式的Web界面。 遵循现代网络开发的标准和做法，DHTMLX提供针对桌面和移动设备定制的顶级Web应用程序框架。

DHTMLX小部件正式版下载

CRUD操作的含义

CRUD范例被设计为一种用于改进持久数据存储的函数方法，这个词最早是在20世纪80年代初由英国信息技术顾问兼作家詹姆斯·马丁(James Martin)推广的。James Martin在他的《管理数据库环境》一书中提到了创建、读取、更新和删除数据的应用程序。

在现代软件工程中，CRUD作为设计web应用程序的一种方法，因为它提醒开发人员如何创建全面的用户友好型工具。在这些应用程序中，用户通过创建新记录、在UI中读取数据、编辑或更新数据以及删除数据来与数据库进行交互。

每个CRUD操作都可以映射到对应的HTTP协议方法：

• Create -> Post,
• Read -> Get,
• Update -> Put,
• Delete -> Delete.

为了更深入地了解每个CRUD操作，我们提供了一个用于医院数据管理的DHTMLX演示应用程序示例来帮助学习。

CRUD如何工作：可以在JavaScript中构建的示例

医院数据管理应用程序基于4个JavaScript小部件，每个小部件都允许您创建全方位的数据管理选项。它们提供了灵活的配置，因此您可以轻松地将DHTMLX小部件集成到现有API中，从而构建强大的web应用程序。

创建（Create）

在CRUD中，创建操作允许用户向数据库添加新条目。该条目可以是用户帐户、个人信息、任务及其描述等。

我们使用DHTMLX Suite UI库来后仓健一个清晰方便的数据网格。在这里，医务人员可以通过单击Add a patient按钮创建患者记录，他们可以输入个人信息，包括病人的生命体征、药物过敏和所谓的诊断，以选择适当的治疗方法并提供充分的护理。

读取（Read）

读取资源不应该修改任何信息。

我们决定通过添加一个使用DHTMLX Diagram库创建的医院组织结构图来多样化演示应用程序中的数据表示。

下图显示了医院的内部结构，医务人员用带有照片和联系方式的卡片代表。

我们通过添加搜索功能改善了用户体验，因此终端用户可以通过输入姓名、电话号码或电子邮件轻松找到所需专家。

更新（Update）

更新操作涉及使用新值修改现有数据。

因此，例如医院员工可以通过富文本编辑器处理文本，该小部件具有干净直观的UI，并支持基本的文本编辑和格式化操作。员工可以轻松地输入或删除文本，应用不同的字体和样式，更改文本或背景颜色。

删除（Delete）

删除CRUD操作需要从UI和数据库中删除一条记录。

例如，医院员工在使用DHTMLX Spreadsheet构建的表中收集患者数据，他们必须删除患者记录。然后，他们可以右键单击过时的记录，并从上下文菜单中选择“清除”和“清除全部”。结果，患者记录将从数据表中删除。

总之，DHTMLX JavaScript小部件帮助您构建功能齐全的CRUD应用程序，用户可以在其中创建、读取、更新和删除数据。它们有功能丰富的API，可以很容易地集成到现有的web应用程序中。