เอกสารในห้องสมุดของฉัน

แถบด้านข้างหลายราก

flex-layout

  • Getting Started

  • Guides

  • Reference

typed-rx-http

  • Getting Started

  • Guides

  • Reference

global-rx-state

  • Getting Started

  • Guides

  • Reference

webflux-fe-dev-assistant

reactive-mongo-dsl

สำหรับคุณ
เบลล่าริม
จะเป็นเช่นนี้

สร้างเครื่องมือที่เชื่อมต่อฝั่งหน้าและฝั่งหลัง โดยมุ่งเน้นที่ความมั่นคงของประเภทและประสิทธิภาพการผลิตแบบรีแอคทีฟ
Front: RxJS/React/Next · Back: WebFlux/MongoDB
โอเพนซอร์ส
Frontend · RxJS
@byeolnaerim/typed-rx-http

HTTP client ที่มีความปลอดภัยตามประเภทที่ใช้ RxJS

HTTP
RxJS
Client
npm i @byeolnaerim/typed-rx-http rxjs
Frontend · React UI
@byeolnaerim/flex-layout

คอมโพเนนต์เลย์เอาต์ React สำหรับมุมมองแบบแบ่งที่ปรับขนาดได้

React
Split View
Resizable
npm i @byeolnaerim/flex-layout rxjs react
Frontend · React State
hook สำหรับการแบ่ง/ลาก

สถานะ React ขนาดเล็กที่ให้ named singleton global state และ reducer พร้อมการเก็บรักษาแบบเลือกได้ที่ใช้ RxJS

React
RxJS
State
npm i @byeolnaerim/global-rx-state rxjs react
Backend · WebFlux
com.byeolnaerim:webflux-fe-dev-assistant

ลดการเขียนซ้ำระหว่าง frontend โดยการสร้าง OpenAPI·AsyncAPI, โครงสร้าง handler และ MongoDB field enum ตามแหล่งที่มาของ backend

WebFlux
OpenAPI
AsyncAPI
implementation("com.byeolnaerim:webflux-fe-dev-assistant:<version>")
Backend · MongoDB
com.byeolnaerim:reactive-mongo-dsl

DSL ที่สร้างขึ้นจาก MongoDB Reactive Streams Driver และ Reactor สำหรับ query·aggregation·lookup·atomic update·bulk·Atlas Search·Vector Search.

MongoDB
Reactive
DSL
implementation("com.byeolnaerim:reactive-mongo-dsl:1.0.0")
FLEX LAYOUT
วิธีการใช้ FlexLayout พื้นฐาน

ตัวอย่างการจัดเรียง Split View ที่สามารถปรับขนาดได้ในรูปแบบที่ง่ายที่สุด.
ด้านซ้ายคือโค้ด ด้านขวาคือหน้าจอการทำงานจริงที่มีโครงสร้างเดียวกัน.

โค้ด

import { FlexLayout, FlexLayoutContainer } from "@byeolnaerim/flex-layout";

<FlexLayout direction="column" layoutName="column-layout">
  <FlexLayoutContainer containerName="top-container" isResizePanel>
    <FlexLayout direction="row" layoutName="top-layout">
      <FlexLayoutContainer containerName="top-left" isResizePanel grow={1.3}>
        ...
      </FlexLayoutContainer>
      <FlexLayoutContainer containerName="top-right" grow={0.7}>
        ...
      </FlexLayoutContainer>
    </FlexLayout>
  </FlexLayoutContainer>

  <FlexLayoutContainer containerName="bottom-container">
    <FlexLayout direction="row" layoutName="bottom-layout">
      <FlexLayoutContainer containerName="bottom-left" isResizePanel grow={0.3}>
        ...
      </FlexLayoutContainer>
      <FlexLayoutContainer containerName="bottom-right" grow={1.7}>
        ...
      </FlexLayoutContainer>
    </FlexLayout>
  </FlexLayoutContainer>
</FlexLayout>
ติดต่อ