Привет еще раз, мы встроили Vuetify в Netsuite, но для создания приложения требуется больше, потому что в какой-то момент потребуются данные из Netsuite или другой службы.
Поэтому возникает вопрос, какой HTTP-клиент может быть полезен и одновременно будет совместим с нашим приложением?
Ответ: Axios-HTTP, и согласно его веб-сайту
Axios – это HTTP-клиент на основе обещаний для
node.js
и браузера. Он изоморфен (= он может работать в браузере и на nodejs с одной и той же кодовой базой). На стороне сервера используется собственный модуль node.jshttp
, а на стороне клиента (браузера) — XMLHttpRequests.
Следовательно, в следующих абзацах я объясню, как использовать Axios-HTTP в нашем компоненте Vuetify. Давайте начнем
Изменение HTML-страницы
Мы будем использовать компонент таблицы данных. Поэтому мы возьмем шаблон HTML, который предоставляет Vuetify.
Компонент таблицы данных — Vuetify (vuetifyjs.com)
Изменение сценария логического компонента
Следующим шагом является дополнение нашего компонента data table необходимым сценарием; нам повезло, Vuetify предоставляет его. Таким образом, предыдущий код будет изменен, и он будет похож на этот.
Прежде чем продолжить, убедитесь, что компонент таблица данных работает в нашем Suitelet правильно. И не забудьте обновить файлы.
Хорошо, у нас все отлично, и пришло время подготовить наши запросы и ответы.
Изменение сценария Suitelet
Код в Suitelet работает. Тем не менее, мы будем его улучшать. Не стесняйтесь копировать и вставлять его. Я объясню это в немного.
Что мы наделали?
- Во-первых, был включен новый объект с именем
handler
, в котором мы определим функции запроса. - Затем для атрибута GET с именем
ui
была определена новая стрелочная функция, которая будет принимать ответ атрибута от объекта контекста. - Следующим было перемещение блока кода внутри функции точки входа
onRequest
в функцию стрелкиui
. - Затем мы должны будем получить транзакции заказа на продажу. Поэтому мы создали еще одну стрелочную функцию с атрибутом GET для выполнения поиска заказа на продажу.
- Кроме того, мы определили вспомогательную функцию под названием
setResponse
для указания кодировки ответов Suitelet. - Наконец, мы переписали тело функции входа
onRequest
. И, как вы можете заметить,handler
будет выполнять определенную функцию в зависимости от метода запроса и полученной операции в качестве параметра.
Время использовать Axios-HTTP
Теперь пришло время включить нашего главного героя Axios-HTTP. И мы будем следовать следующим шагам.
- Мы изменим шаблон HTML, чтобы создать элемент скрипта для ссылки на Axios CDN и включить клиент Axios-HTTP.
- Мы добавим новый элемент кнопки для выполнения запроса GET. И последнее, но не менее важное: мы определим новые свойства в таблице данных и компоненте кнопки для отображения загрузчика.
- Мы изменим атрибут данных, добавив две переменные и обработав загрузчики, и удалим элемент внутри массива salesOrders.
- В атрибуте
methods
мы определим функцию, которая будет выполняться кнопкой. И здесь Axios творит чудеса.
Как вы заметили, пользоваться Axios очень просто. Кроме того, они предоставляют несколько полезных примеров.
Мы почти на месте. Нам нужно обновить файлы в Netsuite, обновить наш Suitelet и посмотреть, как компонент таблицы данных отображает информацию о заказе на продажу.
Красивый!
Мы сделали это. Мы создали практический пример в Netsuite с использованием Vuetify и клиента Axios-HTTP. Теперь твоя очередь. Дайте мне знать, если вы планируете использовать их в своем следующем проекте Suitelet .
Надеюсь, вам понравилось читать эту статью. Увидимся на следующем.