上一节我们通过程序动态创建了分类树,只是数据仍然不是从数据库中读出来的,这节我们继续推进这个目标。

Blazor的WASM方式,与Server方式是不同的。Server方式是运行在服务端,所以直接可以从数据库中取数据;而WASM本质上是运行在客户端的,如果直接从数据库中取数据,那势必要把数据库端口开放,这在互联网上就是致命的。各种黑客工具瞬间就可以把你的服务器搞垮。所以,WASM的方式与MVC方式基本相似,需要借助一个Web接口来实现目的,一般来讲,我们把这个接口称为WebAPI。通过调用WebAPI的不同接口,可以返回不同的字符串,然后WASM处理这些字符串,转换成我们需要的数据,再做进一步的处理。

明白了原理,所以接下来我们还需要再创建一个WebAPI的项目。有同学可能有点头大了,这么简单的一个小功能,要创建这么多的项目,我都搞混了。

为了让同学们更加明晰地了解各个项目的作用,我大概画了一个架构简图:

asp.net webapi 安全配置(C.NET5)(1)

其中第一阶段灰色部分,这个是底层的基础,我们已经完成了;

我们现在正在做第二阶段,Diary.Web.Blazor.WASM和Diary.WebAPI就是我们这个阶段要做的内容,这个做好了就可以为下个阶段真正的跨平台Diary.MAUI打基础了;

之所以感到复杂,是因为我想借用这个小项目来体现C#的无所不能,这个小项目能完成了,跨平台的顶层结构设计能力我们就已经基本具备了,以后即便是做大项目,无非就是根据需求解决具体的解释问题而已。

创建WebAPI项目

创建项目的流程我们应该很熟悉了,选ASP.NET Core Web API项目

asp.net webapi 安全配置(C.NET5)(2)

我们可以看到,这个WebAPI项目就是跨平台的,也就是说,我们未来的WebAPI服务是可以跨平台运行的,客户端用到是浏览器,也是跨平台的。所以如果不考虑原生,基于浏览器的跨平台用C#开发前后端都是没有任何问题的。

asp.net webapi 安全配置(C.NET5)(3)

项目名称我们命名为Diary.WebAPI,然后下一步。

asp.net webapi 安全配置(C.NET5)(4)

勾掉那两个选项,因为我都不需要。然后继续创建。

asp.net webapi 安全配置(C.NET5)(5)

创建成功后,将Diary.WebAPI设为启动项目,然后按F5运行,浏览器可以看到下面的画面:

asp.net webapi 安全配置(C.NET5)(6)

这样就是成功了。

创建接口

我们注意到,创建好的项目,给出的示例是http://localhost:5187/weatherforecast,其中localhost就是本地主机,:5187就是端口号,weatherforecast就是一个接口了,那这个接口是如何定义的呢?

我们还是用观察法。这个项目非常简单,我们很快就可以锁定两个文件:Controller目录下的WeatherForecastController.cs,还有根目录下的WeatherForecast.cs。

asp.net webapi 安全配置(C.NET5)(7)

根目录下的我们打开发现就是数据的实体定义,所以就是Controller目录下的WeatherForecastController.cs了。我们看下内容:

asp.net webapi 安全配置(C.NET5)(8)

除去数据和日志的处理,关键的地方只有红框的那三处,我们姑且不去管它具体是什么含义,我们先照葫芦画瓢模仿它创建一个新的api.cs文件:

asp.net webapi 安全配置(C.NET5)(9)

然后我们尝试着编译,通过。那么运行呢,也没问题。把网址变成http://localhost:5187/api呢?神奇的一幕发生了:

asp.net webapi 安全配置(C.NET5)(10)

这不就是我在Get函数中返回的hello吗?我们回过头来看那三个关键点的含义:

在类、函数前加[]的,就是属性的意思,类属性、函数属性等等。

[ApiController],类属性。说实话我对这个也一知半解,大概看了下微软的官方文档,初步理解就是有了这个属性,可以自动帮你处理一些错误,比如400之类的,而不需要你在函数中自己再处理了等等;我是个实用主义者,精力有限,对项目功能没有实质影响的我就没兴趣研究了;

[Route("[controller]")],类属性。这个的作用是当你在浏览器地址输入api时,它会自动给你指向到你定义的这个api这个类,这就是所谓的路由。以我的知识理解就是根据不同的网址规则进行重定向,这种规则可以自己指定。

[HttpGet] ,函数属性。这个意思就很明显了,就是让这个函数支持Get,如果改成[HttpGet, HttpPost] 就是既支持Get,又支持Post。

以上定义我觉得就是增加编码便利性的一种方式,了解了知道怎么用了就好。

返回分类数据

接下来,我们就实现把分类树的数据以web接口到形式返回。

对web接口到转换,目前最流行的方式就是json格式。以前xml方式流行过,相比xml,json的优势就是在易读性和体积上取得了很好的平衡,xml太臃肿了。

