Blazor Server开发技术总结

聂季同
2023-12-01

1.注意:Blazor是客户端技术,是Razor和SignalR技术的结合。优点是让C#后端开发人员不用懂即可完成前台功能。

2.Blazor Server实现了前后台一体化的解决方案,简化了部署,方便调试。目前主流的开发方式是WebAPI+前端框架,前后端的程序需要分别调试和部署,通过json配置文件实现前后端的融合。

3.因为前后台设计都是用C#语言,很多初学者都会碰到一个坑——分不清前后台代码。提醒初学者:razor组件附属的类或者组件内部@code内的代码都是前台的内容,如何想访问后台可以在页内注入后台服务或者用异步的方式访问。

4.后台访问代码如下:

如:

1.) 定义类systemservices.cs

using Furion.DependencyInjection;
using Furion.DynamicApiController;
using THGISServer.Core;
using System.Text.Json;
using System.Data;
namespace THGISServer.Application;
public class SystemService : ISystemService, IDynamicApiController, ITransient
{
    private readonly IRepository<User> _userRepository;
    public SystemService(IRepository<User> userRepository) {

        _userRepository=userRepository;
    }
    public string GetDescription()
    {
        return "自主可控、简洁高效、跨平台的轻量级GIS平台。";
    }
    public string GetUsers()
    {
        var users = "select * from User".SqlQuery<User>();
        var tt = JsonSerializer.Serialize(users);
        //var tt=JsonSerializer.Serialize<DataTable>(dataTable);
        return tt;
    }
}
2.) 定义接口ISystemService.cs


namespace THGISServer.Application;
public interface ISystemService
{
    string GetDescription();
    string GetUsers();
}
3.) 定义razor组件 test.razor

@using THGISServer.Application;
@using System.Text.Json;
@inject ISystemService systemService
<div class="table-users scroll">
<Table TItem="SecurityDto" Items="@systemService.GetUsers()">
    <TableColumns>
        <TableColumn @bind-Field="@context.Name" />
        <TableColumn @bind-Field="@context.Account" />
    </TableColumns>
</Table>
</div>

5.razor组件访问webapi的方法:IHttpClientFactory

代码:

@using System.Diagnostics.CodeAnalysis;
@using THGISServer.Application;
@code {
    [NotNull]
    private IList<SecurityDto> Items { get; set; }
    [Inject]
    [NotNull]
    private IHttpClientFactory HttpClientFactory { get; set; }
    protected override async Task OnInitializedAsync()
    {
        var httpClient = HttpClientFactory.CreateClient();
        string url = Navigation.BaseUri+"api/rabc/auth";
        // var response=await httpClient.GetFromJsonAsync<List<SecurityDto>>(url);
        var response = await httpClient.GetStringAsync(url);
        }

}

 类似资料: