Blazor 调用api - 爱码网

Blazor就不多介绍了，不知道的人可以去看看这篇博客 https://www.cnblogs.com/ZaraNet/p/11924541.html

首先，创建一个API项目，打开vs 2019（Blazor听说只有2019可以玩，2017没试过）

Blazor 调用api

选择项目路径和设置项目名称

Blazor 调用api

选择项目模板为API，我这里选择的.net core 版本为3.1

Blazor 调用api

然后你就创建好了一个API项目，项目默认有一个小案例，直接启动项目就可以

Blazor 调用api

启动效果如下 Blazor 调用api

然后创建Blazor项目，项目选择Blazor应用

Blazor 调用api

输入项目名称和设置项目所属目录，然后点击创建

Blazor 调用api

选择项目模板，Blazor WebAssmbly App 是需要另外安装的（不知道怎么安装的可以看我其他博客，这里就不列出来了）

选择Blazor WebAssmbly App

Blazor 调用api

然后就会得到一个Blazor项目了，直接点启动会有几个案例，这里就不介绍案例了，直奔主题，调用API项目

首先在项目的根目录下创建一个文件夹，命名为Models，用来放置数据实体模型

在里面新建一个test类

代码如下：

public class test
    {

        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public int TemperatureF{ get; set; }

        public string Summary { get; set; }
    }

然后在Pages目录上右击》添加》新建项，选择Blazor组件，点击添加

Blazor 调用api

会得到一个空页面

Blazor 调用api

然后将这个页面的代码改成如下就可以了

@page "/test" 
@using System.Net.Http
@inject HttpClient Http
<h3>Component</h3>
@if (list == null)
{
    <h1>空</h1>
}
else
{
    @foreach (BlazorApp2.Models.test t in list)
    {
        <h1>@t.Date</h1>
    }
}

@code {
    private List<BlazorApp2.Models.test> list { get; set; }
    protected override async Task OnInitializedAsync()
    {
        list = await Http.GetJsonAsync<List<BlazorApp2.Models.test>>("https://localhost:5001/weatherforecast?access-control-allow-origin=*");
    }
}

然后运行Blazor项目输入：项目地址/test 就能显示你访问api 的值了

API地址中，需要添加

?access-control-allow-origin=*