Введение в SvelteKit

Svelte — это популярная среда JavaScript для создания веб-приложений. Он известен своей простотой и производительностью, поскольку компилирует компоненты в обычный JavaScript во время сборки, что приводит к небольшим размерам пакетов и быстрому времени загрузки.

SvelteKit — это следующая эволюция Svelte, предлагающая полнофункциональную платформу веб-разработки, которая включает в себя рендеринг на стороне сервера, маршрутизацию и шлюз API. Он позволяет разработчикам создавать многофункциональные, производительные веб-приложения, используя знакомый синтаксис и соглашения Svelte.

В этом руководстве мы рассмотрим, как настроить новый проект SvelteKit и создать простое приложение CRUD (создание, чтение, обновление, удаление).

Настройка проекта SvelteKit

Для начала на вашем компьютере должны быть установлены Node.js и SvelteKit CLI (интерфейс командной строки). Если у вас еще нет Node.js, вы можете скачать его с официального сайта (https://nodejs.org/).

После установки Node.js вы можете установить интерфейс командной строки SvelteKit, выполнив следующую команду:

npm install -g sveltekit

Установив интерфейс командной строки SvelteKit, теперь вы можете создать новый проект SvelteKit, используя следующую команду:

sveltekit init

Это создаст новый каталог с необходимыми файлами и зависимостями для проекта SvelteKit.

Создание простого CRUD-приложения

Теперь, когда у нас настроен проект SvelteKit, давайте создадим простое CRUD-приложение. Мы создадим список элементов, которые можно добавлять, редактировать и удалять.

Во-первых, давайте создадим компонент для отображения списка элементов. Создайте файл с именем List.svelte в каталоге src/routes со следующим содержимым:

<script>
  let items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];

  function removeItem(id) {
    items = items.filter(item => item.id !== id);
  }
</script>

<h1>Item List</h1>

<ul>
  {#each items as item}
    <li>
      {item.name}
      <button on:click={() => removeItem(item.id)}>Delete</button>
    </li>
  {/each}
</ul>

Этот компонент отображает список элементов и кнопку удаления для каждого элемента. Функция removeItem удаляет элемент из списка на основе его id.

Далее создадим компонент для добавления нового элемента в список. Создайте файл с именем AddItem.svelte в каталоге src/routes со следующим содержимым:

<script>
  let name = '';

  function addItem() {
    // Add code to add the item to the list
  }
</script>

<h1>Add Item</h1>

<label for="name">Name:</label>
<input id="name" type="text" bind:value={name} />

<button on:click={addItem}>Add</button>

Чтобы завершить функциональность CRUD, нам нужно добавить код для фактического добавления элемента в список при вызове функции addItem. Мы можем сделать это, отправив HTTP-запрос на внутренний сервер, который обрабатывает добавление элементов в базу данных.

Для создания внутреннего сервера мы можем использовать API-шлюз SvelteKit. Сначала создайте файл с именем items.js в каталоге src/api со следующим содержимым:

export async function create(request) {
  const { name } = request.body;

  // Add code to save the item to the database

  return { id: 123, name };
}

Эта функция обрабатывает запрос POST на создание нового элемента. Он извлекает name из тела запроса и сохраняет его в базе данных.

Далее нам нужно обновить функцию addItem для отправки запроса POST на внутренний сервер при нажатии кнопки. Замените функцию addItem в AddItem.svelte на следующую:

async function addItem() {
  const res = await fetch('/api/items', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name })
  });

  const item = await res.json();

  // Add code to update the list of items with the new item
}

Это отправляет запрос POST в конечную точку /api/items с name нового элемента в теле запроса. Затем он обновляет список элементов новым элементом, возвращенным с сервера.

Наконец, нам нужно обновить компонент List, чтобы отображать обновленный список элементов после добавления нового элемента. Мы можем сделать это, добавив функцию refresh в компонент, который получает обновленный список элементов с сервера и обновляет переменную items.

Обновите компонент List следующим образом:

<script>
  let items = [];

  async function refresh() {
    const res = await fetch('/api/items');
    items = await res.json();
  }

  function removeItem(id) {
    items = items.filter(item => item.id !== id);
  }
</script>

<h1>Item List</h1>

<button on:click={refresh}>Refresh</button>

<ul>
  {#each items as item}
    <li>
      {item.name}
      <button on:click={() => removeItem(item.id)}>Delete</button>
    </li>
  {/each}
</ul>

Выполнив эти шаги, вы должны получить работающее приложение CRUD, использующее SvelteKit. Вы можете попробовать добавлять, редактировать и удалять элементы из списка, чтобы увидеть функциональные возможности CRUD в действии.

SvelteKit — это мощная платформа для создания веб-приложений, а возможности рендеринга, маршрутизации и шлюза API на стороне сервера позволяют легко создавать многофункциональные и производительные приложения.