我的『MVP.Blazor』快速创建与部署

dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0

├── launchSettings.json    // 配置文件（注意多了一个inspectUri的调试节点）
├── wwwroot // 静态文件夹
├── Pages // 页面文件夹
│   ├── Counter.razor // 页面内计数功能
│   ├── FetchData.razor // 远程获取数据功能
│   └── Index.razor // 网站首页
├── Shared // 项目公共组件库
│   ├── MainLayout.razor // 主要布局组件
│   ├── NavMenu.razor // 导航条组件
│   └── SurveyPrompt.razor // 提示组件
├── _Imports.razor // 项目常用引用导入
├── App.razor // 项目根文件
└── Program.cs // 项目主入口

{
    "message": "Hello from config!"
}

@page "/"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration

<h1>Configuration example</h1>

<p>@Configuration["message"]</p>

// 定义路由
@page "/fetchdata"

// 依赖注入对应的服务（注意命名空间System.Net.Http）
@inject HttpClient Http

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

// 渲染过程
@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

// c# 代码
@code {
    // 定义data变量
    private WeatherForecast[] forecasts;

    // 重写初始化函数，类似vue的 mounted
    protected override async Task OnInitializedAsync()
    {
        // 异步获取远程api接口数据
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }

    // 定义model 
    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

GetFromJsonAsync

await Http.GetJsonAsync<MessageModel<PageModel<BlogArticle>>>
("/api/Blog?page=1&bcategory=MVP_ids4_2020&intPageSize=20");

http://apk.neters.club/api/Blog/GoUrl?id=@(bID)

// 设计html样式
<article class="article-post-summary">
    <div class="post-summary-box">
        <h4 class="post-summary-title">
            <a href="http://apk.neters.club/api/Blog/GoUrl?id=@(bID)">
                @btitle
            </a>
        </h4>
        // 参数的绑定
        <p class="post-summary-text">@bcontent</p>

        <div class="post-date-box d-md-block">
            <div class="post-date-day">
                @(bCreateTime.ToString("yyyy-MM-dd"))  (Reader：@btraffic)
            </div>
        </div>
    </div>
</article>
<div class="mb-4 d-md-block"></div>
<hr class="d-none d-md-block">

// 这里也可以写css

// 这里定义逻辑和data，是不是和vue的组件很像
@code {
    // Demonstrates how a parent component can supply parameters
    [Parameter]
    public int bID { get; set; }
    [Parameter]
    public string btitle { get; set; }
    [Parameter]
    public string bcontent { get; set; }
    [Parameter]
    public DateTime bCreateTime { get; set; }
    [Parameter]
    public int btraffic { get; set; }
}

   @if (_blogs != null)
   {
       foreach (var item in _blogs.response.data)
       {
           <ArtBody bID="@item.bID" btitle="@item.btitle" bcontent="@item.bcontent" bCreateTime="@item.bCreateTime" btraffic="@item.btraffic" />
       }
   }
   else
   {
       <p><em>Loading...</em></p>
   }

<button class="btn btn-primary"  @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount =  0;
    // 定义事件方法
    private void IncrementCount()
    { 
        currentCount++;
    }
}

 builder.Services.AddBaseAddressHttpClient();
 builder.Services.AddTransient(sp => new HttpClient 
 { BaseAddress = new Uri("http://apk.neters.club") });