ดาวน์โหลด remult - ดาวน์โหลดซอร์สโค้ด remult

รอบ

crud แบบเต็มซ้อน, ง่ายขึ้นพร้อมกับเอนทิตี ssot typescript

บทเรียน Quickstart | ตัวอย่างแอพ

Remult คืออะไร?

Remult ใช้ เอนทิตี TypeScript เป็นแหล่งเดียวของความจริงสำหรับ: ✅ CRUD + REALTIME API, ✅ไคลเอ็นต์ API ประเภทที่ปลอดภัยในส่วนหน้าและ✅ Backend ORM

⚡ zero-boilerplate CRUD + REALTIME API พร้อมเพจการเรียงลำดับและการกรอง
- ความปลอดภัยแบบเต็มสแต็ค สำหรับการสืบค้น API การกลายพันธุ์และ RPC โดยไม่ต้องสร้างรหัส
การตรวจสอบความถูกต้องของอินพุต ที่กำหนดไว้หนึ่งครั้ง ทำงานทั้งบนแบ็กเอนด์และส่วนหน้าสำหรับ UX ที่ดีที่สุด
การอนุญาต API ตามรหัส ที่ละเอียด
- นำไปใช้เพิ่มเติมได้

Remult รองรับฐานข้อมูลสำคัญทั้งหมด รวมถึง: PostgreSQL, MySQL, SQLite, MongoDB, MSSQL และ Oracle

Remult เป็น Frontend และ Backend Framework Agnostic และมาพร้อมกับอะแดปเตอร์สำหรับ Express, Fastify, Next.js, Nuxt, Sveltekit, Solidstart, Nest, Koa, Hapi และ Hono

ต้องการสัมผัสกับ Remult โดยตรงหรือไม่? ลองบทช่วยสอนออนไลน์แบบโต้ตอบของเรา

Remult ส่งเสริม ไวยากรณ์การสืบค้นที่สอดคล้องกันสำหรับทั้งรหัสส่วนหน้าและรหัสแบ็กเอนด์ :

 // Frontend - GET: /api/products?_limit=10&unitPrice.gt=5,_sort=name
// Backend  - 'select name, unitPrice from products where unitPrice > 5 order by name limit 10'
await repo ( Product ) . find ( {
  limit : 10 ,
  orderBy : {
    name : 'asc' ,
  } ,
  where : {
    unitPrice : { $gt : 5 } ,
  } ,
} )

// Frontend - PUT: '/api/products/product7' (body: { "unitPrice" : 7 })
// Backend  - 'update products set unitPrice = 7 where id = product7'
await repo ( Product ) . update ( 'product7' , { unitPrice : 7 } )

การใช้งาน

กำหนดสคีมาในรหัส

 // shared/product.ts

import { Entity , Fields } from 'remult'

@ Entity ( 'products' , {
  allowApiCrud : true ,
} )
export class Product {
  @ Fields . cuid ( )
  id = ''

  @ Fields . string ( )
  name = ''

  @ Fields . number ( )
  unitPrice = 0
}

ไม่ชอบนักตกแต่ง? เราได้รับการสนับสนุนอย่างเต็มที่สำหรับการทำงานโดยไม่มีนักตกแต่ง

เพิ่มแบ็กเอนด์ API ด้วยรหัสบรรทัดเดียว

ตัวอย่าง:

 // backend/index.ts

import express from 'express'
import { remultExpress } from 'remult/remult-express' // adapters for: Fastify,Next.js, Nuxt, SvelteKit, SolidStart, Nest, more...
import { createPostgresDataProvider } from 'remult/postgres' // supported: PostgreSQL, MySQL, SQLite, MongoDB, MSSQL and Oracle
import { Product } from '../shared/product'

const app = express ( )

app . use (
  remultExpress ( {
    entities : [ Product ] ,
    dataProvider : createPostgresDataProvider ( {
      connectionString : 'postgres://user:password@host:5432/database"' ,
    } ) ,
  } ) ,
)

app . listen ( )

Remult เพิ่มตัวจัดการเส้นทางสำหรับ REST API ที่ใช้งานได้อย่างสมบูรณ์และจุดสิ้นสุดแบบใช้ชีวิตแบบเรียลไทม์ซึ่งเป็นทางเลือกรวมถึงข้อมูลจำเพาะ Open API และจุดสิ้นสุด GraphQL

