svelteapp typescript go
1.0.0
這是一個簡單的購物演示應用程序，基於Adam Freeman的Essential Typescript中相同的Angular/React/vue.js示例：
/src ）/backend ）/db ）該項目帶有一個Dockerfile，可以創建一個帶有多階段構建的小容器（圖像尺寸約25 MB），並且還可以在DevContainer/codespace中打開。
創建了一個GitHub Action Workflow，以運行Depentabot的套管重新測試的構建測試。
項目的目的是演示，以建立一個具有現代框架的小型且具有獨立的全棧單片應用程序，但並不是任何現實世界應用的實用模板。例如，前端和身份驗證之間的錯誤處理大多被忽略。
可以在此處找到使用vue.js，express，mongodb和docker組成的類似版本（不再維護）。
Svelte應用具有以下路線：
| 路線 | 頁 |
|---|---|
/ | 索引（將重定向到/products ） |
/products | 瀏覽並將產品添加到購物車 |
/order | 查看和結帳訂單 |
/summary/{id} | 訂單結果 |
/打開時，它將立即重定向到/products 。/products從API服務加載產品列表，並顯示類別和項目。Add To Cart ，它將被添加到購物車（全局狀態數組orderLines ）中。Submit Order /products時，該應用將重定向到/order ，WHCIH將顯示訂單的詳細信息。/order上Submit Order時，應用將訂單發送到API服務並獲取訂單ID。/summary/[id] 。 後端創建了兩個靜止的API：
| API | 功能 |
|---|---|
獲取/api/products | 查詢數據庫並返回產品數據 |
發布/api/orders | 將訂單數據寫入DB並返回新訂單ID |
亞當·弗里曼（Adam Freeman）的原始項目將Express服務器上的json-server用作模擬API服務。為了演示，我將服務的輸入/輸出規範保留。現在，像所有原始示例一樣，該應用僅讀取產品列表並寫入訂單數據。原始示例中使用的Axios軟件包也被fetch替換。
Sveltekit還具有創建“後端API”的功能。但是，這裡的Golang服務器就足夠了，因此我們實際上不需要創建重複的API。
/api/products從數據庫返回產品列表。該category將用於在應用程序上創建類別過濾器按鈕。
示例請求主體：
（沒有任何）
示例響應主體：
[
{
"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/orders寫入有序的項目和數量。該服務將創建一個新的訂單ID，並將其與有序產品相關聯。
示例請求主體：
{
"lines" : [
{
"productId" : 1 ,
"productName" : " Kayak " ,
"quantity" : 2
},
{
"productId" : 2 ,
"productName" : " Lifejacket " ,
"quantity" : 4
}
]
}示例響應主體：
{
"id" : 42
}該存儲庫中的SQLite數據庫（ ./db/data.sqlite3 ）已經包含了帶有9個產品記錄的表products （可以在許多亞當·弗里曼（Adam Freeman）的書籍中找到）和一個空表orders 。您可以將DB瀏覽器用於SQLite來讀取數據庫。還有一個備份文件，以防您需要還原數據庫。
這是重新創建它們的SQL語句：
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 ' );對於本地發展，您需要
注意：
go-sqlite3軟件包需要GCC與環境變量CGO_ENABLED=1進行編譯。對於Windows用戶，可以使用Mingw（UNZIP並將
mingw64bin添加到$PATH，然後重新啟動VS代碼）安裝。在Linux上，它可以使用build-essential安裝。
git clone https://github.com/alankrantas/svelteapp-typescript-go.git
cd svelteapp-typescript-go
npm i -g yarn@latest
yarn setup-full並安裝/升級紗線：
npm i -g yarn@latest在開發模式下運行Svelte應用程序。該應用程序不會調用任何後端API，而是返回模擬產品數據，並且返回的訂單號始終為42 。
yarn dev該應用將在http://localhost:3000打開。
# 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-all安裝依賴項，同時構建前端和後端應用程序，然後運行本地服務器：
# 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該應用程序將在http://localhost:8080打開。
# build container
yarn docker
# run container
yarn docker-run該應用程序將在http://localhost:8080打開。
