svelteapp typescript go
1.0.0
이것은 Adam Freeman의 Essential TypeScript 의 동일한 각도/react/vue.js 예제를 기반으로 간단한 쇼핑 데모 앱입니다.
/src )/backend )/db )이 프로젝트에는 다단계 빌드 (이미지 크기 ~ 25MB)가있는 단일 소형 컨테이너를 만들 수 있으며 DevContainer/Codespace에서도 개설 할 수있는 Dockerfile이 함께 제공됩니다.
GitHub 액션 워크 플로우는 종속성 업데이트를위한 Dependabot의 Pull-Requests에 대한 빌드 테스트를 실행하기 위해 작성되었습니다.
프로젝트의 목적은 현대적인 프레임 워크를 갖춘 작고 자 급식 전체 스택 모 놀리 식 응용 프로그램을 구축하는 데모이지만 실제 응용 프로그램을위한 실용적인 템플릿은 아닙니다. 예를 들어, 프론트 엔드와 인증 간의 오류 처리는 대부분 무시됩니다.
vue.js, Express, MongoDB 및 Docker Compose를 사용하는 유사한 버전은 여기에서 찾을 수 있습니다 (더 이상 유지되지 않음).
Svelte 앱에는 다음 경로가 있습니다.
| 노선 | 페이지 |
|---|---|
/ | 색인 ( /products 으로 리디렉션) |
/products | 장바구니에 제품을 찾아서 추가하십시오 |
/order | 보기 및 체크 아웃 주문 |
/summary/{id} | 주문 결과 |
/ 에서 열리면 즉시 /products 으로 리디렉션됩니다./products API 서비스에서 제품 목록을로드하고 범주 및 항목을 표시합니다.Add To Cart 클릭하면 CART (Global State Array orderLines )에 추가됩니다./products 에서 Submit Order 클릭하면 앱이 /order 으로 리디렉션되면 WHCIH는 주문의 세부 사항을 표시합니다.Submit Order /order 클릭하면 앱은 주문을 API 서비스로 보내고 주문 ID를 얻습니다./summary/[id] 로 리디렉션됩니다. 백엔드는 두 개의 편안한 API를 만듭니다.
| API | 기능 |
|---|---|
/api/products 얻습니다 | 쿼리 DB 및 제품 데이터를 반환합니다 |
Post /api/orders | 주문 데이터를 DB에 쓰고 새 주문 ID를 반환합니다. |
Adam Freeman의 원래 프로젝트는 Express 서버에서 Mock API 서비스로 json-server 사용합니다. 시연을 위해 서비스의 입력/출력 사양을 유지합니다. 현재 모든 원본 예제와 마찬가지로 앱은 제품 목록 만 읽고 주문 데이터를 작성합니다. 원래 예제에 사용 된 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
} 이 repo의 sqlite 데이터베이스 ( ./db/data.sqlite3 )에는 이미 9 개의 제품 레코드 (많은 Adam Freeman의 책에서 찾을 수 있음)와 빈 테이블 orders 포함 된 테이블 products 포함되어 있습니다. SQLITE에 DB 브라우저를 사용하여 데이터베이스를 읽을 수 있습니다. 데이터베이스를 복원 해야하는 경우 백업 파일도 있습니다.
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에 추가 한 다음 코드를 다시 시작)로 설치할 수 있습니다. 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 에서 열립니다.
