【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

是否可以在应用的一部分使用 Blazor?

  • 2020-03-30
  • 本文字数:2746 字

    阅读完需:约 9 分钟

是否可以在应用的一部分使用 Blazor?

Blazor 被设计成一个可以创建完整网页应用的平台,你可以看到最近我们为我的博客创建的独立搜索网站就是一个 Blazor实践。 但是就像你工具箱里的任意一个工具一样,它可能不总是适用于你的工作。


以我的博客举例,它更多的是一个只读形式的内容存储在Github上的网站,它将 markdown 格式文件转换成 HTML 文件。 并不确定,我们可能把它做成一个 Blazor WASM 应用,使用一个.NET 的 markdown 库去动态生成页面,但这可能对于运行我的网站并带给读者一个良好体验来说是一个不高效的方法。


但是如果我们想要集成一个我们已有的搜索应用,我们又该如何决策呢?

了解 Blazor 是如何开始的

想知道我们要如何在另一个应用里运行 Blazor WebAssembly。我们需要先学习一下 Blazor WebAssessbly 应用是如何运行的。


当你创建一个新的项目,里面包含一个你或许从未打开过的文件 wwwroot/index.html , 但这是拼图很重要的一片。这个文件看起来就像:


<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>Project Name</title>    <base href="/" />    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />    <link href="css/site.css" rel="stylesheet" /></head><body>    <app>Loading...</app>
<script src="_framework/blazor.webassembly.js"></script></body></html>
复制代码


实际上,它非常简单,我们需要的重要代码是这两行:


<app>Loading...</app>
<script src="_framework/blazor.webassembly.js"></script>
复制代码


在快速找到<app>元素之前,我们首先看一下 JavaScript 文件。你或许会注意到这个文件并没有出现在硬盘里,这是因为它是属于构建输出的部分。你可以在 ASP.NET Core 的 Github 仓库src/Components/Web.JS/src/Boot.WebAssembly.ts里找到它的源码(at the time of writing anyway)。此文件与 Blazor 服务器共享一部分内容,但是与使用MonoPlatform的最大区别是它进行一堆 WASM 交互操作。


这个文件至关重要,没有它你的 Blazor 应用将无法启动,它先负责(通过注入一个脚本文件到DOM)初始化托管在 Mono 的 WASM 环境。然后它使用另一个生成的文件 _framework/blazor.boot.json去找出需要将哪些.NET dll 文件加载到 Mono/WASM 环境中。


因此你需要把这个 js 文件包含在内,同时把_framework文件夹放在根路径下以确保它可以找到 JSON 文件(见 此评论)。

延迟加载 Blazor

我在钻研源代码时发现的一个有趣的题外话是,你可以通过添加autostart="false"<script>标签里来延迟 Blazor 的加载。就像这里提到的一样,然后使用 JavaScript 调用window.Blazor.start()以启动 Blazor 应用。


我不打算使用它来进行这种集成,但很容易理解你可以用一个用户启动的初始化过程,而不是在页面中加载。

放置你的 Blazor 应用

既然我们已经明白了是什么使 Blazor 应用开始运行,那么我们如何了解它出现在 DOM 的何处呢?那就是我们 HTML 文件里<app>元素的用处,但是 Blazor 又怎么知道它呢?


事实证明,那是我们通过Startup 类控制的一些事情:


using Microsoft.AspNetCore.Components.Builder;using Microsoft.Extensions.DependencyInjection;
namespace DemoProject{ public class Startup { public void ConfigureServices(IServiceCollection services) { }
public void Configure(IComponentsApplicationBuilder app) { app.AddComponent<App>("app"); } }}
复制代码


可以看到在 14 行的位置我们使用了AddComponent并指定一个 DOM selector app。这就是它如何知道应用启动时 DOM 里有哪些元素。这些操作你是可以修改的,或许修改 selector 为一个 DOM 元素的 ID 或者一个<div>,又或者是任意你想要的内容,但那都不重要,因此我将它叫做<app>


题外话:我并没有进行尝试,但考虑到你指定了 DOM 元素和入口组件(通过泛型,上面例子中指向App.razor)你可以在页面上运行多个 Blazor 应用程序。至于为什么这个么做我不知道,但理论上你是可以这么做的。

托管 Blazor

当托管一个 Blazor WASM有一些可选项的时候,我想专注于Azure Storage 静态站点的方法,这也是我的博客托管的方法。


首先我们要做的事情是使用命令dotnet publish --configuration Release发布应用。然后我们可以得到bin/Release/{TARGET FRAMEWORK}/publish/{ASSEMBLY NAME}/dist/_framework文件夹的内容,包括:blazor.boot.json, blazor.server.js, blazor.webassembly.js,一个叫做_bin的文件夹和一个叫做wasm的文件夹。


我们将拷贝这个_framework文件夹并防止在静态站点的根目录下,维护所有的路径,以确保 Blazor 可以启动。


