带有 Postgresql 的 REST API - 如何制作最简单的前端界面

Question

我有一个简单的 REST API，它通过对 Postgresql DB 进行查询来工作。我如何编写按钮，onClick 激活 GET 功能并将其显示在网页上？如何处理 POST 请求？如何将 app.js 文件链接到 index.html，以便识别 app.js 中的函数名称？如何制作将接受 POST 请求的 div？我需要一些 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 上找到了答案。

事件绑定

假设您使用的是原生 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

我建议使用the Fetch API（a usage guide，如果有帮助的话）使用 AJAX 或 异步 JavaScript 和 XML 与您的后端通信。尽管有这个名字，AJAX 并不局限于使用 XML。

与XMLHttpRequest 不同，Fetch API 是基于 Promise 的。

需要 JSON 响应的最小 GET 请求：

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 只抛出网络错误。

发送 JSON 并期望 JSON 响应的最小 POST 请求：

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);
});

脚本级作用域

将脚本文件作为后端服务的静态资源包含在内（查看 ExpressJS 的静态中间件）并将其包含在前端 HTML 中：

index.html

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

如果您想编写同构 JavaScript（在客户端和服务器上使用的代码），您需要采取一些额外的高级步骤来处理它。我没有足够的经验来配置构建管道来进一步评论这个主题。考虑研究 Webpack 或 Rollup。

DOM 操作 - 显示 AJAX 请求的结果

发出 AJAX 请求，然后使用客户端 JavaScript 与 DOM 交互。假设下面的请求返回一个包含 people 对象的 JSON 数组，这些对象都具有 name 属性，这将创建一个包含每个人姓名的新 <p> 元素，并将其注入 id 为 #my-div 的 <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'
});