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 GetForecastAsync(string softName)
        {
            return Task.Factory.StartNew(() =>
            {
                List fileInfoDatas = new List();

                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();
        }

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

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

    文件管理
    
        
    


    

             

                 

                     
                          开发类
                     
                 
                 

                     
                          办公类
                     
                 
                 

                     
                         系统类
                     
                 
                 

                     
                          工具类
                     
                 
             
         

@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#全栈开发变得更加容易。