注意:根据文档使用dotnet run托管站点时你是可以修改content-rootpath-base,但我没有发现他们发布后也可以正常工作。此外,Hugo 非常积极使用绝对路径,因此我发现最简单的办法是把我的 WASM 文件放在和dotnet run使用的相同的结构中。


由于这是一个搜索应用,我们来创建一个新的搜索页,并把它放在我们需要的 HTML 文件里:


<app></app>
<script src="/_framework/blazor.webassembly.js"></script>
复制代码


现在生成你的静态站点(或者任意你选择的托管方式)并导航至/search路径下。


如果一切都没有问题你将会收到一个错误页面!


抱歉,这个地址没有任何内容。


Blazor 路由

如果你记得我们上一篇博客我们了解了 Razor 组件中的@page指令。此处你指定的路由对应的页面将匹配已有的@page "/"。但是我们现在的路由是/search,并且 Blazor 的路由引擎找到了 URL 并执行你的App.razor组件:


<Router AppAssembly="@typeof(Program).Assembly">    <Found Context="routeData">        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />    </Found>    <NotFound>        <LayoutView Layout="@typeof(MainLayout)">            <p>Sorry, there's nothing at this address.</p>        </LayoutView>    </NotFound></Router>
复制代码


Router无法找到一个匹配的路由去使用RouteView,它就会被丢往NotFound页面,这就是我们收到这个错误页面的原因。


别担心,这个很容易修复,只需要更新@page指令以匹配您希望它在已发布网站中匹配的路由 ,或者简化 App.razor 以不关心路由。


一旦一个新的版本发布完成,并且文件拷贝完成,这个页面就会正常呈现。

结论

Blazor 是一个构建应用非常棒的方法,但是相比创建应用程序,在提前生成静态内容并使用 Blazor 增强现有应用程序更有价值。


我们研究了一下在 HTML 页面中运行 Blazor 应用所需要的重要文件,同时研究了将其放入其它类型应用需要什么。


原文链接https://www.aaron-powell.com/posts/2019-12-10-can-you-use-blazor-for-only-part-of-an-app/


2020-03-30 19:14916

评论

发布
暂无评论
发现更多内容

[架构实战营]模块二作业

xyu

#架构实战营

图像的读取,显示与存储操作

IT蜗壳-Tango

7月日更

想跳槽却简历石沉大海?一起来围观月薪20k的软件测试工程师真实简历 (含金量高面试题)

程序员阿沐

面试 软件测试 自动化测试 经验分享 简历

架构训练营模块二作业

Lemon

优化和调整Spark应用程序(七)

数据与智能

spark 缓存 持久化

统一语言 = 领域模型 ?

escray

学习 极客时间 7月日更 如何落地业务建模

Vue进阶(六十二):理解$nextTick()

No Silver Bullet

Vue 7月日更 nextTick

勇于尝试新鲜事物,利于项目来积累学习经验

DisonTangor

职业规划

从脑瘫患者重获交流到免开颅微创,脑机接口更安全了吗?

脑极体

Druid 0.15 版本启动错误

HoneyMoose

【设计模式】工厂模式

Andy阿辉

编程 程序员 设计模式 23种设计模式

Rust从0到1-并发-可扩展性

rust 并发 sync Concurrency send

【涨知识】你不知道的Python常用开发工具!猿来这么多!

小阿杰

Python 后端 开发工具

想在Java八股文面试中脱颖而出?这《1000道互联网大厂Java工程师面试题》必不可少!

白亦杨

Java 编程 程序员

【Kubernetes技术专题】系统架构介绍

洛神灬殇

k8s 7月日更

Nginx配置location

刘旭东

nginx 反向代理

数字人民币的基础:共识与信任

CECBC

nacos的作为服务配置怎么玩?

卢卡多多

nacos 服务 7月日更

Linux之du命令

入门小站

Linux

区块链技术如何赋能食品安全链路追溯

CECBC

【设计模式】抽象工厂

Andy阿辉

编程 程序员 设计模式 23种设计模式 编程思想

CTF中的一些常见骚操作(可以没有,但不能不会)

网络安全学海

网络安全 信息安全 CTF 渗透测试 漏洞分析

JIRA 如何连接到云平台的 bitbucket

HoneyMoose

【设计模式】总览

Andy阿辉

编程 程序员 设计模式 23种设计模式

在腾讯,我的试用期总结

程序员鱼皮

Java c++ Python 大前端 后端

小解c# foreach原理

喵叔

7月日更

免费分享Mysql从入门到精通的优秀图书

Java入门到架构

想在Java八股文面试中脱颖而出?这《1000道互联网大厂Java工程师面试题》必不可少!

Java 编程 程序员

JIRA 链接 bitbucket 提示错误 Invalid OAuth credentials

HoneyMoose

数字化转型下的数字经济新发展

CECBC

在线XML转HTML工具

入门小站

工具

是否可以在应用的一部分使用 Blazor?_文化 & 方法_Azure 中文精选_InfoQ精选文章