如何使用 Blazor WASM 和 Strapi 构建博客应用程序

Question

我正在学习编程并尝试创建一个基于 Blazor WASWM 的博客，我想使用 Strapi 作为 CDN。但我无法将 Strapi（后端）与 Blazor（前端）连接。我尝试了这个指南，但它只适用于旧版本的.net：https://strapi.io/blog/how-to-build-a-blog-app-using-blazor-wasm-and-strapi

我将此代码添加到 Strapi Plugin.js 中：

module.exports = ({ env }) => ({
  'transformer': {
    enabled: true,
    config: {
      prefix: '/api/',
      responseTransforms: {
        removeAttributesKey: true,
        removeDataKey: true,
      }
    }
  },
});

然后安装了 Strapi-plugin-transformer 添加内容并授予公共用户所有权限这就是后端的全部内容（我认为是 Strapi）

{
  "AppSettings": {
    "STRAPI_API_URL": "http://localhost:1337"
  }
}

和带有 AppSettings.cs 的 Models 文件夹现在关于前端，所以我在 wwwroot 文件夹中创建 appsetting.json：

namespace frontend.Models
{
    public class AppSettings
    {
        public string STRAPI_API_URL { get; set; }
    }
}

修改后的程序.cs：

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using frontend.Models;

namespace frontend
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("#app");

            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            await builder.Build().RunAsync();
        }

        public static void ConfigureServices(IServiceCollection services)
        {
            // Example of loading a configuration as configuration isn't available yet at this stage.
            services.AddSingleton(provider =>
            {
                var config = provider.GetService<IConfiguration>();
                return config.GetSection("App").Get<AppSettings>();
            });
        }
    }
}

并添加

我尝试按照教程进行操作，还升级了这个项目https://github.com/Marktawa/tags-strapi-purplerhino，但没有一个对我有用。

如果有人知道如何解决它或者您有更好的替代方案的建议，我会很高兴。

Answer 1

好吧，整个问题在于渲染图像，所以我修改了代码，现在它可以工作了，但我遇到了其他问题。我正在尝试渲染富文本（块），但它不起作用，有人可以帮助我，谢谢。

这是我用于渲染富文本（块）的html代码

<div class="w-full">
            @if (postDetails.Data.Content?.Count > 0)
                {
                    <p class="rounded h-40 w-full object-cover object-center mb-6" src="@postDetails.Data.Content[0].Children" alt="content">
                    </p>
                }
            </div>

以及完整的 C# 代码：

@code {

    [Parameter]
    public string Id { get; set; }

    private PostSingle postDetails = null;

    public string strapi_api_url;

    protected override async Task OnInitializedAsync()
    {
        strapi_api_url = Configuration["AppSettings:STRAPI_API_URL"];
        var url = "{STRAPI_API_URL}/api/posts/{Id}?populate=*"; // Specify media population
        url = url.Replace("{STRAPI_API_URL}", strapi_api_url);
        url = url.Replace("{Id}", Id);
        postDetails = await Http.GetFromJsonAsync<PostSingle>(url);

        if (postDetails.Data != null)
        {
            if (postDetails.Data.Image != null)
            {
                foreach (var media in postDetails.Data.Image)
                {
                    media.Url = strapi_api_url + media.Url;
                }
            }
            if (postDetails.Data.Content != null)
            {
                foreach (var text in postDetails.Data.Content)
                {
                    text.Children = strapi_api_url + text.Children;
                }
            }
        }
    }

    private void NavigateToIndexComponent()
    {
        NavigationManager.NavigateTo("");
    }

    public class PostSingle
    {
        public Data Data { get; set; }
    }

    public class Data
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Author { get; set; }
        public List<Text> Content { get; set; }
        public List<Media> Image { get; set; } // List for multiple media
    }

    public class Text
    {
        public string Children { get; set; }
    }

    public class Media
    {
        public string Url { get; set; }
    }

    }