Blazor 調用api

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

首先，創建一個API項目，打開vs 2019（Blazor聽說只有2019可以玩，2017沒試過）

 

 選擇項目路徑和設置項目名稱

 

選擇項目模板為API，我這里選擇的.net core 版本為3.1

 

 

 然后你就創建好了一個API項目，項目默認有一個小案例，直接啟動項目就可以

 

啟動效果如下

 

 然后創建Blazor項目，項目選擇Blazor應用

 

輸入項目名稱和設置項目所屬目錄，然后點擊創建

 

 選擇項目模板，Blazor WebAssmbly App 是需要另外安裝的（不知道怎么安裝的可以看我其他博客，這里就不列出來了）

選擇Blazor WebAssmbly App

 

 

 

然后就會得到一個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組件，點擊添加

 

 會得到一個空頁面

然后將這個頁面的代碼改成如下就可以了

@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=*