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 现已发布:全新的装饰器,速度、内存和包大小优化
评论