CRUD интерфейсы

CRUD (Create, Read, Update, Delete) — фундаментальный набор операций для работы с данными в веб-приложениях. В контексте Naive UI реализация CRUD-интерфейсов строится на сочетании визуальных компонентов библиотеки и реактивных возможностей Vue 3.

Организация структуры проекта

Для построения CRUD-интерфейса удобно разделять логику на три слоя:

  1. Компоненты интерфейса – визуальные элементы: таблицы, формы, кнопки.
  2. Сервис работы с данными – функции для получения, добавления, изменения и удаления данных (обычно через API).
  3. Состояние приложения – реактивные переменные или хранилища (например, Pinia или Vuex), которые управляют данными и их изменениями.

Работа с таблицами (n-data-table)

n-data-table — ключевой компонент для отображения списка записей. Основные возможности:

  • Колонки с динамическим содержимым – можно задавать render функцию для кастомного отображения данных.
  • Сортировка и фильтрация – через свойства sorter и filter.
  • Выбор строки – row-selection позволяет выбрать одну или несколько записей для операций Update или Delete.

Пример базовой настройки:

<n-data-table
  :columns="columns"
  :data="users"
  :row-key="user => user.id"
  :pagination="{ pageSize: 10 }"
/>

columns определяется как массив объектов с полями title, key, render для кастомизации вывода.

Формы для создания и редактирования (n-form, n-form-item)

Формы в Naive UI строятся с использованием n-form и n-form-item. Основные моменты:

  • Валидация данных через rules.
  • Динамическое управление состоянием формы через реактивные объекты ref или reactive.
  • Интеграция с модальными окнами (n-modal) для создания и редактирования записей.

Пример формы для создания пользователя:

<n-modal v-model:show="showModal" title="Создать пользователя">
  <n-form :model="form" :rules="rules">
    <n-form-item label="Имя" path="name">
      <n-input v-model:value="form.name" />
    </n-form-item>
    <n-form-item label="Email" path="email">
      <n-input v-model:value="form.email" />
    </n-form-item>
    <n-button @click="submitForm">Сохранить</n-button>
  </n-form>
</n-modal>

Реактивное управление данными

Использование Vue 3 реактивности позволяет мгновенно обновлять таблицу при добавлении, изменении или удалении записи:

const users = ref([]);

async function fetchUsers() {
  users.value = await api.getUsers();
}

async function addUser(user) {
  const newUser = await api.createUser(user);
  users.value.push(newUser);
}

async function updateUser(user) {
  const updated = await api.updateUser(user.id, user);
  const index = users.value.findIndex(u => u.id === user.id);
  if (index !== -1) users.value[index] = updated;
}

async function deleteUser(id) {
  await api.deleteUser(id);
  users.value = users.value.filter(u => u.id !== id);
}

Кнопки действий и иконки (n-button, n-icon)

Для CRUD-интерфейсов часто используются кнопки с иконками:

  • Создание: кнопка с плюсом (<n-icon>) открывает модальное окно формы.
  • Редактирование: кнопка рядом с каждой строкой таблицы открывает форму редактирования.
  • Удаление: кнопка запускает диалог подтверждения (n-popconfirm) перед удалением.
<n-popconfirm
  v-model:show="showConfirm"
  title="Вы уверены, что хотите удалить?"
  @positive-click="() => deleteUser(user.id)"
>
  <n-button text type="error">Удалить</n-button>
</n-popconfirm>

Удобства интерфейса

Naive UI предоставляет дополнительные компоненты, которые повышают UX:

  • n-notification для оповещений об успешных или неудачных операциях.
  • n-loading-bar для отображения прогресса запросов.
  • n-spin для отображения загрузки таблицы или формы.

Интеграция с пагинацией и фильтрацией

Пагинация и фильтры могут быть связаны с реактивным состоянием, что упрощает работу с большими массивами данных:

const page = ref(1);
const pageSize = ref(10);
const total = ref(0);

watch([page, pageSize], fetchUsers);

async function fetchUsers() {
  const response = await api.getUsers({ page: page.value, pageSize: pageSize.value });
  users.value = response.data;
  total.value = response.total;
}

n-data-table поддерживает встроенные механизмы сортировки и фильтрации, что позволяет минимизировать кастомную логику.

Логика комбинированных операций

Часто используется цепочка действий: выбор строки → открытие формы → обновление → уведомление и обновление таблицы.

function editUser(user) {
  form.value = { ...user };
  showModal.value = true;
}

async function submitForm() {
  if (form.value.id) {
    await updateUser(form.value);
    notification.success({ content: 'Пользователь обновлен' });
  } else {
    await addUser(form.value);
    notification.success({ content: 'Пользователь создан' });
  }
  showModal.value = false;
}

Это обеспечивает единообразие UX и упрощает поддержку интерфейса.

Итоговые рекомендации по архитектуре

  • Разделять визуальные компоненты и логику работы с данными.
  • Использовать реактивность Vue 3 для мгновенного обновления интерфейса.
  • Интегрировать модальные окна и уведомления для управления CRUD-операциями.
  • Использовать встроенные возможности n-data-table для сортировки, фильтрации и пагинации.
  • Минимизировать дублирование кода через универсальные функции работы с данными.

Такой подход позволяет построить масштабируемый и поддерживаемый CRUD-интерфейс с Naive UI, обеспечивая удобство как для пользователя, так и для разработчика.

Оглавление