svelteapp typescript go
1.0.0
Dies ist eine einfache Einkaufs -Demo -App, die auf denselben Angular/React/Vue.js -Beispielen in Essential Typenkript von Adam Freeman basiert:
/src )/backend )/db )Das Projekt wird mit einer Dockerfile geliefert, mit der ein einzelner kleiner Container mit mehrstufigen Builds (Bildgröße ~ 25 MB) erstellt und auch in DevContainer/Codespace geöffnet werden kann.
Ein GitHub-Action-Workflow wird erstellt, um den Build-Test für die Pull-Requests von Defonabot für Abhängigkeitsaktualisierungen auszuführen.
Der Zweck des Projekts ist eine Demonstration, eine kleine und in sich geschlossene monolithische Anwendung mit modernen Frameworks zu erstellen, aber keine praktische Vorlage für Bewerbungen in der realen Welt sein. Beispielsweise werden Fehlerhandler zwischen Front-End und Authentifizierung meist ignoriert.
Eine ähnliche Version mit Vue.js, Express, MongoDB und Docker Compose finden Sie hier (nicht mehr gewartet).
Die Folge -App hat die folgenden Routen:
| Route | Seite |
|---|---|
/ | Index (wird zu /products umgeleitet) |
/products | Durchsuchen und Produkte in den Warenkorb hinzufügen |
/order | Ansicht und Checkout -Bestellung |
/summary/{id} | Auftragsergebnis |
/ geöffnet wird, wird sie sofort zu /products umgeleitet./products lädt die Produktliste aus einem API -Service und zeigt die Kategorien und Elemente an.Add To Cart , wird er dem Wagen (Global State Array orderLines ) hinzugefügt.Submit Order auf /products einzureichen, wird die App zu /order , whcih wird das Detail der Bestellung angezeigt./order Submit Order , sendet die App die Bestellung an einen API -Dienst und erhält die Bestell -ID./summary/[id] weitergeleitet. Das Backend erzeugt zwei erholsame APIs:
| API | Funktion |
|---|---|
Get /api/products | DB abfragen und Produktdaten zurückgeben |
Post /api/orders | Schreiben Sie Bestelldaten in DB und senden Sie eine neue Bestell -ID zurück |
Die ursprünglichen Projekte von Adam Freeman verwenden json-server auf einem Express-Server als Mock-API-Dienste. Ich halte die Eingabe-/Ausgangsspezifikation der Dienste aus Gründen der Demonstration. Im Moment liest die App wie bei allen Originalbeispielen nur Produktlisten und schreibt Bestelldaten. Das in den ursprünglichen Beispielen verwendete Axios -Paket wird ebenfalls durch fetch ersetzt.
Sufeltkit hat auch eine Funktion zum Erstellen von "Backend -APIs". Der Golang -Server hier reicht jedoch aus, sodass wir nicht wirklich doppelte APIs erstellen müssen.
/api/products Geben Sie eine Liste von Produkten aus der Datenbank zurück. Die category wird verwendet, um Kategoriefiltertasten in der App zu erstellen.
Beispiel Anfragekörper:
(keiner)
Beispiel Antwortkörper:
[
{
"id" : 1 ,
"name" : " Kayak " ,
"category" : " Watersports " ,
"description" : " A boat for one person " ,
"price" : 275.0
},
{
"id" : 2 ,
"name" : " Lifejacket " ,
"category" : " Watersports " ,
"description" : " Protective and fashionable " ,
"price" : 48.95
}
]/api/ordersSchreiben Sie bestellte Artikel und Mengen. Der Service erstellt eine neue Bestell -ID und verbindet sie den geordneten Produkten.
Beispiel Anfragekörper:
{
"lines" : [
{
"productId" : 1 ,
"productName" : " Kayak " ,
"quantity" : 2
},
{
"productId" : 2 ,
"productName" : " Lifejacket " ,
"quantity" : 4
}
]
}Beispiel Antwortkörper:
{
"id" : 42
} Die SQLite -Datenbank ( ./db/data.sqlite3 ) in diesem Repo enthält bereits die products mit 9 Produktaufzeichnungen (die in vielen Büchern von Adam Freeman zu finden sind) und einer leeren orders . Sie können den DB -Browser für SQLite verwenden, um die Datenbank zu lesen. Es gibt auch eine Sicherungsdatei, falls Sie die Datenbank wiederherstellen müssen.
Hier sind die SQL -Aussagen, um sie neu zu erstellen:
CREATE TABLE " products " (
" id " INTEGER NOT NULL UNIQUE, -- product ID
" name " TEXT NOT NULL ,
" category " TEXT NOT NULL ,
" description " TEXT ,
" price " REAL NOT NULL ,
PRIMARY KEY ( " id " AUTOINCREMENT)
);
CREATE TABLE " orders " (
" id " INTEGER NOT NULL , -- order ID
" product_id " INTEGER NOT NULL , -- product ID
" quantity " INTEGER NOT NULL
);
INSERT INTO " main " . " products " (
" id " ,
" name " ,
" category " ,
" description " ,
" price "
)
VALUES
( ' 1 ' , ' Kayak ' , ' Watersports ' , ' A boat for one person ' , ' 275.0 ' ),
( ' 2 ' , ' Lifejacket ' , ' Watersports ' , ' Protective and fashionable ' , ' 48.95 ' ),
( ' 3 ' , ' Soccer Ball ' , ' Soccer ' , ' FIFA-approved size and weight ' , ' 19.5 ' ),
( ' 4 ' , ' Corner Flags ' , ' Soccer ' , ' Give your playing field a professional touch ' , ' 34.95 ' ),
( ' 5 ' , ' Stadium ' , ' Soccer ' , ' Flat-packed 35,000-seat stadium ' , ' 79500.0 ' ),
( ' 6 ' , ' Thinking Cap ' , ' Chess ' , ' Improve brain efficiency by 75% ' , ' 16.0 ' ),
( ' 7 ' , ' Unsteady Chair ' , ' Chess ' , ' Secretly give your opponent a disadvantage ' , ' 29.95 ' ),
( ' 8 ' , ' Human Chess Board ' , ' Chess ' , ' A fun game for the family ' , ' 75.0 ' ),
( ' 9 ' , ' Bling Bling King ' , ' Chess ' , ' Gold-plated, diamond-studded King ' , ' 1200.0 ' );Für die lokale Entwicklung benötigen Sie
Hinweis: Das
go-sqlite3-Paket muss GCC mit der UmgebungsvariablenCGO_ENABLED=1kompilieren.Für Windows -Benutzer kann es mit Mingw installiert werden (Unzip und addieren Sie
mingw64binzu$PATHund starten Sie dann gegen Code neu). Unter Linux kann es mit dem Paketbuild-essentialinstalliert werden.
git clone https://github.com/alankrantas/svelteapp-typescript-go.git
cd svelteapp-typescript-go
npm i -g yarn@latest
yarn setup-fullUnd installieren/upgradieren Sie Garn:
npm i -g yarn@latest Führen Sie die Svelte -App im Entwicklungsmodus aus. Die App ruft keine Backend -APIs auf, sondern gibt Mock -Produktdaten zurück und die zurückgegebene Bestellnummer beträgt immer 42 .
yarn dev Die App ist unter http://localhost:3000 geöffnet.
# download frontend dependencies
yarn
# download backend dependencies
yarn setup-server
# download both dependencies
yarn setup-full
# or
# yarn setup-all # upgrade frontend dependencies
yarn upgrade-app
# upgrade backend dependencies
yarn upgrade-server
# upgrade both dependencies
yarn upgrade-full
# or
# yarn upgrade-allInstallieren Sie Abhängigkeiten, erstellen Sie sowohl Front-End- als auch Back-End-Apps und führen Sie den lokalen Server aus:
# build frontend app
yarn build-app
# build backend server (which will set CGO_ENABLED=1)
yarn build-server
# build both
yarn build-full
# or
# yarn build
# yarn build-all # serve in macOS or Linux
yarn serve
# serve in Windows
yarn serve-win Die App würde unter http://localhost:8080 geöffnet.
# build container
yarn docker
# run container
yarn docker-run Die App würde unter http://localhost:8080 geöffnet.
