• Главная
    • /
  • Блог
    • /
  • Drupal 8 REST / JSON - интеграция с приложением JavaScript

Drupal 8 REST / JSON - интеграция с приложением JavaScript

  1. 1. Сначала мы устанавливаем Drupal 8 и включаем наши модули:
  2. 2. Затем мы загружаем и включаем модуль REST UI (этот шаг не обязателен, но полезен).
  3. 3. Конфигурация с использованием REST UI - отображение узла в формате JSON.
  4. 4. Давайте теперь создадим наш узел.
  5. 5. Список узлов в JSON
  6. 6. Собственный адрес для REST / JSON (конечная точка)
  7. маршрутизация
  8. контроллер
  9. 7. Получение JSON
  10. Резюме

За последние годы веб-сайты претерпели значительные изменения. Было создано много новых сервисов и веб-сайтов социальных сетей, в настоящее время мобильные приложения играют очень важную роль в Интернете, и различные онлайновые сервисы для обмена данными уже не являются чем-то необычным. Можно даже сказать, что интеграция с внешними сервисами в настоящее время является стандартной, особенно в случае крупных приложений электронной коммерции или систем онлайн-платежей.
Здесь мы можем задать себе вопрос: можем ли мы общаться с внешними сервисами, используя Drupal? Конечно, мы можем. Эта функциональность была доступна в старых версиях Drupal, но в Drupal 8 модуль API RESTful Web Services начал включаться по умолчанию в ядро ​​Drupal, что показывает, что это важный и крайне необходимый элемент в сложных онлайн-приложениях.

Сегодня мы поговорим об одном из самых популярных форматов обмена данными - JSON.

В нашем примере мы собираемся использовать Drupal 8.2 ^ и jQuery для написания простого приложения JavaScript. Мы собираемся использовать Drupal как наша CMS для управления данными, а наш контент будет отображаться на «легком» HTML-сайте.

1. Сначала мы устанавливаем Drupal 8 и включаем наши модули:

  • API-интерфейс RESTful Web Services впервые появился в Drupal 8
  • Сериализация

2. Затем мы загружаем и включаем модуль REST UI (этот шаг не обязателен, но полезен).

https://www.drupal.org/project/restui
Этот модуль позволяет пользователю управлять доступом и форматом данных через пользовательский интерфейс (панель администрирования). Работает с Drupal 8.2 или новее.

3. Конфигурация с использованием REST UI - отображение узла в формате JSON.

Теперь мы собираемся адаптировать наш тип контента для интеграции. В нашем примере мы будем использовать сущность NODE. Перейдите в / admin / config / services / rest. Выберите «тип контента» и установите формат json, auth cookie в методе GET. В этом случае мы собираемся загружать только данные, поэтому метод GET будет в порядке.

Если вы решите не устанавливать модуль REST UI, вам придется вручную ввести настройки для всех сущностей в конфигурационные файлы. Вышеуказанные настройки выглядят следующим образом:
Имя файла: rest.resource.entity.node.yml

uuid: add2fdec-b11f-45ad-a74f-3d30e36ad72f langcode: en статус: true зависимости: модуль: - узел - сериализация - идентификатор пользователя: entity.node plugin_id: грануляция «entity: node»: конфигурация метода: GET: поддерживаемые форматы: - json support_auth: - cookie

4. Давайте теперь создадим наш узел.

Предполагая, что наш новый узел расположен в http://www.drupal8.dev/node/1
мы должны добавить параметр? _format = json, который дает нам следующий адрес: domain.example / node / 1? _format = json

