REST API with Postgresql - 如何制作最简单的前端接口

Question

我有一个简单的REST API，它通过查询Postgresql DB来工作。我如何写按钮，点击激活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);

阿贾克斯

我建议使用 Fetch API(使用指南，如果有帮助的话(使用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错误响应不被视为错误状态，这就是为什么可能需要对充分响应进行额外处理的原因。提取 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 交互。 假设下面的请求返回一个 JSON 数组，其中包含具有name属性的people对象，这将创建一个包含每个人姓名的新<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'
});