安装aspire

查看vs版本

我这的版本是17.9.7,不支持aspire，所以需要升级

更新VS

点击帮助->检查更新

点击更新

静等安装升级

创建aspire项目

项目创建成功，如下图

运行Aspire项目

在AspireApp1.AppHost的launchSettings.json文件中加 "ASPIRE_ALLOW_UNSECURED_TRANSPORT": "true"

{
  "$schema": "https://json.schemastore.org/launchsettings.json",
  "profiles": {
    "http": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "http://localhost:15177",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development",
        "DOTNET_ENVIRONMENT": "Development",
        "DOTNET_DASHBOARD_OTLP_ENDPOINT_URL": "http://localhost:19239",
        "DOTNET_RESOURCE_SERVICE_ENDPOINT_URL": "http://localhost:20241",
        "ASPIRE_ALLOW_UNSECURED_TRANSPORT": "true"
      }
    }
  }
}

运行AspireApp1.AppHost项目

访问AspireApp1.Web项目

这里只要运行AspireApp1.AppHost项目就可以了

分析

看AspireApp1.AppHost项目的Program.cs文件，这里运行了两个项目

var builder = DistributedApplication.CreateBuilder(args);
var cache = builder.AddRedis("cache");
var apiService = builder.AddProject<Projects.AspireApp1_ApiService>("apiservice"); //这里是后端项目
builder.AddProject<Projects.AspireApp1_Web>("webfrontend")//这里是前端项目
    .WithExternalHttpEndpoints()
    .WithReference(cache)
    .WithReference(apiService);
builder.Build().Run();

AspireApp1.Web这里注入了对apiservice的访问

using AspireApp1.Web;
using AspireApp1.Web.Components;
var builder = WebApplication.CreateBuilder(args);
// Add service defaults & Aspire components.
builder.AddServiceDefaults();
builder.AddRedisOutputCache("cache");
// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();
builder.Services.AddHttpClient<WeatherApiClient>(client => client.BaseAddress = new("http://apiservice")); //这里注入后端项目的API服务
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
}
app.UseStaticFiles();
app.UseAntiforgery();
app.UseOutputCache();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();
app.MapDefaultEndpoints();
app.Run();

看WeatherApiClient.cs文件

namespace AspireApp1.Web;
public class WeatherApiClient(HttpClient httpClient)
{
    public async Task<WeatherForecast[]> GetWeatherAsync(int maxItems = 10, CancellationToken cancellationToken = default)
    {
        List<WeatherForecast>? forecasts = null;
        await foreach (var forecast in httpClient.GetFromJsonAsAsyncEnumerable<WeatherForecast>("/weatherforecast", cancellationToken))//调用后端API获取天气预报数据
        {
            if (forecasts?.Count >= maxItems)
            {
                break;
            }
            if (forecast is not null)
            {
                forecasts ??= [];
                forecasts.Add(forecast);
            }
        }
        return forecasts?.ToArray() ?? [];
    }
}
public record WeatherForecast(DateOnly Date, int TemperatureC, string? Summary)
{
    public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
}