目的:
本文将介绍Blazor工程结构相关内容,希望有助于开发者选择合适的工程类型和设计架构;
开发工具:VS2022 框架:.net 6.0
工程创建:
Blazor工程在新建的时候有两种选择:
两者的区别在于实现方式不同,可参考下面链接,说得比较细:
Hello Blazor:(4)终于有人把Blazor WebAssembly和Blazor Server的区别讲清楚了! - 飞云君的文章 - 知乎 zhuanlan.zhihu.com/p/391305795
对于浅表的使用来讲,两者区别没有那么大,主要以下几点:
- 项目文件结构
Blazor WebAssembly工程的文件结构:
Blazor Server工程的文件结构:
很像是吧?事实上也没有太多不一样,该有的都有,就是位置可能稍微有差异,对使用影响不大;
- 直接支持的功能类
如在Blazor WebAssembly工程中不直接支持使用TCPclient或UDPclient等网络类、不支持Thread线程等。Blazor Server工程则没有此类限制;
其他区别也有,比如WebAssembly工程可在程序关闭的情况下网页依然存在,而server工程会进入连接失败的状态等。但是因为对于开发工作或使用来讲影响也不大,就不细说了,有兴趣可参考上面文章;
另外还有一种工程创建方式是在创建Blazor WebAssembly工程过程中的以下页面,勾选“ASP.NET Core托管”复选框,如下图:
这样创建的工程长这样:
这实际上是三个工程,分别是client、server和shard。
看名字大概能知道,client工程属于前端网页,等同于Blazor WebAssembly;
server工程属于一个小后端,可用于接收前端网页发来的简单http请求等,再执行其他操作,其功能和Blazor Server基本相同;
shard工程属于公共类,就是这里边的class可以给client用也可以给server用。但是这里有个坑,就是shard内的类看上去是共有的,但其实不是,它只提供模板。加入其中存在实例化对象的话,该对象也是分别属于client和server的,尽管他们都能访问,但是实际上是两份对象。换句话说,shard内声明某类,等于在client中声明某类再在server中声明某类。
工程结构
本文将基于ASP.NET Core托管的Blazor WebAssembly工程,讲解常用文件结构;
Blazor 组件位置:
Blazor组件包括三大类,默认分别位于client工程的Page和Shared文件夹中:
- 布局组件:MainLayout.razor(自带,可自定义)
- 页面组件:Index.razor(自带,可自定义)
- 控件组件:SurveyPrompt.razor(自带,可自定义)
当开发自定义组件时可参考自带组件,不一定非放在默认的文件夹中,位置随意,不过记得在Imports.razor文件中添加全局引用,否则会找不到。该文件已经默认存在Page和Shared文件夹路径的引用;
有关组件的详细介绍参考另一篇文章:------------
资源文件位置:
资源文件放在wwwroot路径下,如下图
包含CSS文件、字体文件以及图片资源文件都放在这,因为你在尝试添加资源文件路径的时候,它会默认以wwwroot为根路径,如:
以上就是Blazor工程的大致结构。