Вчера мы создали наш первый сервис, используя фреймворк Services, и, сколько бы радости мы ни получали от отцовских шуток, которые он возвращал, во всем этом было что-то гораздо менее забавное: оно было статичным 😱. У нас был один URL-адрес, по которому мы звонили, и это так. Ни путей, ни заголовков по запросу, ни параметров запроса - ничего. Что ж, сегодня мы собираемся все это изменить! Мы собираемся создать идеальный виджет отцовских шуток, который позволит вам не только отображать случайную отцовскую шутку (как мы это делали вчера), но и искать отцовскую шутку по определенному запросу 🤓
В поисках идеальной отцовской шутки
Icanhazdadjoke.com позволяет нам искать отцовскую шутку, используя конечную точку поиска: https://icanhazdadjoke.com/search и параметр запроса: term
для поискового запроса. Давайте расширим сущность Services Framework, которую мы создали вчера, чтобы иметь возможность обрабатывать новый /Magic-Search
маршрут.
- Откройте
Magic.js
контроллер, который мы создали вчера, в вашей среде IDE. - Под функцией дескриптора
Show
добавьте следующую функцию:
Давайте рассмотрим, что у нас есть:
Строка 3: задает magicSearch
в качестве шаблона, который будет отображать контроллер (мы создадим его в следующем разделе).
Строка 4: получает параметр запроса term
из объекта querystring
объекта req
. Этот объект querystring
содержит все параметры запроса, переданные контроллеру SFRA, и к каждому параметру запроса можно получить доступ, указав его имя.
Строка 6: метод getURL()
возвращает URL-адрес, указанный в учетных данных объекта Services Framework. Мы можем использовать результат этого метода, чтобы добавить любой путь, который мы желаем для службы, и в нашем случае путь search
.
Строка 7: в этой строке представлены два новых метода: setURL()
и addParam()
:
* setURL()
используется для установки URL-адреса для вызова службы, заменяя статический URL-адрес, определенный в учетных данных объекта Services Framework. Если объект не использует никаких учетных данных, setURL()
определит URL-адрес, который будет вызывать служба.
* addParams()
используется для добавления параметров к сервисному вызову. Если ваша служба использует метод GET
, параметры будут добавлены как параметры запроса. Если ваша служба использует метод _18 _ / _ 19_, параметры будут добавлены как параметры тела.
В нашей реализации мы используем setURL()
, чтобы установить вызов службы для URL-адреса, который мы создали в строке 6, и addParams()
, чтобы добавить параметр term
, необходимый для конечной точки поиска icanhazdadjoke.com.
Наконец, мы используем метод call
объекта service
для фактического вызова службы icanhazdadjoke.com и сохранения результата с переменной svcResult
.
Строки 8–11: если вызов службы был успешным, свойство svcResult
object
будет содержать ответ JSON от службы. Этот ответ JSON содержит свойство results
, которое содержит массив объектов-шуток. Мы сохраним results
в новом свойстве нашего properties
объекта с именем jokes
, а поисковый запрос - в новое свойство с именем term
.
Строка 13: вызывает метод рендеринга объекта res
, передавая ему объект properties
, который мы создали в строке 2. Этот объект позже можно использовать в шаблоне ISML при его рендеринге.
Строка 14: вызывает метод next()
, переданный в качестве аргумента функции, которая вызывает следующее промежуточное ПО в цепочке.
Рендеринг смеха
Теперь, когда у нас за плечами новый обработчик маршрута, давайте создадим шаблон ISML, который он будет отображать:
- cd в папку
templates/default
нашего картриджа и создайте новый файл с именемmagicSearch.isml
. - Добавьте в новый шаблон следующее:
В большей части кода в этом шаблоне нет ничего нового, поэтому давайте сосредоточимся на самом интересном - цикле шуток:
Строки 14–17: эти строки вводят элемент isloop
. Этот элемент позволяет нам перебирать массив элементов, подобно другим итераторам JavaScript, таким как forEach
. Здесь мы просматриваем коллекцию шуток объекта pdict
(вернитесь и прочтите вчерашний пост, если вы не помните, что такое pdict
), называя каждую итерацию как jokeObject
(поскольку он содержит объект joke
, аналогичный тому, который мы видели вчера. ) и добавьте его свойство шутки как элемент li
в неупорядоченный список (элемент ul
) на странице.
Дикий 🌈
Чтобы протестировать наш новый маршрут и шаблон, нам нужно загрузить картридж обратно в SFCC. Об этом позаботится наша любимая команда npm run uploadCartridge
в корне папки с картриджами.
Чтобы проверить наш поисковый маршрут, используйте его базовый URL (должно быть что-то вроде https: //‹ имя экземпляра ›.demandware.net / on / Demandware.store / Sites-RefArch-Site / default / Magic-Search) и добавьте параметр запроса с именем term
со значением, которое вы хотите найти. Конечный результат выглядит так: https: //‹ имя экземпляра ›.demandware.net / on / demandware.store / Sites-RefArch-Site / default / Magic-Search? Term =‹ поисковый запрос ›.
Если все прошло хорошо, вы должны получить страницу, подобную этой:
На этом мы завершаем наше развлечение. Конечно, есть и другие свойства, которые вы можете использовать со своей службой, например .addHeader(name, value)
, чтобы добавить заголовок к запросу, или setRequestMethod(method)
, чтобы изменить метод HTTP (например ,POST
или PUT
), или даже использовать метод setOutFile(file)
, чтобы установить выходной файл для хранения ответ службы, однако, мы отложим работу с ними на потом.
Завтра нас повеселит очень важный аспект работы с картриджами - События (а именно событие onRequest
).
Как всегда, жду ваших комментариев здесь или в Твиттере 😎