ดึงข้อมูลด้วยรหัสส่วนหน้าแบบปลอดภัย

 const [ products , setProducts ] = useState < Product [ ] > ( [ ] )

useEffect ( ( ) => {
  repo ( Product )
    . find ( {
      limit : 10 ,
      orderBy : {
        name : 'asc' ,
      } ,
      where : {
        unitPrice : { $gt : 5 } ,
      } ,
    } )
    . then ( setProducts )
} , [ ] )

แบบสอบถามสดแบบเรียลไทม์

 useEffect ( ( ) => {
  return repo ( Product )
    . liveQuery ( {
      limit : 10 ,
      orderBy : {
        name : 'asc' ,
      } ,
      where : {
        unitPrice : { $gt : 5 } ,
      } ,
    } )
    . subscribe ( ( info ) => {
      setProducts ( info . applyChanges )
    } )
} , [ ] )

☑การตรวจสอบข้อมูลและข้อ จำกัด - กำหนดครั้งเดียว

 import { Entity , Fields , Validators } from 'remult'

@ Entity ( 'products' , {
  allowApiCrud : true ,
} )
export class Product {
  @ Fields . cuid ( )
  id = ''

  @ Fields . string ( {
    validate : Validators . required ,
  } )
  name = ''

  @ Fields . number < Product > ( {
    validate : ( product ) => product . unitPrice > 0 || 'must be greater than 0' ,
  } )
  unitPrice = 0
}

บังคับใช้ในส่วนหน้า:

 try {
  await repo ( Product ) . insert ( { name : '' , unitPrice : - 1 } )
} catch ( e : any ) {
  console . error ( e )
  /* Detailed error object ->
{
  "modelState": {
    "name": "Should not be empty",
    "unitPrice": "must be greater than 0"
  },
  "message": "Name: Should not be empty"
}
*/
}

บังคับใช้ในแบ็กเอนด์:

 // POST '/api/products' BODY: { "name":"", "unitPrice":-1 }
// Response: status 400, body:
{
  "modelState" : {
    "name" : "Should not be empty" ,
    "unitPrice" : "must be greater than 0"
  } ,
  "message" : "Name: Should not be empty"
}

รักษาความปลอดภัย API ด้วยการอนุญาตอย่างละเอียด

@ Entity < Article > ( 'Articles' , {
  allowApiRead : true ,
  allowApiInsert : Allow . authenticated ,
  allowApiUpdate : ( article ) => article . author == remult . user . id ,
  apiPrefilter : ( ) => {
    if ( remult . isAllowed ( 'admin' ) ) return { }
    return {
      author : remult . user . id ,
    }
  } ,
} )
export class Article {
  @ Fields . string ( { allowApiUpdate : false } )
  slug = ''

  @ Fields . string ( { allowApiUpdate : false } )
  authorId = remult . user ! . id

  @ Fields . string ( )
  content = ''
}

ความสัมพันธ์

 await repo ( Categories ) . find ( {
  orderBy : {
    name : 'asc ' ,
  } ,
  include : {
    products : {
      where : {
        unitPrice : { $gt : 5 } ,
      } ,
    } ,
  } ,
} )

// Entity Definitions
export class Product {
  //...
  @ Relations . toOne ( Category )
  category ?: Category
}
export class Category {
  //...
  @ Relations . toMany < Category , Product > ( ( ) => Product , `category` )
  products ?: Product [ ]
}

UI ผู้ดูแลระบบอัตโนมัติ

แล้ว crud ที่ซับซ้อนล่ะ?

ในขณะที่ CRUD อย่างง่ายไม่ควรใช้การเข้ารหัสแบ็กเอนด์ใด ๆ แต่การใช้ remult หมายถึงการมีความสามารถในการจัดการกับสถานการณ์ที่ซับซ้อนใด ๆ โดยการควบคุมแบ็กเอนด์ในหลายวิธี:

