Question

我在创建网站/前端（仅HTML / CSS）方面经验有限，并且主要在后端（Azure函数中的Node.js）上工作。

我已经创建了一个Azure函数（httptrigger），我希望点击我网站上的一个按钮。

例如，像搜索栏一样，我希望用户键入内容并单击搜索。当他们单击搜索后，我想在查询字符串中单击带有搜索内容的http触发器。

点击触发器后，我希望它返回一些数据以显示在网页上。

我正在努力将搜索内容添加到查询字符串中（也许安全地隐藏了httptrigger端点？），以及如何将数据发送回html网站。

目前，我已经构建了httptrigger并可以通过context.res= {body: html}返回html数据，当我将httptrigger网址发布到浏览器中时，它可以正常工作，但是我当然希望它能够将数据发送回去并影响带有搜索栏的当前网页，方法是在其下方添加结果。

这里的任何指针或技巧都将不胜感激，因为我对将前端与此缝在一起不太熟悉。

谢谢！

Answer 1

因此，我的建议是对此进行一些分解，并可能基于该细分来提出一些新的更具体的问题。因为这是相当广泛的。

请注意，从您的网站的（前端）角度来看，单击和Azure Function Http Trigger并没有什么不同，然后其他任何REST终结点，以及如何将其连接到前端的答案都将大相径庭基于您可能正在使用的任何框架（有时这些框架甚至还希望以特定方式返回数据）。

考虑到这一点，在尝试使用UI之前，我将首先关注确保正确配置Azure函数并生成期望的JSON结果。在这方面，我可以给您一些建议：

您提到了“隐藏”端点。您首先需要确定要如何保护它，因为只要它在Internet上就无法“隐藏”。如果它是一个匿名站点，那么您将拥有有限的选择。如果您落后于登录名，则可以有更多选择，但是大多数最佳实践都采用了某种基于令牌的方法（Oauth，Custom等）。 Azure函数确实具有可以传递的函数键的概念，但这实际上仅适用于非浏览器对API的使用，可以将它们保密。您添加到前端的任何密钥对所有人都是可见的，并且基本上是无用的（除非您只是想阻止人们随机击中端点）。
更新Azure Functions中的CORS设置以确保配置了使用您的API的域，否则您将被浏览器中的跨域限制所阻止。可以在https://docs.microsoft.com/en-us/azure/azure-functions/functions-how-to-use-azure-function-app-settings#cors
使用所需格式的一些模拟数据创建一个函数（稍后可以循环使用，并在实际数据源中将其提取出来）。下面的代码段示例使用了几个硬编码状态。

module.exports = function(context, req) {
  if (req.query.filter) {
    // Do something with the filter parameter when loading results
    context.res = {
      body: '[{"name": "New York","abbreviation": "NY"},{"name": "Ohio","abbreviation": "OH"}]',
      headers: {
        'Content-Type': 'application/json'
      }
    };
  } else {
    context.res = {
      status: 400,
      body: "Please pass a filter on the query string"
    };
  }
  context.done();
};

一旦您具有可以返回数据的工作功能，然后继续进行UI集成。

如何将Azure Httptrigger连接到网站？

1 个答案: