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应用程序中。

猜你喜欢

转载自blog.csdn.net/AABBbaby/article/details/131301979