写点什么

全栈 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:0015832

评论

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

谷歌:使用-Android-Studio-Profiler-工具解析应用的内存和-CPU-使用数据

android 程序员 移动开发

自定义View(一) Android 可计数EditText实现

android 程序员 移动开发

要想工资涨得快,还是得跳槽?一个三本Android程序猿外包到阿里的逆袭之路

android 程序员 移动开发

模块三作业

bob

「架构实战营」

计算机编码简析

android 程序员 移动开发

记联想公司的一次Android面试

android 程序员 移动开发

详解-RxJava2-的线程切换原理(1)

android 程序员 移动开发

设计模式学习--观察者模式(Observer Pattern)

android 程序员 移动开发

自定义ViewGroup实现微信朋友圈九宫格图片控件

android 程序员 移动开发

论一个APP从启动到主页面显示经历的过程?

android 程序员 移动开发

详解Gradle自动实现Android组件化

android 程序员 移动开发

详解HTTP协议

android 程序员 移动开发

详解二叉搜索树(BST)的Java实现和五种遍历方式

android 程序员 移动开发

致刚入行的小白,或者工作一到三年的Android程序员,如何规避“内卷

android 程序员 移动开发

蒂花之秀---大神用漫画讲解字符串匹配算法,让你噩梦变美梦

android 程序员 移动开发

裸辞两个月从Android转战web前端的求职之路

android 程序员 移动开发

nginx 缓存大小的含义

liuzhen007

11月日更

记一次腾讯社招Android面试(已拿到offer入职)

android 程序员 移动开发

设计模式(行为型)之模板方法模式(Template Method Pattern)

android 程序员 移动开发

解决Fragment多层嵌套时onActivityResult无法正确回调的问题

android 程序员 移动开发

认识ClassLoader

android 程序员 移动开发

详解BAT面试必问之ThreadLocal(源码+内存)

android 程序员 移动开发

谷歌-在-CI-中使用-Benchmark-进行回归分析

android 程序员 移动开发

云计算市场,是时候来一场鱿鱼游戏了

白洞计划

自定义View

android 程序员 移动开发

计算机编码简析(1)

android 程序员 移动开发

Linux基金会宣布成立NextArch Foundation基金会 第四范式成为首批共建单位

第四范式开发者社区

设计模式之行为型模式

android 程序员 移动开发

试用期没通过的原因,居然是被发现了上班偷偷干这事

android 程序员 移动开发

自定义Gradle插件的开发

android 程序员 移动开发

详解-RxJava2-的线程切换原理

android 程序员 移动开发

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