Blazor Web 应用如何实现Auto模式
本文介绍Blazor Web应用Auto交互呈现模式的实现方案,如下示例是基于 Known 框架来实现的,该解决方案共有3个项目,具体实现步骤如下:
1. 前后端共用项目
创建前后端共用类库项目Sample,定义系统的实体类、数据模型、服务接口、常量、枚举等,项目工程文件内容如下:
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
</Project>
在该项目中添加示例服务接口,继承框架IService
//IService为框架定义的Api服务接口,用于标识该接口为前后端交互接口
//程序启动时,框架自动查找Assembly中的接口,根据接口定义WebApi路由
//该示例路由为:/Test/GetMessage
public interface ITestService : IService {
Task<string> GetMessageAsync();
}
2. 客户端项目
创建客户端项目Sample.Client,引用WebAssembly所需依赖,引用Castle依赖动态代理Http请求后端WebApi,项目工程文件内容如下:
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<ImplicitUsings>enable</ImplicitUsings>
<NoDefaultLaunchSettingsFile>true</NoDefaultLaunchSettingsFile>
<StaticWebAssetProjectMode>Default</StaticWebAssetProjectMode>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.6" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="8.0.6" />
<PackageReference Include="Microsoft.Extensions.Http" Version="8.0.0" />
<PackageReference Include="Castle.Core" Version="5.1.1" />
<PackageReference Include="Castle.Core.AsyncInterceptor" Version="2.1.0" />
<ProjectReference Include="..\Sample\Sample.csproj" />
</ItemGroup>
</Project>
添加拦截器HttpClientInterceptor.cs类文件,继承Castle.DynamicProxy.IAsyncInterceptor,实现Http动态代理
using Castle.DynamicProxy;
namespace Sample.Client;
// HttpInterceptor为框架封装的拦截器
public class HttpClientInterceptor<T>(IServiceScopeFactory provider) : HttpInterceptor<T>(provider), IAsyncInterceptor where T : class {
protected override async Task<HttpClient> CreateClientAsync() {
var type = typeof(T);
var factory = await ServiceFactory.CreateAsync<IHttpClientFactory>();
var client = factory.CreateClient(type.Name);
client.BaseAddress = new Uri(Config.HostUrl);
return client;
}
public void InterceptAsynchronous(IInvocation invocation) {
invocation.ReturnValue = SendAsync(invocation.Method, invocation.Arguments);
}
public void InterceptAsynchronous<TResult>(IInvocation invocation) {
invocation.ReturnValue = SendAsync<TResult>(invocation.Method, invocation.Arguments);
}
public void InterceptSynchronous(IInvocation invocation) { }
}
在Program.cs文件中添加客户端配置
//使用Castle代理生成器创建Http代理类型
private static readonly ProxyGenerator Generator = new();
services.AddHttpClient();
//添加KnownClient,注入拦截器提供者
services.AddKnownClient(info =>
{
info.InterceptorType = type => typeof(HttpClientInterceptor<>).MakeGenericType(type);
info.InterceptorProvider = (type, interceptor) =>
{
return Generator.CreateInterfaceProxyWithoutTarget(type, ((IAsyncInterceptor)interceptor).ToInterceptor());
};
});
添加测试页面组件Test.razor
@page "/test"
<h1>@message</h1>
@code {
//注入服务与Server模式注入没有区别
[Inject] private ITestService Service { get; set; }
private string message;
protected override async Task OnAfterRenderAsync(bool firstRender) {
await base.OnAfterRenderAsync(firstRender);
if (firstRender)
message = await Service.GetMessageAsync();
//这里的Service实例,会根据渲染模式自动切换
//SSR时,就是后端实现ITestService的实现类的实例
//CSR时,就是Castle代理生成器创建的代理类的实例
}
}
3. 服务端项目
创建服务端项目Sample.Web,项目工程文件内容如下:
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net8.0</TargetFramework>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="8.0.6" />
<ProjectReference Include="..\Sample.Client\Sample.Client.csproj" />
</ItemGroup>
</Project>
修改App.razor文件中的呈现模式
<Routes @rendermode="InteractiveMode" />
@code {
private InteractiveAutoRenderMode InteractiveMode => new(false);
}
添加TestService.cs实现服务接口
class TestService : ITestService {
public Task<string> GetMessageAsync() => Task.FromResult("test");
}
在Program.cs文件中添加服务端配置
//添加Known框架后端Core
services.AddKnownCore();
//添加Known框架自动生成WebApi
services.AddKnownWebApi();
//注入服务接口
services.AddScoped<ITestService, TestService>();
//使用Known框架静态文件和WebApi