javascript — Как бы я взаимодействовал с моим API, используя html node.js, например (чтобы можно было отображать данные в таблице или обновлять данные со стороны пользователя)

1. Получение данных

Самый простой подход — динамически извлекать данные, используя Fetch API , отображая их в вашем представлении и используя дополнительные запросы для соединения с вашим HTTP-сервером для обновления с любыми внесенными вами изменениями.

Пример:

 // Fetching data from some generic API fetch('https://jsonplaceholder.typicode.com/users') .then( res ={amp}gt; res.json() ) // Parses body into JSON .then( userList ={amp}gt; { // Selecting our table element let table = document.querySelector('#t1 tbody'); // For each user received, add his data on table userList.forEach( user ={amp}gt; { let rowElement = document.createElement('tr'), idElement = document.createElement('td'), nameElement = document.createElement('td') emailElement = document.createElement('td'); idElement.innerText = user.id; nameElement.innerText = user.name; emailElement.innerText = user.email; rowElement.appendChild(idElement); rowElement.appendChild(nameElement); rowElement.appendChild(emailElement); table.appendChild(rowElement); }); }) 
 {amp}lt;table id="t1" border="1"{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;ID{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Name{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Email{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt; {amp}lt;/tbody{amp}gt; {amp}lt;/table{amp}gt; - {amp}lt;table id="t1" border="1"{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;tr{amp}gt; {amp}lt;th{amp}gt;ID{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Name{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Email{amp}lt;/th{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt; {amp}lt;/tbody{amp}gt; {amp}lt;/table{amp}gt; 

Обновление информации немного проще, я рекомендую взглянуть на ссылку Fetch API выше, у них есть примеры выполнения HTTP-запросов для отправки данных методом POST.

Obs¹: Если важна совместимость, взгляните на AJAX, чтобы добиться подобных результатов, но с большими усилиями

Obs²: Вы должны изучить изучение внешней среды JavaScript или использование библиотеки, чтобы упростить манипулирование DOM (вставка / удаление / обновление / доступ к элементам HTML).

3. Визуализация представления шаблона

Этот подход заключается в использовании на вашем HTTP-сервере некоторого механизма шаблонов для рендеринга до того, как вы предоставите свой HTML (или любой другой формат механизма шаблонов, например, Pug ), но после извлечения данных из вашей базы данных.

Вот пример использования Node.js Express и Pug

Obs¹: Вы можете сделать это «вручную», не используя движки шаблонов, но это значительно увеличит объем работы для достижения этого.

Obs²: Как правило, в API это не является необходимым, поскольку ответственность за визуализацию представления находится где-то еще.

2. WebSockets

Совершенно излишнее, вам, безусловно, это не нужно (поскольку вы создаете API, а для этого потребуется реализовать сервер Web Socket), но в любом случае это так.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector