svelteapp typescript go
1.0.0
Это простое приложение для демонстрации покупок, основанное на тех же примерах Angular/React/Vue.js в Essential Typescript от Adam Freeman:
/src )/backend )/db )Проект поставляется с DockerFile, который может создавать один небольшой контейнер с многоэтапными сборками (размер изображения ~ 25 МБ), а также поддержку, которая будет открыта в DevContainer/Codesse.
Рабочий процесс действия GitHub создан для запуска тестирования сборки для Deventabot для обновлений зависимостей.
Целью проекта является демонстрация по созданию небольшого и автономного монолитного монолитного приложения с современными рамками, но не для того, чтобы быть практическим шаблоном для каких-либо реальных приложений. Например, обработки ошибок между фронтальным и аутентификацией в основном игнорируются.
Подобная версия с использованием 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, похожих на Restful:
| API | Функция |
|---|---|
Получить /api/products | Запрос DB и возврат данные продукта |
Post /api/orders | Написать данные заказа в DB и вернуть новый идентификатор заказа |
Оригинальные проекты Адама Фримена используют json-server на экспресс-сервере в качестве Mock API Services. Я сохраняю спецификацию ввода/вывода Сервисов ради демонстрации. Прямо сейчас, как и все исходные примеры, приложение читает только списки продуктов и данные заказа. Пакет 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Напишите упорядоченный элемент и количество. Сервис создаст новый идентификатор заказа и связывает его с заказанными продуктами.
Пример запроса тела:
{
"lines" : [
{
"productId" : 1 ,
"productName" : " Kayak " ,
"quantity" : 2
},
{
"productId" : 2 ,
"productName" : " Lifejacket " ,
"quantity" : 4
}
]
}Пример ответа тела:
{
"id" : 42
} База данных SQLite ( ./db/data.sqlite3 ) в этом репо уже содержит products с 9 записями продукта (которые можно найти во многих книгах Адама Фримена) и пустые 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 и добавить
mingw64binto$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 .
