Skip to content

README_de.md

Latest commit

 

History

History
60 lines (42 loc) · 3.83 KB

README_de.md

File metadata and controls

60 lines (42 loc) · 3.83 KB

TsFullStack

English Document Chinese Document Japanese Document Korean Document French Document German Document Spanish Document

Dies ist mein TypeScript-Fullstack-Best-Practice-Projekt. Nach der Definition von Datenmodellen können Sie direkt auf die Datenbank vom Frontend zugreifen, ohne Backend-API-Code schreiben zu müssen, und MVP-Modelle schnell entwickeln.

Für traditionelle Admin-Oberflächen habe ich wirklich die Nase voll, ich möchte sie nie wieder schreiben.

Online Demo

zread Projekt Online AI Dokumentation

Dokumentationsadresse

Funktionen

  • Backend

    • Technologiestack: ts + prisma + zenstack + Effect + fastify
    • zenstack (auf Prisma basierende erweiterte Lösung) zur Implementierung von Datenbankmodellierung und Row Level Security.

  • Brücke

    • Technologiestack: ts + superjson + selbst entwickelte RPC-Bibliothek
    • Frontend kann direkt Backend-APIs mit vollständigen TypeScript-Typ-Hints aufrufen, ohne Middleware-Code schreiben zu müssen.
    • superjson unterstützt Serialisierung und Deserialisierung komplexer Objekte wie Date, Map, Set, RegExp..., um sicherzustellen, dass Prisma-Eingabeparameter und Rückgabeergebnisse nahtlos übertragen werden können.

  • Frontend

    • Technologiestack: ts + vue3 + tailwindcss + primevue Komponentenbibliothek
    • Perfekte i18n-Internationalisierungsunterstützung, um sicherzustellen, dass jedes Detail mehrsprachiges dynamisches Umschalten ohne Neuladen der Seite unterstützt.
    • Hell/Dunkel-Themen-Wechsel, Komponenten und tailwindcss unterstützen synchron dynamisches Umschalten.
    • Implementierte Funktionsseiten
    • Prisma-Studio-ähnliches Admin-Panel (kann bis zu einem gewissen Grad als Open-Source-Alternative dienen), kein Bedarf mehr für das Schreiben von sich wiederholenden CRUD-Seiten.
    • NoteCalc Ein chinesischfreundliches Echtzeit-Berechnungsnotizbuch
    • AiEnglish Progressives Englischlernen beim Lesen

Weitere Anwendungsbeispiele

  • Browser-Erweiterung - InfoFlow

Schnellstart

  1. Projekt klonen
  2. Abhängigkeiten installieren: Wechseln Sie in das Backend-Verzeichnis und führen Sie pnpm i aus, um Abhängigkeiten zu installieren (ignorieren Sie den Fehler: Failed to resolve entry for package "@tsfullstack/backend", wir werden dieses Paket in den folgenden Schritten generieren)
  3. Datenbank initialisieren: Führen Sie im Backend-Verzeichnis pnpm zenstack generate und pnpm prisma migrate dev aus
  4. @tsfullstack/backend API-Paket kompilieren: Führen Sie im Backend-Verzeichnis pnpm build:lib aus (es werden einige Typfehler auftreten, für die ich vorläufig keine gute Lösung gefunden habe, aber dies不影响 die Verwendung, ignorieren Sie es)
  5. Backend-Service starten: Führen Sie im Backend-Verzeichnis pnpm dev aus
  6. Frontend-Service starten: Führen Sie im website-frontend-Verzeichnis pnpm dev aus

Projektstruktur-Design

Design-Philosophie

  • Projektbasis
    • apps/website-frontend ist das Frontend-Basisprojekt
    • apps/backend ist das Backend-Basisprojekt
  • Modularer Frontend- und Backend-Projektcode
    • modules/*
    • Frontend-Code innerhalb eines Moduls kann direkt Backend-Code-Schnittstellen innerhalb des Moduls referenzieren