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

{    "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);    }}

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") });