前幾次我們演示了如何通過Azure靜態web應用功能發布vue跟blazor的專案(使用 Azure靜態web應用+Github全自動部署VUE站點、使用Azure靜態Web應用部署Blazor Webassembly應用)，但是一個真正的web應用，總是免不了需要后臺api服務為前端提供資料或者處理資料的能力，同樣前面我們也介紹了Azure函式服務，Azure函式的http trigger可以對http作出回應，可以完美的承當web api的角色，現在Azure靜態web應用可以直接集成Azure函式，使得一次發布可以同時發布前端專案（vue、blazor）及后臺api服務（azure函式），
新建Azure函式
上次已經演示過如何發布Blazor專案，這里不在啰嗦，直接找到我們上次的BlazorWebassembly專案的解決方案，添加一個Azure函式，
Azure函式使用Http trigger，Http trigger可以對http請求作出回應，可以看成是一個webapi，
新建完成之后修改Function1.cs類的代碼為：
public static class Function1
{
[FunctionName("sum")]
public static async Task<IActionResult> Run(
[HttpTrigger(AuthorizationLevel.Function, "get", "post", Route = null)] HttpRequest req,
ILogger log)
{
log.LogInformation("C# HTTP trigger function processed a request.");
string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
dynamic data = https://www.cnblogs.com/kklldog/archive/2020/11/18/JsonConvert.DeserializeObject(requestBody);
int a = data.a;
int b = data.b;
int c = a + b;
return new OkObjectResult(c);
}
}
代碼比較簡單，通過讀取request的body獲取提交的a、b兩個值，然后相加之后回傳結果，
關于Azure Function的檔案參閱使用Azure Functions玩轉Serverless
修改Blazor專案
我們開始修改上次的Blazor Webassembly專案，在首頁上放置3個文本框及一個按鈕，點擊按鈕的時候把其中兩個文本框的值通過http傳遞到Azure函式中去得到回傳值顯示在第三個文本框內，
@page "/"
@inject HttpClient Http
<h1>Azure static web app with functions</h1>
A:
<input @bind="a" />+
B:
<input @bind="b" />=
<input @bind="c" />
<button @onclick="sum">求和</button>
@code{
private int a;
private int b;
private string c;
private async Task sum()
{
var result = await Http.PostAsJsonAsync("/api/sum", new
{
A = a,
B = b
});
var sum = await result.Content.ReadAsStringAsync();
c = sum;
}
}
完成之后提交代碼到github，想要了解Blazor的相關內容請閱讀我的其他關于Blazor入門的文章，
tag=Blazor
配置靜態web應用
打開azure portal，新建一個靜態web應用資源，因為前面已經介紹過多次基本的新建程序，這里不在詳細介紹，
基本配置跟上次發布Blazor Webassembly應用一樣，關鍵的不同在于API位置需要修改為我們上面新建的Azure函式的專案名稱，以便Azure能夠找到這個目錄，配置好之后點擊開始創建，
運行專案
靜態web應用資源創建完成后會在github專案上自動添加一個workflow，等待這個workflow顯示綠色完成之后就可以正式訪問我們的web應用了，
點擊靜態web應用資源的概述目錄，找到url地址復制后在瀏覽器里打開：
隨便輸入幾個值，點擊求和可以看到得到正確的結果，：）
總結
前兩次我們演示了通過Azure靜態web應用功能發布vue跟Blazor wasm專案，但是他們都是純靜態頁面，一般實作一個真正的web應用還需要api服務，Azure靜態web應用通過直接對Azure函式的支持簡化了專案開發發布流程，我們開發一些簡單的專案的時候可以直接使用Azure函式做為api服務，提交代碼等待幾秒就可以運行了，本來可能需要前后端代碼分別部署一次，現在只需要提交一下代碼等待幾秒就可以運行了，有了云計算程式員真的越來越傻瓜了，笑哭，
關注我的公眾號一起玩轉技術
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/223213.html
標籤：.NET技术