Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >全栈 TypeScript CRUD 框架 Remult

全栈 TypeScript CRUD 框架 Remult

作者头像
深度学习与Python
发布于 2023-08-08 13:21:07
发布于 2023-08-08 13:21:07
33600
代码可运行
举报
运行总次数:0
代码可运行
作者 | Guy Nesher

译者 | 平川

策划 | 丁晓昀

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

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

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

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

定义实体

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 进行操作。

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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/

声明:本文由 InfoQ 翻译,未经许可禁止转载。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2023-06-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 InfoQ 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
使用 NextJS 和 TailwindCSS 重构我的个人博客
这是笔者第三次重构博客,虽然博客应用是最简单的应用,但学习新技术何不从重构博客开始?
狂奔滴小马
2021/11/15
3.1K0
使用 NextJS 和 TailwindCSS 重构我的个人博客
Laravel5.8开发环境搭建与CRUD应用实践
在这个面向初学者的教程中,我们将学习如何使用最新的PHP开发框架Laravel 5.8,来创建一个基于MySQL数据库的Web应用,实现联系人的增删改查功能。
用户1408045
2019/08/25
6.6K0
如何理解 CRUD 与 REST
CRUD 和 REST 是应用开发领域中两个比较常见的概念,但由于二者之间概念存在重叠而常常被混淆。简单来说,REST 是一种软件架构风格,是一种针对网络应用的设计和开发方式。而 CRUD 是一个缩写,指的是数据库中可以执行的四种基本操作:创建 (Create)、读取 (Read)、更新 (Update) 和删除 (Delete)。
码匠Majiang
2023/01/03
1K0
如何理解 CRUD 与 REST
Flask RESTful API 简单的设计一个 GET 请求接口
数据库:PostgreSQL 框架:Flask 语言:Python 3.6 前提 之前我有每天定时爬取bing壁纸,写入postgresql数据库的,如下: ER图 需要的Python环境 flask
禹都一只猫olei
2018/07/05
6.3K3
React、TypeScript、NodeJS 和 MongoDB 搭建 Todo App
在本教程中,我们将在服务器和客户端使用 TypeScript、React、NodeJS、Express 和 MongoDB 从头开始构建一个 Todo 应用程序。
前端迷
2020/08/28
18K0
React、TypeScript、NodeJS 和 MongoDB 搭建 Todo App
如何使用 Hilla 管理全栈 Java 开发
作为旨在简化 Web 应用程序开发的框架,Hilla 在开源社区中脱颖而出。它结合了 Spring Boot Java 后端和反应式 TypeScript 前端,以及通过 Lit 或 React 进行的 UI 设计,可以创建动态应用程序。Vaadin 的 40 多个开源 UI Web 组件进一步增强了它,为卓越的用户体验提供了随时可用的元素。
IT千锋教育
2023/06/12
1.6K0
React Server Components手把手教学
在上一篇介绍React 18 如何提升应用性能文章中提到了很多关于React性能优化的方式,例如(Suspence),从底层实现的角度来看,都是基于React Server Component(简称RSC)来做文章.
前端柒八九
2023/09/10
1.1K0
React Server Components手把手教学
Vue.js + Node.js + Express + MySQL示例:构建全栈CRUD应用程序
上次修改时间:2020年10月16日 bezkoder Full Stack,Node.js,Vue.js
ccf19881030
2020/11/10
26.8K0
Vue.js + Node.js + Express + MySQL示例:构建全栈CRUD应用程序
40道ReactJS 面试问题及答案
英文 | https://blog.stackademic.com/top-40-reactjs-interview-questions-and-answers-for-2024-70c94e5fccca
winty
2024/04/03
3.8K0
40道ReactJS 面试问题及答案
Contact Manager Web API 示例[1]CRUD 操作
联系人管理器web API是一个Asp.net web api示例程序,演示了通过ASP.NET Web API 公开联系信息,并允许您添加和删除联系人,示例地址http://code.msdn.microsoft.com/Contact-Manager-Web-API-0e8e373d . 下面的文章以这个示例讲解ASP.NET Web API的各方面知识: 1、CRUD操作: CURD 是 "Create, Read, Update, Delete" (新增、读取、更新、删除) 的简写,这四个动作是数据
张善友
2018/01/22
1K0
Qwik vs. Next.js:你的下一个Web项目应该选哪个框架?
Qwik 是我进行 Web 项目开发的首选框架,而不是 Next.js。在本文中,我将探讨 Qwik 和 Next.js 的区别、优缺点。不过,我相信,由 Builder.io 创建的 Qwik 有潜力成为 Web 开发的未来。
深度学习与Python
2024/05/06
4980
Qwik vs. Next.js:你的下一个Web项目应该选哪个框架?
Typescript 全栈最值得学习的技术栈 TRPC
如果你想成为一个 Typescript 全栈工程师,那么你可能需要关注一下 tRPC 框架。
愧怍
2023/03/14
3.6K0
Typescript 全栈最值得学习的技术栈 TRPC
Typescript 全栈最值得学习的技术栈 TRPC
如果你想成为一个 Typescript 全栈工程师,那么你可能需要关注一下 tRPC 框架。
愧怍
2023/03/11
2.2K0
Typescript 全栈最值得学习的技术栈 TRPC
在 JavaScript 和 TypeScript 框架中应用 SOLID 原则
SOLID 原则是面向对象设计的五个基本原则,旨在帮助开发者创建可维护、可扩展和可重用的代码。虽然这些原则起源于面向对象编程,但它们可以有效地应用于 JavaScript。本文通过JS中的真实示例解释了每个原则。
萌萌哒草头将军
2025/02/19
3810
在 JavaScript 和 TypeScript 框架中应用 SOLID 原则
Nest.js 快速入门:实现对 Mysql 单表的 CRUD
Nest.js 是一个 Node.js 的后端开发框架,它实现了 MVC 模式,也支持了 IOC(自动注入依赖),比 Express 这类处理请求响应的库高了一个层次。而且也很容易集成 GraphQL、WebSocket 等功能,适合用来做大规模企业级开发。
神说要有光zxg
2021/12/26
4.5K0
Nest.js 快速入门:实现对 Mysql 单表的 CRUD
使用 React 和 NodeJS 创建一个全栈项目
我们都知道 React 非常优秀并且非常出色,我们可以使用 create-react-app 快速搭建一个前端应用。 但是由于 React 构建出来的只是前端静态资源(如:HTML、CSS 、JS 等),往往不能独立部署,我们还需要一个 WEB 服务器,还需要调用 API; 在本文中,我将使用 React 和 NodeJS 创建一个全栈项目。介绍下如何让 Node.js 作为 web 服务器来加载 React 构建出的静态资源,如何让 React 程序可以直接调用 NodeJS API。
狂奔滴小马
2022/03/30
3.6K0
使用 React 和 NodeJS 创建一个全栈项目
混搭 TypeScript + GraphQL + DI + Decorator 风格写 Node.js 应用
阅读本文的知识前提:熟悉 TypeScript + GraphQL + Node.js + Decorator + Dependency Inject 等概念。本文选用技术框架是 Midway.js,设计思路可以迁移到 Nest.js 等框架上,改动量应该不会太大。 本文长约 1.3w 字,阅读时间约 20min
JSCON简时空
2020/08/25
3.6K0
混搭 TypeScript + GraphQL + DI + Decorator 风格写 Node.js 应用
前端高级工程师(大前端)-慕K全栈开发
全栈开发是指同时掌握前端与后端技术的开发方式,多端开发则涵盖Web、移动端和桌面端。全栈多端开发旨在提高开发效率,实现跨平台应用。前端全栈开发者不仅要熟练掌握HTML、CSS、JavaScript,还需要掌握现代前端框架、Node.js以及各种构建工具。
谢燃远
2024/06/06
6170
TypeScript在node项目中的实践
TypeScript可以理解为是JavaScript的一个超集,也就是说涵盖了所有JavaScript的功能,并在之上有着自己独特的语法。 最近的一个新项目开始了TS的踩坑之旅,现分享一些可以借鉴的套路给大家。
贾顺名
2019/12/09
1.9K0
TypeScript在node项目中的实践
基于 Next.js实现在线Excel
如果要从头开始使用 React 构建一个完整的 Web 应用程序,需要哪些步骤? 这当然不像把大象装进冰箱那么简单,只需要分成三步:打开冰箱,拿起大象,塞进冰箱就好。
葡萄城控件
2022/09/19
6.9K0
推荐阅读
相关推荐
使用 NextJS 和 TailwindCSS 重构我的个人博客
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档