Прежде чем мы перейдем к содержанию, я знаю, о чем вы думаете; зачем использовать JavaScript и Client API для выполнения операций CRUD?
CRUD — создавать, читать, обновлять и удалять.
Независимо от того, являетесь ли вы частью сообщества разработчиков или просто живете, мы все должны помнить, что нужно продолжать учиться. Пробуйте что-то новое, совершайте ошибки, учитесь на них и узнайте, что обучение — это радостное занятие. Так почему бы не попробовать вместе попробовать что-то новое?
Так что расслабьтесь, расслабьтесь и наслаждайтесь блогом.
CRUD-операция
- Обычно операции CRUD могут выполняться в Mendix на уровне страницы, а также в микропотоках и нанопотоках.
- Здесь я использую код Client API для создания нового виджета, где мы сталкиваемся с одним блоком, который мы не можем изменить.
- Но здесь мы используем действие JavaScript для выполнения этой операции CRUD.
JavaScript может быть полезен во многих сценариях, но в Mendix наиболее полезно создавать виджеты и добавлять пользовательские действия JavaScript.
Действия JavaScript
С помощью действий JavaScript вы можете расширить функциональность своего приложения так, как не могут одни только нанопотоки. Чтобы использовать действие JavaScript, вам нужно вызвать его из нанопотока с помощью вызова действия JavaScript. Каждое действие JavaScript определяется в Mendix Studio Pro и соответствует файлу {имя действия JavaScript}.
Клиентский API
Клиентский API — это мощный API для взаимодействия со средой выполнения Mendix в действиях JavaScript (не рекомендуется для использования в виджетах). Здесь мы просто создаем объект, используя клиентский API.
Давайте войдем в код, чтобы выполнить это.
Создать объект довольно просто, но переход на новую страницу редактирования считается объектом. Затем, используя JavaScript и клиентские API, мы создадим новую сущность.
- Создать сущность в модели предметной области; назовите его как хотите и создайте для него обзорную страницу.
2. Щелкните правой кнопкой мыши модуль в обозревателе приложений, выберите Создать действие JavaScript и назовите его соответствующим образом.
3. Откройте действие и создайте параметр типа с именем, основанным на вашей сущности.
Добавьте тот же параметр в общую вкладку, как на изображении
4. На вкладке «Общие» параметр, который вы создаете, должен быть сущностью, а тип возвращаемого значения должен быть «Объект», как показано на изображении ниже.
5. Перейдите на обзорную страницу с кнопкой выбора и измените действие по щелчку, чтобы вызвать нанопоток. Создайте нанопоток с правильными соглашениями об именах.
Действие call JavaScript работает только в нанопотоках.
6. Снова перейдите к действию JavaScript, там будет вкладка с названием код, щелкните вкладку кода. Здесь мы добавим наш код для создания объекта.
Важно помнить, что вы должны писать свой код между начальным и конечным блоками кода, иначе ваши изменения будут перезаписаны во время компиляции.
7. Перейдите к документации клиентского API и прокрутите вниз, чтобы щелкнуть данные.
- Оттуда вы можете увидеть код клиентского API. Просмотрите документы и прокрутите вниз к центру, пока не найдете mx.create. Мы можем использовать этот код как есть, вам просто нужно изменить его на основе имен вашей сущности и атрибутов.
mx.data.create({
entity: “MyFirstModule.Cat”,
callback: function(obj) {
console.log(“Object created on server”);
},
error: function(e) {
console.error(“Could not commit object:”, e);
}
});
Вы можете просто скопировать код действия JavaScript и сохранить действие.
8. Теперь перейдите к нанопотоку, который вы создали для кнопки на странице обзора. Разместите действие и вызовите действие JavaScript для этого действия. Затем используйте создать объект и показать активность страницы, потому что вы собираетесь создать объект на новой странице редактирования. В итоге нанопоток «создать объект» будет выглядеть так.
9. Теперь запустите приложение и посмотрите, работает ли код. Обратите внимание, что когда вы переходите на новую страницу редактирования, ее нельзя редактировать, и кажется, что вы не можете создать объект.
10. Нам нужно вернуться к действию JavaScript, где вы видите только объектный код создания клиентского API. Ниже вы можете обернуть клиентский API Mendix в промис. Вам нужно написать код, чтобы сделать эту новую страницу редактирования доступной для редактирования. Это называется обещанием API.
- Мы собираемся использовать этот код, потому что вы можете динамически устанавливать атрибуты вместо статических, чтобы создать объект на новой странице редактирования.
Здесь я приложил пример кода обещания API из документации Mendix для создания объекта. Скопируйте код и вставьте его под кодом API клиента.
Ссылка на Пример кода Promise API
11. Вы можете сохранить изменения в проекте и снова запустить приложение. Если все было сделано правильно, теперь вы можете редактировать объект на странице.
Поздравляем! Вы успешно создали объект с помощью JavaScript и клиентского API Mendix.
Чтобы выполнять обновления и удаления объектов, нам нужно повторить процесс, аналогичный тому, как мы обрабатывали создание объектов.
· Снова перейдите к коду клиентского API в документации Mendix, найдите обновление и удалите его. Скопируйте код и вставьте его в действия JavaScript.
Чтобы обновить объект с помощью клиентского API (код для обновления объекта)
// BEGIN USER CODE
mx.data.update({
entity: “MyFirstModule.Office”,
callback: function(obj) {
console.log(“Object created on server”);
},
error: function(e) {
console.error(“Could not commit object:”, e);
}
});
// END-USER CODE
}
Под изображением находится объект редактирования nanoflow для справки.
Чтобы удалить объект с помощью Client API (Код для удаления объекта)
mx.data.remove({
entity: “MyFirstModule.Office”,
callback: function() {
console.log(“Objects removed”);
},
error: function(e) {
console.log(“Could not remove objects:”, e);
}
});
return new Promise((resolve, reject) => {
if ( ! objectToDelete ) {
resolve(false); // nothing to delete
return;
}
mx.data.remove({
guid: objectToDelete.getGuid(),
callback: function() {
console.trace(“Object removed”);
resolve(true);
},
error: function(e) {
reject(e);
}
});
});
- Удалите объект nanoflow для справки.
Заключение
Теперь вы можете создавать, обновлять и удалять объекты с помощью этих методов. Хотя взаимодействие с подобными данными в приложении Mendix может показаться необычным, теперь вы можете реализовывать и пробовать различные действия JavaScript в зависимости от ваших потребностей и взаимодействовать с данными в вашей модели напрямую с помощью JavaScript — полезный навык в вашем наборе инструментов.
Я надеюсь, что вы нашли это интересным и полезным, пожалуйста, не стесняйтесь задавать любые вопросы в комментариях здесь.
Увидимся в следующей статье — Пока!!!
Читать далее
От издателя —
Если вам понравилась эта статья, вы можете найти больше похожих на нашей Medium странице. Для просмотра отличных видео и прямых трансляций вы можете посетить MxLive или наше сообщество Страница YouTubee.
Для создателей, желающих начать работу, вы можете зарегистрировать бесплатную учетную запись и получить мгновенный доступ к обучению в нашей Академии.
Заинтересованы в более активном участии в нашем сообществе? Присоединяйтесь к нам в нашем Канале сообщества Slack.