ฟิลด์ที่คำนวณแบ็กเอนด์ (อ่านอย่างเดียว) - จากนิพจน์อย่างง่ายไปจนถึงการค้นหาข้อมูลที่ซับซ้อนหรือแม้กระทั่งการเข้าถึง DB โดยตรง (SQL)
ผลข้างเคียงที่กำหนดเองพร้อมตะขอ Lifecycle Entity (ก่อน/หลังการบันทึก/ลบ)
แบ็กเอนด์เฉพาะฟิลด์ที่อัปเดตได้ (เช่น“ อัปเดตล่าสุดที่”)
ความสัมพันธ์
จุดปลายทางที่ปลอดภัยของคุณเองด้วยวิธีการแบ็กเอนด์
จุดสิ้นสุดระดับต่ำของคุณเอง (Express, Fastify, KOA, อื่น ๆ ... )

การติดตั้ง

แพ็คเกจ Remult เป็นหนึ่งเดียวและเหมือนกันสำหรับทั้งชุดส่วนหน้าและแบ็กเอนด์ ติดตั้งหนึ่งครั้งสำหรับโครงการเสาหินหรือต่อ Repo ใน monorepo

npm i remult

บทเรียน

วิธีที่ดีที่สุดในการเรียนรู้ Remult คือการติดตามการสอนแอปพลิเคชันเว็บแบบง่าย ๆ ด้วยแบ็กเอนด์ Node.js Express

การสอนด้วย React
การสอนด้วยเชิงมุม
การสอนด้วย VUE
การสอนด้วย next.js
การสอนด้วย sveltekit
บทช่วยสอนด้วยโซลโซลด์สตาร์

การสาธิต

ภาพขนาดย่อวิดีโอ

ดูรหัสตัวอย่างบน YouTube ที่นี่ (14 นาที)

เอกสาร

เอกสารครอบคลุมคุณสมบัติหลักของ Remult อย่างไรก็ตามมันยังคงเป็นงานที่กำลังดำเนินอยู่

ตัวอย่างแอพ

Fullstack TODOMVC ตัวอย่างด้วย React และ Express (ซอร์สโค้ด | codesandbox)
การสาธิต CRM พร้อมฐานข้อมูล REACT + MUI Front-end และ Postgres

สถานะ

Remult พร้อมสำหรับการผลิต และในความเป็นจริงใช้ในแอพการผลิตตั้งแต่ปี 2561 อย่างไรก็ตามเรายังคงรักษาเวอร์ชันหลักไว้ที่ศูนย์เพื่อให้เราสามารถใช้คำติชมของชุมชนเพื่อสรุป V1 API

แรงจูงใจ

การพัฒนาเว็บแบบเต็มซ้อนนั้นซับซ้อนเกินไป Simple Crud ข้อกำหนดทั่วไปของแอปพลิเคชันทางธุรกิจใด ๆ ควรเป็นเรื่องง่ายในการสร้างรักษาและขยายเวลา เมื่อจำเป็นต้องเกิดขึ้น

remult abstracts ออกไปซ้ำ ๆ , หม้อไอน้ำ, ข้อผิดพลาดและรหัสที่ออกแบบมาไม่ดีในมือข้างหนึ่งและเปิดใช้งานความยืดหยุ่นและการควบคุมทั้งหมด Remult ช่วยสร้างแอพ FullStack โดยใช้รหัส TypeScript เท่านั้นที่คุณสามารถติดตามและ refactor ได้อย่างปลอดภัย และเข้ากับโครงการที่มีอยู่หรือใหม่ได้อย่างง่ายดายโดยการใช้งานที่เรียบง่ายและไม่ได้รับการผ่าตัดอย่างสมบูรณ์เกี่ยวกับการเลือกเฟรมเวิร์กและเครื่องมืออื่น ๆ

เฟรมเวิร์กอื่น ๆ มีแนวโน้มที่จะตกอยู่ในนามธรรมมากเกินไป (ไม่มีรหัส, รหัสต่ำ, BAAS) หรือนามธรรมบางส่วน (กรอบ MVC, graphQL, ORMS, เครื่องกำเนิดไฟฟ้า API, เครื่องกำเนิดรหัส) และมีแนวโน้มที่จะให้ความเห็นเกี่ยวกับห่วงโซ่เครื่องมือพัฒนา remult พยายามที่จะสร้างสมดุลที่ดีขึ้น