Как создать простое CRUD-приложение в Appsmith

Создание внутренних инструментов с нуля отнимает время, которого у вас нет. Вам нужна быстрая административная панель или интерфейс управления данными, а не трёхмесячный проект разработки. Appsmith позволяет подключить источник данных, перетащить виджеты и настроить операции создания, чтения, обновления и удаления (Create, Read, Update, Delete) менее чем за час.

Это руководство описывает стандартный рабочий процесс CRUD-приложения в Appsmith: подключение базы данных, отображение данных в виджете Table, обработку создания и обновления записей через формы и обновление данных после изменений.

Подключение источника данных

Начните с создания нового приложения в Appsmith. На левой боковой панели нажмите + рядом с Datasources и выберите тип вашей базы данных — PostgreSQL, MySQL или REST API.

Для SQL-баз данных введите учётные данные для подключения: хост, порт, имя базы данных, имя пользователя и пароль. Храните конфиденциальные значения в зашифрованной конфигурации источников данных Appsmith и настройках окружения, а не жёстко кодируйте их в запросах или виджетах. Запросы выполняются на стороне сервера, поэтому учётные данные никогда не попадают в браузер.

Полный список поддерживаемых баз данных и параметров конфигурации можно найти в официальной документации по источникам данных.

Протестируйте соединение перед сохранением. Если оно не удалось, проверьте правила брандмауэра, требования SSL и точность учётных данных.

Чтение данных с помощью запроса

Создайте первый запрос для получения записей. Нажмите + рядом с Queries/JS, выберите источник данных и напишите оператор SELECT:

SELECT id, name, email, created_at FROM users ORDER BY created_at DESC LIMIT 100;

Назовите этот запрос getUsers и запустите его, чтобы проверить ответ.

Для больших наборов данных реализуйте пагинацию на стороне сервера. Виджет Table в Appsmith поддерживает это нативно — вы будете передавать параметры смещения и лимита в запрос на основе состояния пагинации таблицы.

Отображение данных в виджете Table

Перетащите виджет Table на холст. В свойствах виджета установите свойство Table data на:

{{getUsers.data}}

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

Этот паттерн интеграции базы данных Appsmith — привязка запроса к виджету — формирует основу каждого low-code CRUD-интерфейса, который вы будете создавать. Полные параметры конфигурации виджета Table описаны в документации виджета Table.

Создание записей с помощью формы или модального окна

Добавьте виджет Button с надписью «Добавить новую запись» и установите его действие onClick на открытие модального окна. Внутри модального окна добавьте виджеты Input для каждого поля: nameInput, emailInput.

Создайте INSERT-запрос с именем createUser:

INSERT INTO users (name, email) VALUES ({{nameInput.text}}, {{emailInput.text}});

Привяжите кнопку отправки модального окна к запуску createUser. При успешном выполнении запустите getUsers.run() для обновления таблицы, затем закройте модальное окно.

Для валидации используйте встроенные свойства валидации виджета Input или напишите JSObject, который проверяет значения полей перед отправкой.

Обновление записей с использованием выбранных строк

Включите выбор строк в виджете Table. Когда пользователь нажимает на строку, Table1.selectedRow предоставляет данные этой записи.

Создайте UPDATE-запрос с именем updateUser:

UPDATE users
SET name = {{nameInput.text}}, email = {{emailInput.text}}
WHERE id = {{Table1.selectedRow.id}};

Вы можете повторно использовать то же модальное окно для редактирования, предварительно заполнив поля ввода значениями Table1.selectedRow.name в качестве значений по умолчанию. Переключайтесь между режимами «создание» и «редактирование», используя переменную JSObject.

После успешного выполнения обновления вызовите getUsers.run() для обновления отображения.

Удаление записей с подтверждением

Добавьте столбец Button в вашу таблицу для действий удаления. Установите тип столбца на Button и настройте onClick для выполнения DELETE-запроса:

DELETE FROM users WHERE id = {{Table1.triggeredRow.id}};

Обратите внимание на разницу: triggeredRow захватывает строку, в которой была нажата кнопка, в то время как selectedRow захватывает выделенную строку.

Включите Request confirmation before running в настройках запроса, чтобы предотвратить случайное удаление. При успешном выполнении обновите данные таблицы.

Рабочий процесс Table-Form в Appsmith

Паттерн, который вы создали — виджет Table, отображающий результаты запроса, форма или модальное окно для обработки ввода, параметризованные запросы для изменений и обновление данных при успехе — масштабируется на любой вариант использования CRUD. Этот рабочий процесс table-form в Appsmith применим независимо от того, управляете ли вы пользователями, инвентарём, заявками в поддержку или любыми другими записями.

Для production-приложений рассмотрите:

• Управление доступом на основе ролей: Appsmith поддерживает детальные разрешения на уровне приложения, страницы и источника данных
• Окружения и учётные данные: Безопасно храните пароли баз данных и API-ключи в средах разработки, тестирования и production
• Пакеты: Делитесь переиспользуемыми запросами и JSObjects между несколькими приложениями, используя Appsmith Packages
• Пагинация на стороне сервера: Необходима для таблиц с тысячами записей

Заключение

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

Отсюда расширьте приложение фильтрами поиска, дополнительными страницами или подключитесь к Appsmith Workflows для автоматизации backend-процессов. Low-code CRUD-интерфейс, который вы создали, служит основой для более сложных внутренних инструментов — без написания UI и слоя данных с нуля.

Часто задаваемые вопросы

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.