写点什么

全栈 TypeScript CRUD 框架 Remult

  • 2023-06-05
    北京
  • 本文字数:1306 字

    阅读完需:约 4 分钟

全栈TypeScript CRUD框架 Remult

Remult 是一个全栈 CRUD 库,它利用 TypeScript 模型来简化开发,并提供了类型安全的 API 客户端和查询构建器。

 

在软件开发中,为了确保系统功能正常,必须管理和同步两个数据模型:服务器模型和客户端模型。服务器模型指定数据库结构和 API,而客户端模型定义 API 的传入传出数据。

 

然而,维护单独的模型集和验证器可能会导致冗余,增加维护开销,以及模型不同步时出错的可能性。

 

Remult 通过提供一个集成模型来解决这个问题。该模型定义了数据库模式,暴露了简单的 CRUD API,并支持客户端集成,使开发人员能够轻松地查询数据库,并且可以确保类型安全。

 

定义实体


Remult 使用装饰器将基本的 JavaScript 类转换为 Remult 实体。开发人员可以向类中添加 Entity 装饰器,并对每个属性应用相关的字段装饰器,从而轻松地完成这项工作。

 

使用装饰器,Remult 简化了创建实体及相关字段的过程,提高了开发人员的高效。

import { Entity, Fields } from "remult"

@Entity("contacts", { allowApiCrud: true})

export class Contact { @Fields.autoIncrement() id = 0 @Fields.string() name = "" @Fields.string() number = ""}
复制代码

 

服务器端设置


要开始使用 Remult,请将其与所选服务器上必要的实体一起注册。

 

幸运的是,Remult 针对几个流行的服务器框架提供了开箱即用的集成,包括 Express、Fastify、Next.js、Nest 和 Koa。

import express from "express";import { remultExpress } from "remult/remult-express";import Contact from "../shared/Contact.ts";

const app = express();

app.use( remultExpress({ entities: [ Contact ] }));
复制代码

 

客户端集成

配置完后端和实体后,下一步是将 Remult 与应用程序的前端集成。

 

幸运的是,Remult 的客户端集成被设计成库无关的。也就是说,它可以使用浏览器 fetch 功能或 Axios 进行操作。

 

为了说明这一点,请看下面的例子:


import { useEffect, useState } from "react"

import { remult } from "remult"import { Contact } from "./shared/Contact"const contactsRepo = remult.repo(Contact)

export default function App() { const [contacts, setContacts] = useState<Contact[]>([])

useEffect(() => { contactsRepo.find().then(setContact) }, [])

return ( <div> <h1>Contacts</h1> <ul> {contacts.map(contact => { return ( <div key={contact.id}> {contact.name} | {contact.phone} </div> ) })} </ul> </div> )}
复制代码

 

从这个例子可以看出,将 Remult 集成到应用程序前端非常简单、灵活。然后,开发人员就可以在整个栈中无缝地利用 Remult 的强大功能了。

 

Remult 是遵循MIT许可的开源软件。欢迎通过 Remult GitHub存储库做贡献。

 

原文链接:

https://www.infoq.com/news/2023/05/remult-crud-typescript/


相关阅读:

“TypeScript不值得!”前端框架Svelte作者宣布重构代码,反向迁移到JavaScript引争议

三年回顾:JavaScript与TypeScript最新特性汇总

TypeScript 5.0 现已发布:全新的装饰器,速度、内存和包大小优化

2023-06-05 08:0014024

评论

发布
暂无评论
发现更多内容

​比特币大跌的 2 个原因

TechubNews

从零开始用Rust编写nginx,命令行参数的设计与解析及说明

不在线第一只蜗牛

nginx rust 开发语言

一分钟带你搞定MySQL5.5安装教程

小魏写代码

指标平台详解(上):为什么有了 BI ,还需要指标平台?

Aloudata

BI 指标体系 ETL BI 分析工具 指标中台

矩阵起源荣获《2023大数据产业年度国产化优秀代表厂商》

MatrixOrigin

云原生 分布式, 数据库· 分布式数据库 Matrixone

哪里有BricsCAD中文版资源?最新2024版BricsCAD破解中文 for Mac安装包

南屿

CAD设计软件 BricsCAD 24破解版 BricsCAD 24下载

Cinema 4D 2024 图文安装教程 c4d2024中文版附激活补丁

南屿

3d建模 Cinema 4D 2024 C4D R24插件 Cinema 4D安装教程

和鲸CEO范向伟入选2022年上海市东方英才计划创业项目领军创业人才

ModelWhale

人工智能 创业 AI 东方英才 前沿产业

良心推荐!五个超好用的Vue3工具

伤感汤姆布利柏

FTM 暴跌23% — 除了价格下跌之外还有什么?

Footprint Analytics

区块链 Token 代币 FTM

1Password 7 :为用户提供安全高效的密码管理

南屿

1Password 7 Mac密码管理器

甲骨文云-云迁移新篇章:轻松、快捷的数据库搬家之路

Geek_2d6073

前端重磅福利!前端百宝箱

前端连环话

前端开发平台

聚焦AI4S,产学研专家齐聚,探讨AI工具在多领域应用的现状与趋势

ModelWhale

MCtalk·CEO对话 x 高成资本丨2024年,SaaS 还是不是一门好生意?

ToB行业头条

wolframmathematica14激活密钥 mathematica mac破解安装教程

南屿

Wolfram Mathematica下载 Wolfram Mathematica密钥 Mathematica 14新功能 数学软件Mac版

花 15 分钟把 Express.js 搞明白,全栈没有那么难

杨成功

JavaScript node.js 前端 全栈

[分词]基于Lucene8版本的逆向最大匹配分词器(依赖本地词典)

alexgaoyh

Java 中文分词 lucene 逆向最大匹配

Acxyn 和 Footprint Analytics 联手探索 Web3 游戏知识产权评估

Footprint Analytics

区块链 区块链游戏

【2024最新版】Sapphire视觉特效插件功能介绍 附蓝宝石插件破解补丁

南屿

视觉特效插件 Boris FX Sapphire 蓝宝石插件

zbrush2024新功能介绍 含zbrush2024下载破解资源

南屿

ZBrush 2024新功能 zbrush2024破解版 zbrush2024下载 zbrush雕刻

矩阵起源通过2023年“专精特新”中小企业认定!

MatrixOrigin

云原生 数据库· 分布式数据库 Matrixone

livehome3dpro破解版 Mac室内设计软件 中文版Live Home 3D Pro下载

南屿

Mac软件 3D家庭室内设计工具 装修设计 livehome3dpro破解版

点燃你的Python技能:剖析闭包与装饰器的魔力

测试人

软件测试

Paste for Mac剪切板工具 强大的功能可提高您的工作效率

南屿

Paste for Mac 剪切板管理软件 paste mac破解版

unitypro安装教程 Unity Pro 2018 Mac破解版下载安装

南屿

Unity Pro 2019 Unity Pro 安装教程 3D游戏动画开发工具

NebulaGraph is nothing without you | 社区 2023 年度人物合集

NebulaGraph

网络要素服务(WFS)详解

快乐非自愿限量之名

开发 网络 服务 wfs

不会用Photoshop修图?别急,Pixelmator Pro比肩ps的mac修图软件 轻松实现专业级图像处理!

南屿

Pixelmator Pro破解 Pixelmator Pro下载 修图软件 Mac图像编辑器

全栈TypeScript CRUD框架 Remult_大前端_Guy Nesher_InfoQ精选文章