前几次我们演示了如果通过Azure静态web应用功能发布vue跟blazor的项目。但是一个真正的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 = JsonConvert.DeserializeObject(requestBody); int a = data.a;
int b = data.b; int c = a + b; return new OkObjectResult(c);
}
}

代码比较简单,通过读取request的body获取提交的a、b两个值,然后相加之后返回结果。

修改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入门的文章。

配置静态web应用

打开azure portal,新建一个静态web应用资源,因为前面已经介绍过多次基本的新建过程,这里不在详细介绍。



基本配置跟上次发布Blazor Webassembly应用一样,关键的不同在于API位置需要修改为我们上面新建的Azure函数的项目名称。以便Azure能够找到这个目录。配置好之后点击开始创建。

运行项目

静态web应用资源创建完成后会在github项目上自动添加一个workflow。等待这个workflow显示绿色完成之后就可以正式访问我们的web应用了。



点击静态web应用资源的概述目录,找到url地址复制后在浏览器里打开:



随便输入几个值,点击求和可以看到得到正确的结果。:)

总结

前两次我们演示了通过Azure静态web应用功能发布vue跟Blazor wsam项目。但是他们都是纯静态页面。一般实现一个真正的web应用还需要api服务。Azure静态web应用通过直接对Azure函数的支持简化了项目开发发布流程。我们开发一些简单的项目的时候可以直接使用Azure函数做为api服务,提交代码等待几秒就可以运行了。本来可能需要前后端代码分别部署一次,现在只需要提交一下代码等待几秒就可以运行了。有了云计算程序员真的越来越傻瓜了,笑哭。

Azure 静态 web 应用集成 Azure 函数 API的更多相关文章

  1. 使用Azure静态Web应用部署Blazor Webassembly应用

    上一次演示了如何使用Azure静态web应用部署VUE前端项目(使用 Azure静态web应用+Github全自动部署VUE站点).我们知道静态web应用支持VUE,react,angular等项目的 ...

  2. 使用 Azure静态web应用+Github全自动部署VUE站点

    什么事Azure静态web应用 Azure 静态 Web 应用是一种服务,可从 GitHub 存储库自动构建完整的堆栈 Web 应用,并将其部署到 Azure,目前它还是预览版. Azure 静态 W ...

  3. 使用 Azure 静态 Web 应用服务免费部署 Hexo 博客

    一.前言 最近在折腾 Hexo 博客,试了一下 Azure 的静态 Web 应用服务,发现特别适合静态文档类型的网站,而且具有免费额度,支持绑定域名.本文只是以 Hexo 作为示例,其他类型的框架也是 ...

  4. 尝鲜一试,Azure静态网站应用服务(Azure Static Web Apps) 免费预览,协同Github自动发布静态SPA

    背景 最近在浏览微软的文档的时候发现,微软喜欢用Hugo这个文档框架,有些技术产品的文档页面就用Hugo来做的,同时搭配Github + Azure Static Web Apps Service这个 ...

  5. Azure Functions(二)集成 Azure Blob Storage 存储文件

    一,引言 上一篇文章有介绍到什么是 SeverLess ,ServerLess 都有哪些特点,以及多云环境下 ServerLess 都有哪些解决方案.在这众多解决方案中就包括 Function App ...

  6. Azure Functions(三)集成 Azure Queue Storage 存储消息

    一,引言 接着上一篇文章继续介绍 Azure Functions,今天我们将尝试绑定 Queue Storage,将消息存储到 Queue 中,并且学会适用于 Azure Functions 的 Az ...

  7. 【Azure 应用服务】NodeJS Express + MSAL 实现API应用Token认证(AAD OAuth2 idToken)的认证实验 -- passport.authenticate('oauth-bearer', {session: false})

    问题描述 在前两篇博文中,对NodeJS Express应用 使用MSAL + AAD实现用户登录并获取用户信息,获取Authorization信息 ( ID Token, Access Token) ...

  8. Windows Azure Web Site (18) Azure Web App设置MIME

    <Windows Azure Platform 系列文章目录> 在笔者之前的文章中,介绍了我们在使用Azure Web App,可以把静态资源保存到Azure Storage中: Wind ...

  9. Windows Azure Web Site (13) Azure Web Site备份

    <Windows Azure Platform 系列文章目录> 我们在使用Windows Azure Web Site的时候,经常会遇到需要对Web Site进行备份的情况.在这里笔者简单 ...

随机推荐

  1. 多测师讲解RF自动化测试实现流程_高级讲师肖sir

    1.环境搭建过程?­­整套环境需要哪些工具包,以及工具包的作用?因为我搭建的RF框架是基于Python的,所以肯定要先安装Python,python安装完之后,开始安装自动化测试框架rf3.0-在do ...

  2. vue打包之后在本地运行,express搭建服务器,nginx 本地服务器运行

    一.使用http-server 1.安装http-server npm install -g http-server 2.通过命令进入到dist文件夹 3.运行http-server 以上在浏览器输入 ...

  3. day36 Pyhton 网络编程03

    一.内容回顾 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. sock ...

  4. day22 Pyhton学习 re模块和正则表达式

    正则表达式本身也和python没有什么关系,就是匹配字符串内容的一种规则. 官方定义:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个" ...

  5. 【转载】动态规划—各种 DP 优化

    原博客地址 关于氵博客:其实主要是防止我找不到这篇文了

  6. centos8平台上php7.4的生产环境配置

    一,php错误与日志的配置 1,创建php的日志保存目录: [root@yjweb ~]# mkdir -p /data/logs/phplogs [root@yjweb ~]# chmod 777 ...

  7. HTML 的属性

    HTML 属性赋予元素意义和语境. 下面的全局属性可用于任何 HTML 元 属性 描述 accesskey 规定激活元素的快捷键. class 规定元素的一个或多个类名(引用样式表中的类). cont ...

  8. 1.1 Python 概述

    1.1 Python 概述 1.1.1 了解Python Python 是由荷兰人 Guido Van Rossum 发明的一种面向对象的解释型高级编程语言.Python的设计哲学为 优雅.明确和简单 ...

  9. postgresql使用规范解读

    表设计规范1.建议能使用小字节数类型,就不要用大字节数类型2.建议能用varchar(N).text就不用char(N):3.建议使用default NULL,而不用default '':4.建议使用 ...

  10. 闭包 - Js函数笔记

    闭包 当函数被保存到外部时,将会生成闭包 闭包会导致原有作用域链不释放,造成内存泄漏 类似的代码就叫闭包 闭包的运行作用域 代码 a被执行,b被定义并保存出来 a结束,b被执行时,a的执行期上下文指向 ...