svelteapp typescript go
1.0.0
นี่คือแอพสาธิตการช็อปปิ้งที่เรียบง่ายขึ้นอยู่กับตัวอย่าง Angular/React/Vue.js เดียวกันใน Adam Freeman: Adam Freeman :
/src )/backend )/db )โครงการมาพร้อมกับ Dockerfile ที่สามารถสร้างภาชนะขนาดเล็กเดียวที่มีการสร้างหลายขั้นตอน (ขนาดภาพ ~ 25 MB) และยังรองรับการเปิดใน DevContainer/CodeSpace
GitHub Action Workflow ถูกสร้างขึ้นเพื่อเรียกใช้การทดสอบบิลด์สำหรับการตอบกลับแบบดึงสำหรับการอัพเดทการพึ่งพา
จุดประสงค์ของโครงการคือการสาธิตในการสร้างแอพพลิเคชั่นเสาหินขนาดเล็กและมีอยู่ในตัวเองด้วยกรอบที่ทันสมัย แต่ไม่ได้หมายถึงเทมเพลตที่ใช้งานได้จริงสำหรับแอปพลิเคชันโลกแห่งความเป็นจริง ตัวอย่างเช่นตัวจัดการข้อผิดพลาดระหว่างส่วนหน้าและการรับรองความถูกต้องส่วนใหญ่จะถูกละเว้น
รุ่นที่คล้ายกันโดยใช้ Vue.js, Express, MongoDB และ Docker Compose สามารถพบได้ที่นี่ (ไม่ได้รับการดูแลอีกต่อไป)
แอพ Svelte มีเส้นทางต่อไปนี้:
| เส้นทาง | หน้าหนังสือ |
|---|---|
/ | ดัชนี (จะเปลี่ยนเส้นทางไปยัง /products ) |
/products | เรียกดูและเพิ่มผลิตภัณฑ์ลงในตะกร้าสินค้า |
/order | ดูและสั่งซื้อ |
/summary/{id} | ผลการสั่งซื้อ |
/ จะเปลี่ยนเส้นทางไปยัง /products ทันที/products โหลดรายการผลิตภัณฑ์จากบริการ API และแสดงหมวดหมู่และรายการAdd To Cart ในรายการใด orderLines มันจะถูกเพิ่มลงในรถเข็นSubmit Order /products แอพจะเปลี่ยนเส้นทางไปยัง /order WHCIH จะแสดงรายละเอียดของคำสั่งซื้อSubmit Order /order แอปจะส่งคำสั่งซื้อไปยังบริการ API และรับรหัสคำสั่งซื้อ/summary/[id] เป็นผลลัพธ์ แบ็กเอนด์สร้าง API แบบพักผ่อนสองแบบ:
| API | การทำงาน |
|---|---|
รับ /api/products | สอบถามข้อมูล DB และส่งคืนข้อมูลผลิตภัณฑ์ |
โพสต์ /api/orders | เขียนข้อมูลการสั่งซื้อลงใน db และส่งคืนรหัสคำสั่งซื้อใหม่ |
โครงการดั้งเดิมของ Adam Freeman ใช้ json-server บนเซิร์ฟเวอร์ด่วนเป็นบริการจำลอง API ฉันเก็บข้อมูลจำเพาะอินพุต/เอาต์พุตของบริการเพื่อการสาธิต ตอนนี้เช่นตัวอย่างดั้งเดิมทั้งหมดแอปจะอ่านรายการผลิตภัณฑ์และเขียนข้อมูลการสั่งซื้อเท่านั้น แพ็คเกจ Axios ที่ใช้ในตัวอย่างดั้งเดิมจะถูกแทนที่ด้วย fetch
Sveltekit ยังมีคุณสมบัติในการสร้าง "Backend 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เขียนรายการและปริมาณที่สั่งซื้อ บริการจะสร้างรหัสคำสั่งซื้อใหม่และเชื่อมโยงกับผลิตภัณฑ์ที่สั่งซื้อ
ตัวอย่างการร้องขอร่างกาย:
{
"lines" : [
{
"productId" : 1 ,
"productName" : " Kayak " ,
"quantity" : 2
},
{
"productId" : 2 ,
"productName" : " Lifejacket " ,
"quantity" : 4
}
]
}ตัวอย่างร่างกายตอบสนอง:
{
"id" : 42
} ฐานข้อมูล SQLite ( ./db/data.sqlite3 ) ใน repo นี้มี products ตารางที่มีบันทึกผลิตภัณฑ์ 9 รายการ (ซึ่งสามารถพบได้ในหนังสือของ 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
