Azure函数–第2部分：使用Azure函数提供HTML页面

最新推荐文章于 2022-11-03 23:27:20 发布

danpu0978

最新推荐文章于 2022-11-03 23:27:20 发布

阅读量333

点赞数

文章标签： python java js javascript html ViewUI

上一教程： Azure函数–第1部分：入门

在上一个教程中，我们创建了一个简单的Azure函数，该函数返回一个值。我将对该项目进行改进，并从该函数返回HTML页面。尽管事实证明这要简单得多，但我不但添加了一种返回网页的方法，而且还添加了三种不同的返回方法，以达到更好的效果。第二，作为Azure功能代码的一部分存储的页面；第三，存储在Azure存储Blob中的页面。

我们将从与上次一样的没有身份验证的简单C＃Azure函数开始。我将其称为“ HelloWorldHTML”。如果您跟随我，这就是您应该在屏幕上看到的内容：

让我们从返回一个静态的硬编码页面开始。只需删除函数中的所有代码，然后将其替换为以下代码：

using System.Net;
using System.Net.Http.Headers;

public static async Task<HttpResponseMessage> Run(HttpRequestMessage req, TraceWriter log)
{
  log.Info("C# HTTP trigger function processed a request.");
  
  // Option 1, coded HTML
  var response = req.CreateResponse(HttpStatusCode.OK, "Hello ");
  response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
  return response;
}

正如我所说，非常简单。这里有两个新事物。首先，我们需要声明我们正在使用System.Net.Http.Headers命名空间，因为我们在该命名空间中使用了MediaTypeHeaderValue类。其次，我们将ContentType标头添加到请求中，该标头告诉浏览器我们正在返回HTML，因此应将其租借。保存该函数，然后单击“获取函数URL”链接以获取该函数的直接URL，打开一个新的浏览器窗口并粘贴该函数的URL。您应该在浏览器窗口中看到这个漂亮HTML页面：

您显然可以在此处返回任何HTML，但是由于我很懒，这就是我所做的:-)。

第二个选项是在函数的代码中创建一个HTML文件，并从那里加载它。要创建一个新文件，请单击屏幕右侧的“查看文件”文本以打开组成该功能的文件：

这将打开一个列表，如下所示：

您可以添加新文件或上传现有文件。我将单击“添加”并创建一个名为“ hello.html”的新文件。您的列表应如下所示：

让我们向该文件添加一些简单HTML代码，如下所示：

<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    World
  </body>
</html>

保存文件，然后返回到函数代码所在的run.csx文件。注释原始代码（“选项1”下方的所有内容）并添加以下代码：

// Option 2, read from local file
var response = new HttpResponseMessage(HttpStatusCode.OK);
var stream = new FileStream(@"d:\home\site\wwwroot\HelloWorldHTML\hello.html", FileMode.Open);
response.Content = new StreamContent(stream);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
return response;

我们正在使用Stream从本地存储中读取文件，并将此文件设置为对请求的响应。我们仍然需要告诉浏览器内容是HTML，否则它可能决定将其解释为其他内容（例如上一教程中的内容）。保存文件，然后再次导航到函数的URL。您现在应该可以看到以下漂亮的网页：

看起来与上一个权利不同，一个吗？这意味着代码有效:-)。

现在是第三个也是最后一个选项。我将不讨论如何创建Azure存储Blob以及如何将文件上传到该存储的细节，因此，我将留给您调查（我的大学教授在解释时的典型说法）在课堂上有些冗长而乏味的事情，但是太懒了……）。我只是假设您已经创建了它，您有一个名为“ site”的blob容器，其中有一个名为“ hello.html”的文件，并且您知道如何获取存储帐户的连接字符串。有许多假设，但这就是前进的方式。

返回代码，如下所示更改文件的第一部分（imports部分）：

#r "Microsoft.WindowsAzure.Storage"

using System.Net;
using System.Net.Http.Headers;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;

第一行告诉Azure Function运行时该函数正在引用不属于标准运行时的外部程序集（类库）。 Azure Storage是可以通过名称进行引用而无需进行更多工作的特殊程序集之一，但是如果您需要引用其他程序集，则也可以按照此处的说明进行操作。然后，我们还声明我们正在使用Microsoft.WindowsAzure.Storage和Microsoft.WindowsAzure.Storage.Blob命名空间，因此我们的代码看起来更好。

现在，在您的功能文件中的“选项2”下注释所有代码，并添加以下代码：

// Option 3, read from external blob
var storageAccount = CloudStorageAccount.Parse("<your azure storage connection string>");
var blobClient = storageAccount.CreateCloudBlobClient();
var container = blobClient.GetContainerReference("site");
var blob = container.GetBlockBlobReference("hello.html");
string text = "";
using (var memoryStream = new MemoryStream())
{
  blob.DownloadToStream(memoryStream);
  text = System.Text.Encoding.UTF8.GetString(memoryStream.ToArray());
} 
var response = req.CreateResponse(HttpStatusCode.OK);
response.Content = new StringContent(text);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
return response;

此代码使用CloudBlobClient连接到Azure存储帐户，获取名为“ site”的Blob容器，并从该容器获取文件。我们将文件下载到MemoryStream ，并使Stream成为Function响应的内容。现在保存文件，然后再次导航到功能的URL端点。您应该会看到以下内容：

太好了吧？ WordPress提防，我们就在您身后:-)。

希望您喜欢本教程，并希望您像我学到的一样多。我对下一步的工作有一些想法，但我很乐于探索更多东西，因此将您的想法留在评论中，我会看到我能做什么。

拥有美好的一天＆＃55357;＆＃56898;

翻译自: https://www.javacodegeeks.com/2018/03/azure-functions-part-2-serving-html-pages-with-azure-functions.html

danpu0978

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Azure函数–第2部分：使用Azure函数提供HTML页面

上一教程： Azure函数–第1部分：入门在上一个教程中，我们创建了一个简单的Azure函数，该函数返回一个值。我将对该项目进行改进，并从该函数返回HTML页面。尽管事实证明这要简单得多，但我不但添加了一种返回网页的方法，而且还添加了三种不同的返回方法，以达到更好的效果。第二，作为Azure功能代码的一部分存储的页面；第三，存储在Azure存储Blob中的页面。我们将从与...
复制链接

扫一扫