REST API с Postgresql - как сделать простейший интерфейс веб-интерфейса

Question

У меня есть простой REST API, который работает, отправляя запросы в Postgresql DB.Как мне написать кнопку, чтобы onClick активировал функцию GET и показывал ее на веб-странице?Как это сделать с POST-запросами?Как связать файл app.js с index.html, чтобы он идентифицировал имена функций из app.js?Как сделать div, который будет принимать запросы POST?Нужны ли мне некоторые функции HTML для обработки запросов PUT и DELETE?

app.post('/tourists', async(req, res, err) => {

    let dbResult=[];
    for (let i=0;i<req.body.listofflightsbyid.length;i++) {
        try {
            let result = await callDB( "SELECT flights.id FROM flights WHERE flights.id = " + req.body.listofflightsbyid[i] );
            dbResult.push(result);
        }
        catch (err) {

            console.log("Flight with id " + req.body.listofflightsbyid[i] + " you want to add to list of flights does not exist");
            res.status(500);
            return res.send("Bad listofflightsbyid request, Flight with id " + req.body.listofflightsbyid[i] + " does not exist");

        }
    }

    console.log("Successfully fetched all records ", dbResult);
    res.status(200);
    return res.send(dbResult);
})

Answer 1

Здесь много вопросов!Скорее всего, вы получите лучшие ответы, если уделите время тому, чтобы разделить свои проблемы на отдельные, более конкретные вопросы и задать их снова.Но я подозреваю, что на большинство ваших вопросов уже есть ответы здесь, в StackOverflow.

Привязка событий

Предполагается, что вы используете vanilla JavaScript (без внешних библиотек, фреймворков и т. Д.), И предполагаете, чтогде-то есть элемент <button> и функция с именем myFunction, вы можете привязать свою функцию к событию нажатия кнопки двумя способами.

Вы можете привязать события в строке:

button.html

<button onclick="myFunction()">Click</button>

Или вы можете связать события программно:

button.html

<button id="click">Click</button>
<script src="button.js"></script>

button.js

document.getElementById('click')
  .addEventListener('click', myFunction);

AJAX

Я бы предложил использовать Fetch API ( руководство по использованию , если это помогает) для связи с вашим бэкэндом, используя AJAX или Асинхронный JavaScriptи XML .Несмотря на название, AJAX не ограничивается работой с XML.

В отличие от XMLHttpRequest, Fetch API основан на Promise.

Минимальный GET запрос, который ожидает JSONОтвет:

const url = 'https://...';

fetch(url, {
  method: 'GET',
  headers: {
    'Accept': 'application/json'
  }
})
.then(response => {
  if (response.ok) {
    // if the response status is in the 200-299 range
    return response.json();
  }

  // handle your application error state
})
.catch(error => {
  // handle network errors
  console.error(error);
});

Обратите внимание, что в Fetch API ответы на ошибки 4XX и 5XX не считаются состояниями ошибок, поэтому дополнительная обработка для адекватных ответовможет стать необходимым.Fetch API генерирует только сетевые ошибки.

Минимальный POST запрос, который отправляет JSON и ожидает ответ JSON:

const url = 'https://...';

fetch(url, {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ })
})
.then(response => {
  if (response.ok) {
    // if the response status is in the 200-299 range
    return response.json();
  }

  // handle your application error state
})
.catch(error => {
  // handle network errors
  console.error(error);
});

Scoping-level Scoping

Включитьфайл сценария как статический ресурс, обслуживаемый вашим бэкэндом (посмотрите на статическое промежуточное ПО ExpressJS) и включите его в ваш внешний HTML-код:

index.html

<script src="app.js"></script>

Если вы хотите написать изоморфныйJavaScript (код, используемый как на клиентском , так и сервере), вам потребуется предпринять некоторые дополнительные продвинутые шаги для решения этой проблемы.У меня нет достаточного опыта в настройке конвейеров сборки, необходимых для дальнейших комментариев по этому вопросу.Рассмотрите возможности Webpack или Rollup.

Манипулирование DOM - отображение результатов AJAX-запросов

Создайте AJAX-запрос, затем используйте клиентский JavaScript для взаимодействия с DOM.Предполагая, что приведенный ниже запрос возвращает массив JSON из people объектов, у всех из которых есть свойство name, это создаст новый элемент <p>, содержащий имя каждого человека, и вставит его в <div> с идентификатором #my-divна текущей странице:

const url = 'https://...';

fetch(url, ...)
  .then(json => {
    const div = document.getElementById('my-div');

    json.people.forEach(person => {
      const p = document.createElement('p');

      p.innerText = person.name;

      div.appendChild(p);
    });
  });

PUT & DELETE Запросы

Используя Fetch API, вы можете указать любой HTTP-глагол:

const url = 'https://...';

fetch(url, {
  method: 'DELETE'
});