Blazor 初体验-----快速搭建文件共享系统

Blazor 这里不多介绍了，请参考微软官方文档。

环境：visual studio 2019 v16.4.2    .Netcore 3.1

1、新建Blazor应用

2、删除默认的官方示例，Data以及page.新建文件model和service,以及文件分类页面

3、FileInfoData.cs

    public class FileInfoData
    {
        public DateTime Date { get; set; }

        public string Name { get; set; }

        public string FilePath { get; set; }

    }

FileInfoService.cs

    public class FileInfoService
    {
        public Task<FileInfoData[]> GetForecastAsync(string softName)
        {
            return Task.Factory.StartNew(() =>
            {
                List<FileInfoData> fileInfoDatas = new List<FileInfoData>();

                string path = Environment.CurrentDirectory + "//Resouses//" + softName;

                if(!Directory.Exists(path))
                    return fileInfoDatas.ToArray();
                var files = Directory.GetFiles(path);
                foreach (var file in files)
                {
                    FileInfo info = new FileInfo(file);
                    FileInfoData fileInfo = new FileInfoData
                    {
                        Date = info.CreationTime,
                        Name = info.Name,
                        FilePath = $"Resouses/{softName}/{info.Name}"
                    };
                    fileInfoDatas.Add(fileInfo);
                }

                return fileInfoDatas.ToArray();
            });
        }
    }

4、打开startup.cs进行服务依赖注入。

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddSingleton<FileInfoService>();
        }

至此，后端代码已完成。不到10分钟吧。接下来开始前端页面设计。

5、首先修改NavMenu.razor --导航菜单名称和链接

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">文件管理</a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

    <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
             <ul class="nav flex-column">
                 <li class="nav-item px-3">
                     <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">
                         <span class="oi oi-home" aria-hidden="true"></span> 开发类
                     </NavLink>
                 </li>
                 <li class="nav-item px-3">
                     <NavLink class="nav-link" href="office">
                         <span class="oi oi-plus" aria-hidden="true"></span> 办公类
                     </NavLink>
                 </li>
                 <li class="nav-item px-3">
                     <NavLink class="nav-link" href="system">
                         <span class="oi oi-list-rich" aria-hidden="true"></span>系统类
                     </NavLink>
                 </li>
                 <li class="nav-item px-3">
                     <NavLink class="nav-link" href="tool">
                         <span class="oi oi-home" aria-hidden="true"></span> 工具类
                     </NavLink>
                 </li>
             </ul>
         </div>

@code {
    private bool collapseNavMenu = true;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

6、编写index.razor默认主页，这里默认页面为开发类文件列表

接下来其他页面和此页面类似。就页面名称和目录名称不同。

修改完后可以F5预览

一切正常，可以发布，后进行IIS部署。当然.netcore 是不能直接IIS部署的，需要下载服务运行时：Windows Hosting Bundle

最新下载链接：https://dotnet.microsoft.com/download/dotnet-core/current/runtime

最后直接部署IIS即可，因为我们是文件下载，需要给与guest读取权限以及目标浏览启用。最终效果：

一切下来不用1小时就搞定了，Blazor的确加快了web的开发效率，加上前端可以断点调试，解决问题也更加方便。依稀记得原来webform时，前端javascript 调试全靠 Alert("")的苦逼时代。希望微软继续对Blazor更新维护，也希望将来Blazor把MAUI也能集成进来，让c#全栈开发变得更加容易。