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

news2024/12/28 3:13:11

创建、读取、更新和删除(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应用程序中。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/668669.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

图文并茂spring-boot3 热部署配置(IntelliJ IDEA 2023.1)

文章目录 🥚 版本情况🧂 前言(踩坑)🍗 四步完成spring-boot热部署🥗 1、下载热部署模块🥗 2、application.yml 或者application.properties添加dev-tools配置🥗 3、settings中勾选条…

设计服务要考虑的7个维度

我在《软件设计的核心方法及实例解析》里提到软件设计的核心方法是分解和组合。分解粒度上,不同的架构师想法不一样,但是却有一点共性:设计一定要把不稳定的部分做封装,对外暴露稳定的部分,这也是有接口隔离这一原则的…

VS code 可以做什么?

编写 markdown VS code 真的是非常好用的Markdown编写工具,我用他来编写Markdown的时间甚至比写代码还要多。比如,我每周写的公众号文章。 相关插件: MarkdownMarkdown Preview EnhancedMarkdown All in One 编写python 大多数同学写pyth…

LLM - 基于 ChatGLM-6B 的工程配置搭建私有 ChatGPT 中文在线聊天

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://blog.csdn.net/caroline_wendy/article/details/131104546 Paper:GLM: General Language Model Pretraining with Autoregressive Blank Infilling 一篇于2022年发表在ACL会…

脑机接口科普0021——黑门01

本文禁止转载!!!! 我会在接下来的一段时间内,花一些章节,专门科普介绍一下《黑门》这部国产动漫。 科普《黑门》,源自网友看了我的脑机接口科普文章后,介绍我看黑门这个脑机接口科…

盘点那些 IT 技术面试官常用的 10 个挂人套路

最近几个朋友找我聊天,给我讲述了面试过程中遇到的一些不太理解的事情。作为一个技术面试官,今天来分享 10 个面试相关的套路。 1.自我介绍 自我介绍是一个重要的开始,好的开始是成功的一半。不需要太多花里胡哨的东西,简单、清…

86墙插双联明装新款:蓝奥声智能用电设备安全防护有多强

物理绝缘和智能数据分析安全技术重塑了墙壁插座的安全标准,极大可能规避日常生活中的意外,只有做到意外情况下也不会触电,这样的墙壁插座才能真正叫安全墙壁插座,“不触电且足够安全”应该成为墙壁插座的安全标配标准。 智能物理…

检测 ARP 欺骗

地址解析协议 (ARP) 是网络通信的基本推动因素。作为网络互联网层和网络链路层之间的桥梁,此网络协议将网络地址 (IP) 转换为物理层地址(MAC 地址)。ARP协议支持的地址转换在促进同一LAN中不同网…

给数据库构建一个展示界面

给mySQL构建一个展示界面 这是“构建个人小型医学数据库”系列文章的最后一部分。通过之前的工作我们确定了所要收集的各类变量并将其录入到mySQL数据库中。 为了展示MySQL中存储的数据,通过摸索我们最终使用appML、PHP和JavaScript开发一个展示页面。这些技术可以…

组合式API - provide和inject、Vue3小案例【Vue3】

组合式API - provide和inject 作用和场景:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信 跨层传递普通数据 顶层组件通过provide函数提供数据 provide(key, 顶层组件中的数据)底层组件通过inject函数获取数据 const message inject(key) …

每日学术速递6.14

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.CV 1.Realistic Saliency Guided Image Enhancement 标题:现实显着性引导图像增强 作者:S. Mahdi H. Miangoleh, Zoya Bylinskii, Eric Kee, Eli Shechtman, Ya…

js创建对象三种方式

创建对象三种方式 1、利用对象字面量创建对象2、利用 new Object 创建对象3、利用构造函数创建对象3.1 构造函数 1、利用对象字面量创建对象 const obj {name: 张三,age: 20 } console.log(obj)结果如下: 2、利用 new Object 创建对象 const obj new Object({…

Jmeter使用||接口测试实战

标题 Jmeter与postman一样,都可以用来进行接口测试。 前面的文章( 测试工具介绍||Jmeter的简单使用),介绍了jmeter的下载、安装及简单使用。基于此背景,通过实例的形式,来介绍下如何利用jmeter进行接口测试…

Rancher集群containerd导出镜像

奇墨科技是国内领先的全域IT质量管理平台及服务商,创始团队为在ITSM、公有云,私有云,超融合及安全业务方向服务多年的业界精英团队,尤其具备领先的运维服务和业务理解能力,已服务了大量的世界及中国500强客户&#xff…

【深度学习】3-4 神经网络的学习- 学习算法的实现

神经网络的学习步骤如下所示: 步骤1(mini-batch) 从训练数据中随机选出一部分数据,目标是减小mini-batch的损失函数的值 步骤2(计算梯度) 为了减小mini-batch的损失函数的值,需要求出各个权重参数的梯度 步骤3(更新参数) 将权重参数沿梯度…

redhat 6.4安装oracle11g RAC (四)

创建集群数据库 在节点rac1上用oracle用户执行dbca创建RAC数据库 [rootrac1 ~]# su - oracle [oraclerac1 ~]$ dbca选择创建数据库 自定义数据库(也可以是通用) 配置类型选择Admin-Managed,输入全局数据库名orcl,每个节点实例SI…

java线上问题排查基本命令

1、jvm基本命令 1.1、java命令 1.1.1、简介 java命令启动java应用程序。它通过启动Java运行时环境(JRE)、加载指定的类并调用该类的main()方法来实现这一点。 1.1.2、命令链接 https://docs.oracle.com/javase/8/docs/techno…

electron 连接打印机打印pdf文件

electron 打印内容 区分系统 类似unix系统的使用 npm包:unix-printwindow系统使用: pdf-to-printer 运行线程 视图线程 函数参数 两个包都提供了print函数来打印文件,配置基本一致,只是参数形式有所不同,pdf-to-pr…

ESP32开发环境搭建Windows VSCode集成Espressif IDF插件ESP32_IDF_V5.0开发编译环境搭建

一、安装ESP32-IDF库 下载网址:https://dl.espressif.com/dl/esp-idf/ 打开上面的网页,选择单击页面中 ESP32-IDF v5.0.2 - Offine Installer,5.0.2是当前最新版本,如果没有ESP32-IDF v5.0.2 - Offine Installer,说明…

JS获取省市区/县,layui获取省市区,layui实现省市区联动,jquery实现省市区联动

前言 通过JS方式获取省市区数据,可自己手动更改JS文件数据 非常简单 效果 实现 百度网盘链接: https://pan.baidu.com/s/1RktJgXY0NP7Eq0ohvBPOEA 提取码: 477z gitee下载链接:https://gitee.com/yuanyongqiang/common-files/blob/master/area.js 下…