?

最近一直在錄Blog.Core相關(guān)的操作視頻，也沒有研究過什么新的東西，公司也各種項(xiàng)目迭代，特別是從Fwk遷移到NetCore，真的是不是一個(gè)容易的事，閑的時(shí)候，為了歇歇腦子，就抽出時(shí)間簡單看了看又有哪些新技術(shù)，最近聊的挺多的就是Blazor了吧，所以我也看了看，這里聲明一點(diǎn)，我并不打算出一個(gè)完整的Blazor系列教程（最近老有人讓我出系列教程????），只是走馬觀花的過一遍，看看這個(gè)到底是一個(gè)什么東西，感興趣的自己可以去深入學(xué)習(xí)下，畢竟現(xiàn)在的資料還不是最多的，可以鍛煉下自己，而且也算是一個(gè)吃螃蟹的人，畢竟有歷史價(jià)值，好啦，廢話不多說，直接開整。

1、這個(gè)項(xiàng)目的立項(xiàng)初衷

可能還有一部分小伙伴不太了解，我年初申請上了微軟的MVP，我也沒有過多的宣傳，畢竟這只是一個(gè)鼓勵(lì)而已，平時(shí)該解答的我還是會解答。MVP呢，每次只有一年的有效期，所以每個(gè)新的一年都還需要風(fēng)雨兼程的往前走，還是需要傳遞知識，那就少不了將自己做過的，寫過的，分享過的東西給列出來（注意：這里可能有轉(zhuǎn)載別人的文章），作為一個(gè)展示，所以呢，我就想著自己寫個(gè)小的Portal吧，把自己整理的東西給放出來，多半是微信公眾號的，也可以給大家做一個(gè)方便查找和學(xué)習(xí)的列表。

但是在項(xiàng)目選型的時(shí)候，我猶豫了好幾天，用什么呢，ASP.NET Core MVC么，其實(shí)我已經(jīng)寫了好多個(gè)了，公司的小項(xiàng)目也一直在使用，所以不想寫了，無非就是增刪改查。

前后端分離項(xiàng)目？也寫的吐了，不想學(xué)React，我看國內(nèi)外包企業(yè)用的比較多，但是我還是想結(jié)合下我的Blog.Core項(xiàng)目，畢竟已經(jīng)封裝的很好了，可以做為一個(gè)后端的資源服務(wù)器來使用。

與此同時(shí)，看到有人推送了多個(gè)關(guān)于微軟的Blazor框架的相關(guān)內(nèi)容，號稱可以使用C#來寫前端組件，個(gè)人表示很好奇。

基于以上三點(diǎn)呢，就選用了（Blazor+Blog.Core）的架構(gòu)，你也可以把它理解成一個(gè)前后端分離的項(xiàng)目，因?yàn)槲矣玫氖莣asm的客戶端，用Blog.Core提供資源服務(wù)器，兩者是分開部署的：

http://mvp.neters.club（這個(gè)就是客戶端地址）

https://github.com/anjoy8/Blog.MVP.Blazor（開源地址）

（首次加載奇慢，還在研究，文末有說到）

目前這個(gè)只是一個(gè)小的版本，當(dāng)然后邊還是有很多問題的，可能會一直維護(hù)，慢慢添加，好啦，下邊正式開始。

2、開發(fā)環(huán)境準(zhǔn)備

1、更新工具

目前BlazorWebAssembly版本是3.2.0Previ，如果要使用它的話，必須要安裝.NET Core3.1.2+的SDK，注意小版本也要2以上。

我的系統(tǒng)環(huán)境是：

VS 2019 16.4.0、.NET Core SDK 3.1.3

如果你想調(diào)試blazor的話，需要更新vs2019到16.6+的最新版本，

更新到16.6+后，不僅可以調(diào)試Blazor，它也自帶了相應(yīng)的開發(fā)模板，如果你現(xiàn)在還不想把自己的vs2019升級的話，只能手動先安裝下模板了。

截至發(fā)稿，我已經(jīng)升級到vs2019?16.6.1了。?

2、下載模板

使用前，需要安裝對應(yīng)的模板

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