json转换的思路:

json相关的类库有很多,我一般习惯用NewtonsoftJson,nuget下载量达到了1.38G,也是够恐怖的。

asp.net webapi 安全配置(C.NET5)(11)

安装好之后,我们继续添加项目引用:Diary.BAL、Diary.Model到Diary.WebAPI中:

asp.net webapi 安全配置(C.NET5)(12)

然后,在api.cs点Get函数中这样写:

public string Get() { List<Model.Category> categories = Model.Category.get_test(); return Newtonsoft.Json.JsonConvert.SerializeObject(categories); }

Newtonsoft.Json.JsonConvert.SerializeObject的作用,就是可以把任何的对象转换为json字串。运行结果如下:

asp.net webapi 安全配置(C.NET5)(13)

这一步,我们已经可以通过WebAPI从服务器获取数据了,那接下来我们需要在Diary.Web.Blazor.WASM中请求这些数据,然后解析到分类树。

解析分类数据

我们在Diary.Web.Blazor.WASM项目中的Index.razor文件中,只需要把OnInitializedAsync()函数中的

List<Model.Category> categories = Model.Category.get_test();

换成

string url = string.Format("http://localhost:5187/api"); string category_data = await Http.GetStringAsync(url); List<Model.Category> categories = Newtonsoft.Json.JsonConvert.DeserializeObject<List<Model.Category>>(category_data);

就可以了,如下图:

asp.net webapi 安全配置(C.NET5)(14)

其中http://localhost:5187/就是WebAPI的服务器地址,这里为了方便测试,我暂时写死在这里。

Http则是声明的一个HttpClient的变量,专门用来做http请求。在Index.razor页面前面加上这样一句就可以使用了:

asp.net webapi 安全配置(C.NET5)(15)

同样需要把Newtonsoft.Json加到依赖库中,否则无法编译通过。然后我们把当前项目切换为Diary.Web.Blazor.WASM。

可是当我们按F5运行的时候,却得到这样的结果:

asp.net webapi 安全配置(C.NET5)(16)

出错了。我们通过VS的错误输出界面,注意到了出错的行号。

asp.net webapi 安全配置(C.NET5)(17)

结合代码分析,这个原因很简单,因为页面初始化需要从WebAPI中请求数据,但是WebAPI现在是关闭的,无法访问。所以我们要先把WebAPI服务开启。

这里我分享一个便捷的方式,在Diary.WebAPI中创建一个index.html的文件,然后在解决方案视图中,右键这个文件,在浏览器中查看(....)。

asp.net webapi 安全配置(C.NET5)(18)

这样就会自动开启一个WebAPI的服务了。开启后,系统任务栏右下有查看网站的地方。

asp.net webapi 安全配置(C.NET5)(19)

然后我们满怀信心再来运行程序的时候,仍然得到了相同的错误,仍然发生在相同的地方。也就是说,连获取数据都不行,可是在浏览器中明明是能访问的啊。

为了进一步查明原因,我们打开浏览器的开发工具,跟踪下网络包,看看问题到底出在了哪里。我用的是Edge,右键->检查,然后切换到网络标签。

asp.net webapi 安全配置(C.NET5)(20)

再次刷新页面

asp.net webapi 安全配置(C.NET5)(21)

我们看到了一个红色的错误,正是我们要请求的api,状态是CORS错误。那什么是CORS呢?就是跨域请求,WebAPI的主机是localhost:5187,Blazor.WASM的主机是localhost:27457,端口不同,所以出现了跨域访问的问题。

那怎么来解决呢?谁限制的就找谁嘛,网上寻找答案,具体过程就不说了,直接上代码:

asp.net webapi 安全配置(C.NET5)(22)

在WebAPI项目中的Startup.cs文件,分别加入红框内的两处代码。允许所有的Method、允许所有的Origin、允许所有的Header。修改编译后重新开启WebAPI服务。然后再次运行Blazor.WASM,分类树再次呈现。

asp.net webapi 安全配置(C.NET5)(23)

这次我们实现了由客户端向服务端请求,较我们的目标更近了一步。

接下来要实现的功能是:通过WebAPI从数据库中获取。实现了这步,我们就把由数据库到浏览器的数据流向打通了,相当于武功中的任脉;而由数据由浏览器到数据库,相当于武功中的督脉。打通了任督二脉,我们的系统也就架构就基本完成了。

如何来做,我们下节继续。

----------------------------------------------------

本教程项目源码已作为开源项目加入到Gitee,代码内容会随教程实时更新,大家有兴趣的话可以关注我,以获得最及时的更新。私信:

私人日记 可以获取相关链接;

大家阅读过程中有哪些看不懂或未尽兴的地方,可以在评论区留言,我会先记下来在后续的教程中找机会再说。

教程有帮助的话请大家帮忙关注、转发、扩散,能不能开专栏还需要你们的支持!

,