Если все настроено правильно, теперь у нас должен быть объект узла в формате JSON. Если вы отображаете содержимое JSON в своем браузере, вы можете установить надстройку или расширение для форматирования кода JSON (на скриншоте вы видите JSON Lite org/en-US/firefox/addon/json-lite/?src=api> https://addons.mozilla.org/en-US/firefox/addon/json-lite/?src=api )

5. Список узлов в JSON

Итак, загрузка отдельных узлов уже работает. Давайте теперь попробуем получить список узлов.
Мы собираемся использовать модуль Views.

При условии, что мы не собираемся использовать большинство доступных данных, мы можем выбрать только те поля, которые нас интересуют, чтобы уменьшить объем передаваемых данных.

Подводя итог: мы создали список контента, расположенный в / node_list, и, добавив? = _ Format = json к нашему URL, мы можем скачать любой из них в формате JSON.

6. Собственный адрес для REST / JSON (конечная точка)

Если - по какой-либо причине - вышеуказанных решений недостаточно, мы можем создать собственную конечную точку и добавить новые данные в наш JSON.
Давайте создадим маршрутизацию и контроллер.

маршрутизация

Во-первых, давайте начнем с создания маршрутизации, например, / v1 / custom_endpoint. Ввод нашей версии API в URL, безусловно, является хорошей практикой, поскольку при создании более новой версии мы можем оставить ее в / v2 / custom_endpoint, / v3 / ... и т. Д. Таким образом, наши пользователи, использующие более старую версию API, выиграли ' оторваться от наших ресурсов.
Пример маршрутизации:

ev_client_endpoint: путь: '/ v1 / custom_endpoint' методы: [GET] значения по умолчанию: _controller: 'Drupal \ ev_client_endpoint \ Controller \ EvEndpoint :: get' требования: _permission: 'access content'

Объяснение: запрашивая GET в / v1 / custom_endpoint, мы получим данные, возвращаемые контроллером EvEndpoint, выполняющим метод GET.

контроллер

В этом примере мы предполагаем, что наша конечная точка должна возвращать основную информацию о нашем веб-сайте - имя и адрес электронной почты, текущую метку времени и случайный узел с идентификатором от 1 до 10.

<? php namespace Drupal \ ev_client_endpoint \ Controller; использовать Drupal \ Core \ Controller \ ControllerBase; использовать Drupal \ node \ Entity \ Node; использовать Symfony \ Component \ HttpFoundation \ JsonResponse; / ** * Пример контроллера. * / class EvEndpoint extends ControllerBase {/ ** * {@inheritdoc} * / public function get () {$ response = new JsonResponse (); $ config = \ Drupal :: config ('system.site'); $ node = Node :: load (random_int (1,10)); $ data = array ('date' => time (), 'site_name' => $ config-> get ('name'), 'site_email' => $ config-> get ('mail'), 'random_node' = > массив ('title' => $ node-> get ('title') -> getValue () [0] ['value'], 'body' => $ node-> get ('body') -> getValue () [0] ['value'],)); $ Response-> УстановитьДанные ($ данных); вернуть $ response; }}

Сделав все правильно, мы можем очистить наш кеш и перейти в / v1 / custom_endpoint. Конечный результат должен быть следующим.

{"Date": 1481920261, "site_name": "сайт настраиваемой конечной точки", "site_email": " [электронная почта защищена] "," random_node ": {" title ":" title title 5 "," body ":" body node 5 "}}

7. Получение JSON

Давайте теперь создадим простой JavaScript для отображения наших данных на сайте.
Если мы собираемся подключиться с доменов, отличных от нашего Drupal , https://www.drupal.org/project/cors добавление заголовков к запросам или создание виртуального прокси может быть полезным, чтобы все запросы рассматривались как локальные (более подробную информацию можно найти на https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS )

Код html index.html

<! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> Title </ title> <script src = "https://ajax.googleapis.com/ajax /libs/jquery/3.1.1/jquery.min.js "> </ script> <script src =" app.js "> </ script> </ head> <body> </ body> </ html>

Теперь мы можем добавить наш файл app.js и библиотеку jQuery в разделе Head.
Скрипт app.js

$ (document) .ready (function () {$ .ajax ({type: 'GET', url: 'http://drupal8.dev/v1/custom_endpoint', success: function (data) {{var date = new Дата (data.date * 1000); $ ('body'). Append ('' + '<h1 class = "name">' + data.random_node.title + '</ h1>' + '<content class = "body"> '+ data.random_node.body +' </ content> '+' <email class = "mail"> '+ data.site_email +' </ email> '+' <div class = "date"> '+ date +' </ div> '+' <h2 class = "email"> '+ data.site_name +' </ h2> ');}}});});

Загрузите JSON с нашего Drupal: / v1 / custom_endpoint

Переменная data содержит наш json, теперь мы можем добавить его с нашими переменными в тело HTML, используя функцию добавления.

Если все было сделано правильно, после отображения index.html в нашем браузере, JavaScript запрашивает данные из нашего Drupal и загружает его в формате JSON, а затем добавляет их в тело нашего сайта.

Резюме

Вот некоторые основные сведения о том, как начать приключение с веб-сервисами с использованием Drupal. В следующей части мы собираемся написать о входе в Drupal с использованием существующей учетной записи пользователя, а также о добавлении и редактировании контента через REST / JSON.
Если вы хотите расширить свои знания о D8 и других инструментах, полезных для разработки веб-приложений, напишите нам facebook , где мы делимся нашими учебниками, руководствами и различными интересными материалами из отрасли. Вы также можете принять участие в Drupal Day и Drupal Camp! Новый контент также скоро появится в нашем блоге!

Здесь мы можем задать себе вопрос: можем ли мы общаться с внешними сервисами, используя Drupal?
Example / node / 1?
Org/en-US/firefox/addon/json-lite/?
Подводя итог: мы создали список контента, расположенный в / node_list, и, добавив?
Lt;?