First, we need to create a MasaFramework template project with the name TokenDemo, and the project type as shown in the image:

Delete the Web/TokenDemo.Admin project, then create a new Masa Blazor Pro project template project at the location src/Web:

Select the project type as ServerAndWasm to support both modes:

After creation, the directory structure is as shown. Then add a project reference to TokenDemo.Caller in TokenDemo.Admin.
Configure EntityFrameworkCore and Sqlite
Modify the package dependencies of the TokenDemo.Service project to the preview version:
<ItemGroup>
<PackageReference Include="Masa.BuildingBlocks.Dispatcher.Events" Version="1.0.0-preview.18" />
<PackageReference Include="Masa.Contrib.Data.Contracts" Version="1.0.0-preview.18" />
<PackageReference Include="Masa.Contrib.Data.EFCore.Sqlite" Version="1.0.0-preview.18" />
<PackageReference Include="Masa.Contrib.Dispatcher.Events" Version="1.0.0-preview.18" />
<PackageReference Include="Masa.Contrib.Dispatcher.IntegrationEvents.EventLogs.EFCore" Version="1.0.0-preview.18" />
<PackageReference Include="FluentValidation" Version="11.5.1" />
<PackageReference Include="FluentValidation.AspNetCore" Version="11.2.2" />
<PackageReference Include="Masa.Utils.Extensions.DependencyInjection" Version="1.0.0-preview.18" />
<PackageReference Include="Masa.Contrib.Service.MinimalAPIs" Version="1.0.0-preview.18" />
<PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="6.0.3" />
<PackageReference Include="Swashbuckle.AspNetCore" Version="6.5.0" />
</ItemGroup>
Masa.Contrib.Data.Contracts provides data filtering capability, but it is not mandatory. Then an error occurs. Modify the LogMiddleware code as follows:
namespace TokenDemo.Service.Infrastructure.Middleware;
public class LogMiddleware<TEvent> : EventMiddleware<TEvent>
where TEvent : notnull, IEvent
{
private readonly ILogger<LogMiddleware<TEvent>> _logger;
public LogMiddleware(ILogger<LogMiddleware<TEvent>> logger)
{
_logger = logger;
}
public override async Task HandleAsync(TEvent action, EventHandlerDelegate next)
{
var typeName = action.GetType().FullName;
_logger.LogInformation("----- command {CommandType}", typeName);
await next();
}
}
Modify the ValidatorMiddleware code as follows:
namespace TokenDemo.Service.Infrastructure.Middleware;
public class ValidatorMiddleware<TEvent> : EventMiddleware<TEvent>
where TEvent : notnull, IEvent
{
private readonly ILogger<ValidatorMiddleware<TEvent>> _logger;
private readonly IEnumerable<IValidator<TEvent>> _validators;
public ValidatorMiddleware(IEnumerable<IValidator<TEvent>> validators, ILogger<ValidatorMiddleware<TEvent>> logger)
{
_validators = validators;
_logger = logger;
}
public override async Task HandleAsync(TEvent action, EventHandlerDelegate next)
{
var typeName = action.GetType().FullName;
_logger.LogInformation("----- Validating command {CommandType}", typeName);
var failures = _validators
.Select(v => v.Validate(action))
.SelectMany(result => result.Errors)
.Where(error => error != null)
.ToList();
if (failures.Any())
{
_logger.LogWarning("Validation errors - {CommandType} - Command: {@Command} - Errors: {@ValidationErrors}", typeName, action, failures);
throw new ValidationException("Validation exception", failures);
}
await next();
}
}
Modify the OrderEventHandler code as follows:
namespace TokenDemo.Service.Infrastructure.Handlers;
public class OrderEventHandler
{
readonly IOrderRepository _orderRepository;
public OrderEventHandler(IOrderRepository orderRepository)
{
_orderRepository = orderRepository;
}
[EventHandler(Order = 1)]
public async Task HandleAsync(QueryOrderListEvent @event)
{
@event.Orders = await _orderRepository.GetListAsync();
}
}
public class OrderEventAfterHandler : IEventHandler<QueryOrderListEvent>
{
public async Task HandleAsync(QueryOrderListEvent @event, CancellationToken cancellationToken = new CancellationToken())
{
await Task.CompletedTask;
}
}
Modify appsettings.json to add the Sqlite connection string:
{
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft": "Warning",
"Microsoft.Hosting.Lifetime": "Information"
}
},
"AllowedHosts": "*",
"ConnectionStrings": {
"DefaultConnection": "Data Source=Catalog.db;"
}
}
Modify Program.cs code:
using TokenDemo.Service.Infrastructure;
var builder = WebApplication.CreateBuilder(args);
builder.Services
.AddAuthorization()
.AddAuthentication(options =>
{
options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
})
.AddJwtBearer(options =>
{
options.Authority = "";
options.RequireHttpsMetadata = false;
options.Audience = "";
});
builder.Services.AddMasaDbContext<ShopDbContext>(dbContextBuilder =>
{
dbContextBuilder
.UseSqlite() // Use Sqlite database
.UseFilter(); // Enable data filtering
});
builder.Services.AddAutoInject();
var app = builder.Services
.AddEndpointsApiExplorer()
.AddSwaggerGen(options =>
{
options.AddSecurityDefinition("Bearer", new OpenApiSecurityScheme()
{
Name = "Authorization",
Type = SecuritySchemeType.ApiKey,
Scheme = "Bearer",
BearerFormat = "JWT",
In = ParameterLocation.Header,
Description = "JWT Authorization header using the Bearer scheme. \r\n\r\n Enter 'Bearer' [space] and then your token in the text input below.\r\n\r\nExample: \"Bearer xxxxxxxxxxxxxxx\"",
});
options.AddSecurityRequirement(new OpenApiSecurityRequirement
{
{
new OpenApiSecurityScheme
{
Reference = new OpenApiReference
{
Type = ReferenceType.SecurityScheme,
Id = "Bearer"
}
},
new string[] {}
}
});
})
.AddFluentValidationAutoValidation().AddFluentValidationClientsideAdapters()
.AddEventBus(eventBusBuilder =>
{
eventBusBuilder.UseMiddleware(typeof(ValidatorMiddleware<>));
eventBusBuilder.UseMiddleware(typeof(LogMiddleware<>));
})
.AddServices(builder);
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
app.UseHttpsRedirection();
app.Run();
Add EFCore migration dependencies:
<PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="6.0.15">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
<PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="6.0.15">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
In the Package Manager Console, run Add-Migration Init to generate the Init migration file (if you encounter the error error NETSDK1082: The runtime pack for Microsoft.AspNetCore.App was not available for the specified RuntimeIdentifier 'browser-wasm', temporarily remove the TokenDemo.Admin.WebAssembly project).
Run Update-Database to generate the Sqlite database.
Then you can see the Catalog.db file generated in the project.
Start the TokenDemo.Service.Order project, and you will see the Swagger interface.
How to Integrate the API
Open the Callers\OrderCaller.cs file in the TokenDemo.Caller project, modify BaseAddress to the service address of TokenDemo.Service.Order. Open the Services\OrderService.cs file in the TokenDemo.Service.Order project and modify the code:
namespace TokenDemo.Service.Services;
public class OrderService : ServiceBase
{
public OrderService(IServiceCollection services) : base(services)
{
App.MapGet("/order/list", QueryList).Produces<List<Infrastructure.Entities.Order>>()
.WithName("GetOrders");
}
public async Task<IResult> QueryList(IEventBus eventBus)
{
var orderQueryEvent = new QueryOrderListEvent();
await eventBus.PublishAsync(orderQueryEvent);
return Results.Ok(orderQueryEvent.Orders);
}
}
Then start the TokenDemo.Service.Order project via command line:

Open the Pages\Home\Index.razor file in the TokenDemo\Admin project and modify the code:
@page "/"
@using TokenDemo.Caller.Callers
@inherits LayoutComponentBase
@inject NavigationManager Nav
@inject OrderCaller OrderCaller
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
Nav.NavigateTo(GlobalVariables.DefaultRoute,true);
var data = await OrderCaller.GetListAsync();
await base.OnAfterRenderAsync(firstRender);
}
}
Set a breakpoint at await base.OnAfterRenderAsync(firstRender); to check if the data is retrieved. Open the Program.cs file in the TokenDemo.Admin.Server project and add the following code:
builder.Services.AddCaller(typeof(TokenDemo.Caller.Callers.OrderCaller).Assembly);
Then start the TokenDemo.Admin.Server project and hit the breakpoint:

The result is obtained.
Conclusion
Through the above steps, we have basically mastered the use of MasaFramework and understood the integration of the frontend and backend APIs.
This is the third introductory article about MasaFramework. I will continue to learn MasaFramework and share with everyone.
From token's sharing.
- MASA Framework
- Learning exchange: 737776595