安裝完成后，可以看到我們的電腦里有模板：

然后我們可以打開VS2019，可以看到已經(jīng)有對應(yīng)的快捷入口：

點(diǎn)擊創(chuàng)建：

可以看到，和我們的ASP.NetCore的webapi項(xiàng)目還是很像的，那到了這里，我們的項(xiàng)目環(huán)境就正式的搭建完成，下一步開始創(chuàng)建Demo了。

請注意：這里我們使用的是wasm客戶端項(xiàng)目，不是server項(xiàng)目，從名字上也能明白兩個(gè)對應(yīng)的職能是什么，關(guān)于server的使用，我以后會說到。

3、創(chuàng)建一個(gè)默認(rèn)的示例項(xiàng)目

通過上邊的步驟，我們創(chuàng)建了一個(gè)wasm的初始化示例項(xiàng)目，結(jié)構(gòu)如下：

├──?launchSettings.json????//?配置文件（注意多了一個(gè)inspectUri的調(diào)試節(jié)點(diǎn)） ├──?wwwroot?//?靜態(tài)文件夾 ├── Pages // 頁面文件夾 │ ├── Counter.razor // 頁面內(nèi)計(jì)數(shù)功能 │???├──?FetchData.razor?//?遠(yuǎn)程獲取數(shù)據(jù)功能 │???└──?Index.razor?//?網(wǎng)站首頁 ├──?Shared?//?項(xiàng)目公共組件庫 │ ├── MainLayout.razor // 主要布局組件 │ ├── NavMenu.razor // 導(dǎo)航條組件 │???└──?SurveyPrompt.razor?//?提示組件 ├──?_Imports.razor?//?項(xiàng)目常用引用導(dǎo)入 ├──?App.razor?//?項(xiàng)目根文件 └── Program.cs // 項(xiàng)目主入口

從上邊的項(xiàng)目結(jié)構(gòu)中，我們基本也能看懂七七八八，當(dāng)然，前提是稍微學(xué)過NetCore或者是MVC的Razor頁面。

添加配置文件

你可以在wwwroot文件夾下，創(chuàng)建appsettings.json文件，然后在razor頁面內(nèi)注入：

{"message": "Hello from config!" } @page "/" @using Microsoft.Extensions.Configuration @inject IConfiguration Configuration<h1>Configuration example</h1><p>@Configuration["message"]</p>

是不是很簡單，可見依賴注入是多么的重要！

那分析完結(jié)構(gòu)，直接運(yùn)行下，看看效果。

F5 查看效果

我們直接執(zhí)行F5，項(xiàng)目是會自動執(zhí)行Build操作的，就像我們之前學(xué)習(xí)vue，執(zhí)行了serve命令后，就能運(yùn)行項(xiàng)目，監(jiān)聽端口了：

過程特別簡單，而且渲染的也很快，具體的渲染邏輯這里不說了，自行研究吧，只要是會vue的話，肯定這個(gè)也能理解。

核心代碼解釋

官方給了三個(gè)例子，我這里簡單說一下獲取數(shù)據(jù)的吧，很簡單，還是mvc的老路子，只不過增加了些MVVM的影子：

// 定義路由 @page "/fetchdata"// 依賴注入對應(yīng)的服務(wù)（注意命名空間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;// 重寫初始化函數(shù)，類似vue的 mountedprotected override async Task OnInitializedAsync(){// 異步獲取遠(yuǎn)程api接口數(shù)據(jù)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);} }

核心的部分我都做了注釋，相信都能看的懂，畢竟我相信，只有netcore學(xué)會了的小伙伴，才回去看blazor，如果netcore都不會，我不建議看。

這里強(qiáng)調(diào)的是，Http信息有兩個(gè)版本，自己看好就行，畢竟不同的版本，對應(yīng)不同的方法：

Microsoft.AspNetCore.Blazor.HttpClientSystem.Net.Http.Json

GetJsonAsync	GetFromJsonAsync
PostJsonAsync	PostAsJsonAsync
PutJsonAsync	PutAsJsonAsync

可能的錯(cuò)誤

