Blazor Server Hosted （基于服务器的Blazor）是一种新型的Web开发方式，它将Blazor Web UI层和ASP.NET Core WebAPI层人为结合在一起，可以实现高度可扩展和高度可定制的Web应用程序。

以下是如何创建Blazor Server Hosted with WebAPI backend应用程序的步骤和示例代码：

1.在Visual Studio中，创建一个新的Blazor Server应用程序（在创建项目向导中选择Blazor App，然后选择Blazor Server即可）。

2.在创建项目向导中勾选“Enable Docker Support”，以便在部署时使用Docker容器；

3.通过NuGet管理器，添加以下依赖项：

Microsoft.EntityFrameworkCore

Microsoft.EntityFrameworkCore.Tools

Microsoft.EntityFrameworkCore.SqlServer

Microsoft.AspNetCore.Authentication.JwtBearer

4.添加一个WebAPI后端，用于处理Blazor应用程序发送的所有请求。

在项目中添加一个新的控制器类，例如“ValuesController”：

[Route("api/[controller]")]

[ApiController]

public class ValuesController : ControllerBase

{

private readonly ILogger _logger;

public ValuesController(ILogger logger)

{

_logger = logger;

}

[HttpGet]

public IEnumerable Get()

{

return new string[] { "value1", "value2" };

}

}

之后编译该项目并启动应用程序，访问localhost:5001/api/values，即可查看控制器返回的数据。

5.使用Entity Framework Core创建数据模型和数据库上下文以访问数据库。

创建一个名为“TodoItem”的类，表示需要管理的待办事项：

public class TodoItem

{

public int Id { get; set; }

public string Name { get; set; }

public bool IsComplete { get; set; }

}

创建一个名为“TodoContext”的类，表示与数据库的联系：

public class TodoContext : DbContext

{

public TodoContext(DbContextOptions options)

: base(options)

{

}

public DbSet TodoItems { get; set; }

}

修改“ValuesController”类，以获取所有待办事项：

public class ValuesController : ControllerBase

{

private readonly TodoContext _context;

public ValuesController(TodoContext context)

{

_context = context;

}

[HttpGet]

public async Task GetAll()

{

return Ok(await _context.TodoItems.ToListAsync());

}

}

6.修改Blazor客户端，以使用刚刚创建