.NET前后分离解决方案

1. .NET前后分离解决方案

前言：一篇介绍.net前后分离解决方案的文章

业界的共识一直都是前后端分离开发，就算是不懂技术的小白，最先理解的也是这样，但分离的同时就要考虑部署的问题。以及前后端工程师开发流程中的相互牵制问题，毕竟这些问题都会使得整体开发效率降低。而使用.NET进行客户端 Web 开发,就可以在服务器和客户端之间共享应用逻辑。算是一个很好的解决方案，但是具体一个框架怎么就成为了前后分离解决方案的呢？让我们展开来说：

1.1. 什么是Blazor？

说解决方案之前，要先说一个东西，Blazor，那什么是Blazor？又为什么要说Blazor呢？

微软文档给出的定义是：

Blazor是一个用.NET构建交互式客户端web UI的框架。

近两年，有越来越多的开发知道Blazor，去了解Blazor，一个用来构建客户端web UI的“框架”，和别的构建web UI的客户端框架有什么差异？了解之后，你会不会去选择使用？Blazor和.NET又有什么关系呢？

blazor是一个微软推出的基于webassembly和C#(面向对象) 以及F#(面向函数)的前端框架，是.NET最新的前端技术，类似vue 、react 、anglar的单页前端框架，只是他不再使用javascrip或typescript，而是使用血统更优的C#来编写页面逻辑，呈现交互的效果，因此我们可以使用静态类型检查、泛型、Linq、async/await、以及美味的语法糖等所有C#语言的优秀特性。根据以上的解释，Blazor和.NET的关系就是，Blazor是基于C#和.NET构建SPA的WebUI框架，而且Blazor是支持双向绑定的，也就是不需要页面刷新使服务端的重新渲染，而是实现了局部渲染，使Blazor能实现现代前端框架的效果。使.NET代码和Razor语法来实现组件。Blazor组件可以处理UI事件，绑定到用户输入并有效地呈现UI更新。如果你喜欢.NET和C#，我想你一定会爱上Blazor。

1.2. Blazor 的功能

blazor本身是自带了强大的功能的:

1.2.1. 依赖注入

下面的示例展示了如何使用 @inject，将实现 Services.IDataAccess 的服务注入组件的 DataRepository 属性中 ：

@page "/customer-list"
@inject IDataAccess DataRepository

@if (customers != null)
{
    <ul>
        @foreach (var customer in customers)
        {
            <li>@customer.FirstName @customer.LastName</li>
        }
    </ul>
}

@code {
    private IReadOnlyList<Customer> customers;

    protected override async Task OnInitializedAsync()
    {
        customers = await DataRepository.GetAllCustomersAsync();
    }

    private class Customer
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }

    private interface IDataAccess
    {
        public Task<IReadOnlyList<Customer>> GetAllCustomersAsync();
    }
}

1.2.2. 组件

Blazor应用基于组件。 Blazor 中的组件是指 UI 元素，例如页面、对话框或数据输入窗体。

组件类通常以 Razor 标记页（文件扩展名为 .razor）的形式编写。 Razor 是一种语法，用于将 HTML 标记与专为提高开发人员工作效率而设计的 C# 代码结合在一起。 借助 Razor，可使用 Visual Studio 中的 IntelliSense 编程支持在同一文件中的 HTML 标记与 C# 之间切换。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mMdC