開發(fā)中可能會報(bào)錯(cuò)：

好啦，示例項(xiàng)目說完了，那接下來說說我的項(xiàng)目吧。

4、Blog.MVP.Blazor設(shè)計(jì)思路

其實(shí)也不算是設(shè)計(jì)思路，就說下如何做的吧。

1、所用接口

畢竟是辛辛苦苦搭建的Blog.Core項(xiàng)目，所以能用還是盡量用的，而且很巧的是，正好能和我這個(gè)無縫對接，僅僅需要用到博客表BlogArticle即可：

當(dāng)時(shí)正好我做了博客分類bcategory這個(gè)字段，這里可以排上用場，因?yàn)槲也幌牒虰log.Vue項(xiàng)目搞混，所以我新建的分類MVP_xxxx_這種格式，作者字段用的是微信公眾號鏈接，其他的就是很基本的了。

接口1：獲取指定分類的文章：

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

這里很人性化，還可以指定返回類型，無縫對接我們的Blog.Core資源服務(wù)器。

接口2：做頁面跳轉(zhuǎn)，增加閱讀量：

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

因?yàn)槲覀兊牡刂肥峭怄湹刂?#xff0c;而且還是微信文章的地址，如果是微信客戶端外訪問的話，系統(tǒng)是不會記錄閱讀量的，只能我們自己記錄，所以我增加了這個(gè)跳轉(zhuǎn)鏈接，很簡單，自己查看代碼即可。

2、設(shè)計(jì)組件

本來文章頁只需要一個(gè)頁面就行，然后通過參數(shù)傳遞，來實(shí)現(xiàn)不同信息展示，但是我偷懶了，直接多個(gè)頁面，通過路由地址，強(qiáng)行的進(jìn)行分類展示，這樣不好，第一版先這么吧，但是也做了幾個(gè)組件，比如：

// 設(shè)計(jì)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>// 參數(shù)的綁定<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; } }

還是三模塊的形式，HTML-CSS-JS（這里是C#）的模式，是不是和vue的組件設(shè)計(jì)很像，當(dāng)然至于能不能雙向綁定，應(yīng)該是可以的，你可以試試。

3、調(diào)用組件

這個(gè)也很簡單，直接進(jìn)行綁定數(shù)據(jù)即可：

@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++;} }

到了這里，如果你會vue開發(fā)，是不是感覺很blazor真的很像：

無論是數(shù)據(jù)的獲取，

還是組件的定義，

然后是數(shù)據(jù)的綁定，

甚至是渲染的過程

4、綁定資源服務(wù)器地址

我們既然要用http請求，肯定要定義地址，在Program.cs文件中，直接定義：

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

5、最后別忘了跨域配置

這個(gè)是老生常談了，既然是分離，肯定要配置跨域，

我這里使用的是CORS跨域，NGINX部署，暫時(shí)還沒有來得及代理的方式，以后有機(jī)會慢慢研究吧，CORS也是很簡單的，配置后端口號就行了。

6、部署

其實(shí)這個(gè)很簡單的，我們直接publish下我們的項(xiàng)目，就能看到打包好了，但是并沒有我們想象中的項(xiàng)目名稱的的dll，

如果你是IIS部署，那直接路徑設(shè)置這個(gè)publish文件夾即可。

如果是Nginx部署，可以直接指定wwwroot路徑，就像是部署打包好的vue項(xiàng)目一樣。

5、未來的路還是很長的

其實(shí)你看完了文章，會發(fā)現(xiàn)目前還是遇到了很多問題，比如：

1、首次打開太慢了，竟然把dll文件也加載了，我懷疑是我的問題，但是還沒有找到合適的資料，有知道的歡迎告訴我。

2、雖然很像vue，但是操作起來還是沒有vue那么絲滑。
3、感覺還是和IIS很兼容，就像IdentityServer4那樣。

但是！畢竟是一門新興的技術(shù)，取名MVP.Blazor，也是希望能給Blazor一個(gè)好的未來吧，希望未來可期！

總結(jié)

以上是生活随笔為你收集整理的我的『MVP.Blazor』快速创建与部署的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。