上一节我们通过程序动态创建了分类树，只是数据仍然不是从数据库中读出来的，这节我们继续推进这个目标。
Blazor的WASM方式，与Server方式是不同的。Server方式是运行在服务端，所以直接可以从数据库中取数据；而WASM本质上是运行在客户端的，如果直接从数据库中取数据，那势必要把数据库端口开放，这在互联网上就是致命的。各种黑客工具瞬间就可以把你的服务器搞垮。所以，WASM的方式与MVC方式基本相似，需要借助一个Web接口来实现目的，一般来讲，我们把这个接口称为WebAPI。通过调用WebAPI的不同接口，可以返回不同的字符串，然后WASM处理这些字符串，转换成我们需要的数据，再做进一步的处理。
明白了原理，所以接下来我们还需要再创建一个WebAPI的项目。有同学可能有点头大了，这么简单的一个小功能，要创建这么多的项目，我都搞混了。
为了让同学们更加明晰地了解各个项目的作用，我大概画了一个架构简图：
其中第一阶段灰色部分，这个是底层的基础，我们已经完成了；
我们现在正在做第二阶段，Diary.Web.Blazor.WASM和Diary.WebAPI就是我们这个阶段要做的内容，这个做好了就可以为下个阶段真正的跨平台Diary.MAUI打基础了；
之所以感到复杂，是因为我想借用这个小项目来体现C#的无所不能，这个小项目能完成了，跨平台的顶层结构设计能力我们就已经基本具备了，以后即便是做大项目，无非就是根据需求解决具体的解释问题而已。
创建WebAPI项目
创建项目的流程我们应该很熟悉了，选ASP.NET Core Web API项目
我们可以看到，这个WebAPI项目就是跨平台的，也就是说，我们未来的WebAPI服务是可以跨平台运行的，客户端用到是浏览器，也是跨平台的。所以如果不考虑原生，基于浏览器的跨平台用C#开发前后端都是没有任何问题的。
项目名称我们命名为Diary.WebAPI，然后下一步。
勾掉那两个选项，因为我都不需要。然后继续创建。
创建成功后，将Diary.WebAPI设为启动项目，然后按F5运行，浏览器可以看到下面的画面：
这样就是成功了。
创建接口
我们注意到，创建好的项目，给出的示例是http://localhost:5187/weatherforecast，其中localhost就是本地主机，:5187就是端口号，weatherforecast就是一个接口了，那这个接口是如何定义的呢？
我们还是用观察法。这个项目非常简单，我们很快就可以锁定两个文件：Controller目录下的WeatherForecastController.cs，还有根目录下的WeatherForecast.cs。
根目录下的我们打开发现就是数据的实体定义，所以就是Controller目录下的WeatherForecastController.cs了。我们看下内容：
除去数据和日志的处理，关键的地方只有红框的那三处，我们姑且不去管它具体是什么含义，我们先照葫芦画瓢模仿它创建一个新的api.cs文件：
然后我们尝试着编译，通过。那么运行呢，也没问题。把网址变成http://localhost:5187/api呢？神奇的一幕发生了：
这不就是我在Get函数中返回的hello吗？我们回过头来看那三个关键点的含义：
在类、函数前加[]的，就是属性的意思，类属性、函数属性等等。
[ApiController]，类属性。说实话我对这个也一知半解，大概看了下微软的官方文档，初步理解就是有了这个属性，可以自动帮你处理一些错误，比如400之类的，而不需要你在函数中自己再处理了等等；我是个实用主义者，精力有限，对项目功能没有实质影响的我就没兴趣研究了；
[Route("[controller]")]，类属性。这个的作用是当你在浏览器地址输入api时，它会自动给你指向到你定义的这个api这个类，这就是所谓的路由。以我的知识理解就是根据不同的网址规则进行重定向，这种规则可以自己指定。
[HttpGet] ，函数属性。这个意思就很明显了，就是让这个函数支持Get，如果改成[HttpGet, HttpPost] 就是既支持Get，又支持Post。
以上定义我觉得就是增加编码便利性的一种方式，了解了知道怎么用了就好。
返回分类数据
接下来，我们就实现把分类树的数据以web接口到形式返回。
对web接口到转换，目前最流行的方式就是json格式。以前xml方式流行过，相比xml，json的优势就是在易读性和体积上取得了很好的平衡，xml太臃肿了。
json转换的思路：
- 服务端WebAPI中读取数据，然后转换成json字符；
- 客户端将json字符转换成数据，然后使用；
json相关的类库有很多，我一般习惯用NewtonsoftJson，nuget下载量达到了1.38G，也是够恐怖的。
安装好之后，我们继续添加项目引用：Diary.BAL、Diary.Model到Diary.WebAPI中：
然后，在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字串。运行结果如下：
这一步，我们已经可以通过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);就可以了，如下图：
其中http://localhost:5187/就是WebAPI的服务器地址，这里为了方便测试，我暂时写死在这里。
Http则是声明的一个HttpClient的变量，专门用来做http请求。在Index.razor页面前面加上这样一句就可以使用了：
同样需要把Newtonsoft.Json加到依赖库中，否则无法编译通过。然后我们把当前项目切换为Diary.Web.Blazor.WASM。
可是当我们按F5运行的时候，却得到这样的结果：
出错了。我们通过VS的错误输出界面，注意到了出错的行号。
结合代码分析，这个原因很简单，因为页面初始化需要从WebAPI中请求数据，但是WebAPI现在是关闭的，无法访问。所以我们要先把WebAPI服务开启。
这里我分享一个便捷的方式，在Diary.WebAPI中创建一个index.html的文件，然后在解决方案视图中，右键这个文件，在浏览器中查看(....)。
这样就会自动开启一个WebAPI的服务了。开启后，系统任务栏右下有查看网站的地方。
然后我们满怀信心再来运行程序的时候，仍然得到了相同的错误，仍然发生在相同的地方。也就是说，连获取数据都不行，可是在浏览器中明明是能访问的啊。
为了进一步查明原因，我们打开浏览器的开发工具，跟踪下网络包，看看问题到底出在了哪里。我用的是Edge，右键->检查，然后切换到网络标签。
再次刷新页面
我们看到了一个红色的错误，正是我们要请求的api，状态是CORS错误。那什么是CORS呢？就是跨域请求，WebAPI的主机是localhost:5187，Blazor.WASM的主机是localhost:27457，端口不同，所以出现了跨域访问的问题。
那怎么来解决呢？谁限制的就找谁嘛，网上寻找答案，具体过程就不说了，直接上代码：
在WebAPI项目中的Startup.cs文件，分别加入红框内的两处代码。允许所有的Method、允许所有的Origin、允许所有的Header。修改编译后重新开启WebAPI服务。然后再次运行Blazor.WASM，分类树再次呈现。
这次我们实现了由客户端向服务端请求，较我们的目标更近了一步。
接下来要实现的功能是：通过WebAPI从数据库中获取。实现了这步，我们就把由数据库到浏览器的数据流向打通了，相当于武功中的任脉；而由数据由浏览器到数据库，相当于武功中的督脉。打通了任督二脉，我们的系统也就架构就基本完成了。
如何来做，我们下节继续。
----------------------------------------------------
本教程项目源码已作为开源项目加入到Gitee，代码内容会随教程实时更新，大家有兴趣的话可以关注我，以获得最及时的更新。私信：
私人日记 可以获取相关链接；
大家阅读过程中有哪些看不懂或未尽兴的地方，可以在评论区留言，我会先记下来在后续的教程中找机会再说。
教程有帮助的话请大家帮忙关注、转发、扩散，能不能开专栏还需要你们的支持！
