用 Azure 函数构建 QR 码生成器( 四 ) _Azure

我们来试试。
本地启动函数
我们将启动这个函数并让它在本地侦听。我们将发送一个带有查询的 GET 请求来测试它。
在命令行中键入以下内容:
Shell
func start
启动函数。
你应该看看这样的东西:

文章插图

现在我们将向
http://localhost:7071/api/GenerateQRCode请记住，我们在代码中指定的参数是 qrtext ，因此我将把它添加到最后:
http://localhost:7071/api/GenerateQRCode?qrtext="hello world"我正在使用 Postman 进行此操作，因此可以看到呈现的 JSON:

文章插图

我们所做的日志记录表明，它呈现的是“ hello world”:

文章插图

所以步骤很简单:

发送一个 GET 到我们的 URL
追加要生成的文本并将其添加到 qrtext
接受 JSON

这是我们目前输入的所有代码:
C #

public static class QRCodeGenbr{br[FunctionName("GenerateQRCode")]brpublic static async Task<IActionResult> GenerateQRCode(br[HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequest req, ILogger log)br{brstring qrtext = req.Query["qrtext"];brlog.LogInformation("Generating QR Code for {0}", qrtext);brbrvar qr = QrCode.EncodeText(qrtext, QrCode.Ecc.Medium);brvar pngout = qr.ToPng(10, 1, SkiaSharp.SKColors.Black, SkiaSharp.SKColors.White);

这很棒，但我们还没完。我们还需要部署它。但在此之前，让我们构建一个小型的、简单的 JavaScript 前端来与这个函数交互。
建造前端我们希望这个二维码生成器是完全独立的。尽管 Azure 函数并不是真正用来提供网页服务的，但它是可能的。在这种情况下，我们可以设置它，这样就不需要在其他地方托管前端。这只是一个简单的网页，所以让我们提供它。

首先，我们将创建index.html 。
创建一个名为 www 的文件夹并创建一个名为 index.html 的文件。
这将是一个超级简单，粗糙的前端ーー没有什么花哨的，只是足以完成工作。
在顶部加入以下内容:
HTML
<!DOCTYPE html>br<html>br<body>brbr<h2>QR Code Generator</h2>
这是我们的基本标题。接下来，我们需要添加一个输入来获取用户的文本。
HTML
<input id="inputbox" style="width: 250px;" ></input>br<br /><br />
这个输入的 id 是 inputbox ，因此我们可以使用 JavaScript 获取这段文本。我在后面添加了几个断行符，以便将其间隔开。
接下来，我们将创建一个调用 JavaScript 函数的按钮:
HTML
<button type="button" onclick="GetQRCode()">Create QR Code</button>
然后我们会有一个地方，我们将插入二维码。请记住，这将是 Base64编码的，因此我们可以在 GetQRCode 函数中用图像填充这个 div 。
HTML
<div id="demo"></div>
接下来，我们将放入 GetQRCode 函数，它将把一个 XMLHttpRequest 返回到 Azure 函数中并检索 JSON 。然后它解析它，并用我们的映像替换“ demo”div 。注意，我们添加了一个带有头信息的 img 标记，这样它就创建了一个我们可以在浏览器中查看的图像。
C#

function GetQRCode() {brvar xhttp = new XMLHttpRequest();brxhttp.onreadystatechange = function () {brif (this.readyState == 4 && this.status == 200) {brvar ourJSON = JSON.parse(this.responseText);brdocument.getElementById("demo").innerHTML = "<img src="data:image/png;base64, " + ourJSON.image + "">";br}br};brinput = document.getElementById('inputbox').value xhttp.open("GET", "/api/GenerateQRCode?qrtext=" + input, true);brxhttp.send();br} <br/script>

很好! 现在我们有了一个索引页面，它将为我们的 QRCode Generator 绘制一个小 UI 。

我知道我们可以添加错误纠正/处理或使用一个库，但我想让它尽可能简单。