ОБНОВЛЕНИЕ: этот учебник устарел. Новые документы SvelteKit.
В этой статье мы собираемся создать веб-приложение, используя SvelteKit и MongoDB.
Вам понадобится Node.js (версия 16), чтобы следовать этому руководству.
Шаг 1. Создайте базу данных MongoDB.
Для начала мы создадим базу данных MongoDB с помощью MongoDB Atlas. Если у вас уже есть база данных, вы можете пропустить этот шаг.
В этом руководстве мы будем использовать MongoDB бесплатного уровня. Сначала зайдите на сайт MongoDB Atlas и войдите в систему. Вам нужно будет создать организацию в MongoDB Atlas.
Создав организацию, вы создадите проект внутри своей организации.
Далее вы создадите базу данных в своем проекте.
- Выберите Общийкластер
- В качестве платформы для развертывания выберите AWS/Google Cloud/Azure.
- Выберите регион для своей базы данных
- Выберите песочницу M0 для своего уровня кластера.
- Выберите имя кластера, например «dev-cluster».
После того, как вы создали свой кластер, вам нужно будет пройти некоторые настройки безопасности. Для этого руководства выберите аутентификацию по имени пользователя и паролю. Выберите имя пользователя и пароль и сохраните их где-нибудь.
Выберите «Моя локальная среда» в качестве типа подключения. В списке доступа IP-адресов введите свой общедоступный IP-адрес или добавьте каждый IP-адрес в белый список, введя 0.0.0.0/0.
Создание вашей базы данных займет некоторое время. Когда он будет доступен, перейдите в свои коллекции.
Создадим базу автосалонов.
Создайте несколько документов, нажав кнопку «Вставить документ».
Чтобы подключиться к вашей новой базе данных, вам понадобится URI. Вернитесь на страницу обзора и нажмите «Подключиться».
Выберите «Подключить ваше приложение» и скопируйте полученный URI. Замените имя пользователя и пароль на созданные вами. Сохраните этот URI.
Шаг 2. Создайте приложение svelte-kit
Мы создадим простое приложение svelte-kit, используя npm. В терминале введите:
npm create svelte@latest my-app
Эта команда проведет вас через настройку вашего приложения svelte-kit. Для этого урока мы выбираем следующие параметры:
Возможно, вам потребуется запустить npm install или yarn, чтобы установить зависимости. Используйте yarn dev для запуска сервера разработки.
В основной маршрут (src/routes/index.svelte) мы добавим ссылку на просмотр автомобилей в нашем автосалоне.
<!-- src/routes/index.svelte --> <section> <a href="/cars">Browse cars</a> </section>
Эта ссылка приведет нас на страницу /cars, которая пока должна показывать страницу с ошибкой 404.
Чтобы определить новый маршрут, создайте файл .svelte в каталоге src/routes. Мы добавим файл cars.svelte.
Добавьте что-нибудь к новому cars.svelte, и оно будет отображаться при нажатии на ссылку на главной странице.
<!-- src/routes/cars.svelte --> <h1>Select a car</h1>
Затем мы подключимся к нашей базе данных MongoDB и получим список автомобилей в коллекции cars.
Шаг 3: Подключитесь к MongoDB из svelte-kit
Соединение с базой данных будет создано и сохранено на сервере. Соединение будет повторно использоваться для нескольких запросов и клиентов. Данные будут отображаться с использованием SSR на странице /cars.
Сначала установите клиент MongoDB для Node.js:
yarn add mongodb or npm install mongodb
Чтобы создать подключение к базе данных, создайте новый файл с именем src/lib/db.ts и добавьте следующий код:
import { MongoClient } from "mongodb"
import { DB_URI } from '$env/static/private';
const client = new MongoClient(DB_URI)
await client.connect()
export default client.db('dealership') // select database
Вам нужно будет добавить URI вашей базы данных в вашу среду, создав файл .env в корневом каталоге проекта.
DB_URI=mongodb+srv:// <username>:<password>@<yourcluster>.<yourid>.mongodb.net/?retryWrites=true&w=majority
Шаг 4. Получите коллекцию автомобилей при загрузке страницы.
В файле cars.svelte добавьте следующий код для отображения списка автомобилей, полученных из базы данных:
<script lang="ts">
export let cars: any[]
</script>
<h1>Select a car</h1>
<ul>
{#each cars as car}
<li>
<h3>{car.brand}</h3>
<p>{car.mileage}</p>
</li>
{/each}
</ul>
Это должно привести к сбою вашего сервера разработки, потому что серверная поддержка cars еще не определена.
Чтобы получить данные для маршрута, создайте файл с тем же именем, что и у маршрута, но с расширением .ts. В нашем случае мы создадим файл cars.ts.
В файле cars.ts мы можем определить API для ресурса cars. Мы создадим только запрос GET, который сообщит svelte-kit, какие данные следует извлекать вместе с загрузкой страницы.
Добавьте следующий код в файл cars.ts:
import db from "$lib/db"
export async function GET() {
const cars = await db.collection('cars').find().toArray()
return {
status: 200,
body: { cars }
}
}
При такой настройке svelte-kit сначала извлечет данные из MongoDB, а затем загрузит страницу с данными, вставленными в качестве поддержки на стороне сервера.
Откройте localhost:5173/cars, и вы должны увидеть список документов, которые вы вставили в свою базу данных:
Точно так же вы можете создать функцию POST, которая будет добавлять документы в вашу базу данных.
Чтобы узнать больше о svelte-kit и его удивительных функциях, посетите их подробную документацию.