Remult 简介

Remult 是一个全栈 CRUD 库，通过利用 TypeScript 模型简化开发流程，提供类型安全的 API 客户端和查询构建器。它解决了服务器和客户端模型同步的问题，减少了冗余和维护成本，并防止模型不同步导致的错误。

模型同步问题

在软件开发中，服务器模型和客户端模型需要同步以确保系统功能的正常运行。服务器模型定义了数据库和 API 的结构，而客户端模型定义了与 API 交互的数据。维护独立的模型和验证器可能导致冗余、增加维护成本，并可能引入错误。

Remult 的解决方案

Remult 提供了一个集成模型，定义了数据库模式，暴露了简单的 CRUD API，并支持客户端集成，使开发者能够轻松查询数据库，同时保持类型安全。

定义实体

Remult 使用装饰器将基本的 JavaScript 类转换为 Remult 实体。开发者可以通过在类上添加 @Entity 装饰器，并在每个属性上应用相关字段装饰器来轻松实现这一点。

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 是开源软件，采用 MIT 许可证发布。欢迎通过 GitHub 仓库 贡献代码。