Dotnet9網站回歸Blazor重構，訪問速度飛快，交互也更便利了！

来源:https://www.cnblogs.com/Dotnet9-com/archive/2023/06/23/17499012.html
-Advertisement-
Play Games

大家好，我是沙漠盡頭的狼。 Dotnet9網站回歸Blazor重構，訪問速度確實飛快，同時用上Blazor的交互能力，站長也同步添加了幾個線上工具，這篇文章分享下Blazor的重構過程，希望對大家網站開發時做技術選型有個參考。 ![](https://img1.dotnet9.com/2023/06 ...


大家好，我是沙漠盡頭的狼。

Dotnet9網站回歸Blazor重構，訪問速度確實飛快，同時用上Blazor的交互能力，站長也同步添加了幾個線上工具，這篇文章分享下Blazor的重構過程，希望對大家網站開發時做技術選型有個參考。

1. 先聊聊Razor Pages

上個版本網站前臺使用的Razor Pages開發，當時選擇這個技術棧主要是為了搜索引擎的SEO優化考慮。

關於MVC和Razor Pages哪個更優， 我們這裡只說說Razor Pages相對的優勢。

首先，Razor Pages相對於MVC來說，更加簡單和直觀。由於Razor Pages將視圖和處理邏輯封裝在同一個頁面中，開發人員可以更容易地理解和維護代碼。對於小型項目或者只有少量頁面的應用來說，Razor Pages可以提供更快的開發速度和更簡潔的代碼結構，這是站長當時從MVC重構成Razor Pages的主要選擇理由。

其次，Razor Pages在SEO（搜索引擎優化）方面具有一定的優勢。由於Razor Pages將視圖和處理邏輯封裝在同一個頁面中，搜索引擎可以更容易地理解和索引頁面的內容。這對於需要更好的搜索引擎排名的應用來說，是一個重要的考慮因素。

說Razor Pages優勢，那為啥現在又換Blazor了？因為Blazor可能又是更好的選擇了，我們接著說。

2. 關鍵聊聊Blazor

Blazor是一個新興的Web開發框架，它可以讓開發人員使用C#語言來編寫Web應用程式，而不必使用JavaScript，當然只能說儘量少用，完全不用也不太現實。相比於Razor Pages和MVC，Blazor提供了一種全新的開發模式，具有許多獨特的優勢和適用場景。

首先，Blazor提供了真正的前端開發體驗。傳統的Web開發中，前端開發人員需要使用JavaScript來處理頁面的交互和動態效果，而後端開發人員則負責處理業務邏輯和數據操作。這種分離的開發模式可能導致開發人員之間的溝通和協作問題。而Blazor使用C#語言來編寫前端代碼，使得前端和後端開發人員可以使用相同的語言和工具，更加高效地協作開發。

其次，Blazor提供了更好的性能和用戶體驗，Blazor提供了客戶端和服務端兩種模式（Blazor混合模式有機會我們再談）：

  • 客戶端模式：Blazor使用WebAssembly技術，在瀏覽器中直接運行編譯後的二進位代碼，可以實現接近原生應用的性能。
  • 服務端模式：與傳統的基於HTTP請求的頁面刷新相比，Blazor使用SignalR連接來實現實時數據更新和雙向綁定，可以提供更快速和流暢的用戶體驗。

另外，Blazor還具有更好的可重用性和組件化開發。Blazor提供了豐富的組件庫和工具，可以幫助開發人員更快地構建出漂亮且功能強大的界面。開發人員可以將常用的UI組件封裝成可重用的組件，提高開發效率和代碼質量。

此外，Blazor還支持現代化的前端開發技術和工具。開發人員可以使用Blazor與現有的JavaScript庫和框架進行集成，如React、Vue.js等。

總之，Blazor對於Razor Pages和MVC來說是一個更好的選擇，特別是對於需要更好的前端開發體驗、更好的性能和用戶體驗以及更好的可重用性和組件化開發的項目來說。然而，選擇使用哪種開發模式還是要根據項目的具體需求和開發團隊的偏好來決定。無論選擇哪種模式，重要的是根據項目的實際情況做出合理的選擇，並且在開發過程中遵循良好的設計原則和最佳實踐。

3. 再聊聊為啥又用Blazor了？

站長在去年對網站前臺使用Blazor Server開發過一個版本，當時因為斷線重連體驗的問題，站長選擇用Razor Pages重構了。

這次站長回歸Blazor的轉折點在6月13號 - .NET 8 Preview 5發佈，VS2022預覽版也跟著出了Blazor Web App項目模板，各個技術群也討論瘋了，站長在Razor Pages中添加了Razor 組件嘗試，微軟確實牛逼，旨在使 Blazor 組件能夠滿足客戶端和伺服器端的所有 Web UI 需求。。

但目前該模式Razor組件無法交互，頁面還出現了重連置灰UI，索性直接用Blazor Server重構，經過幾天的奮戰，網站前臺已經用Blazor Server完全替換Razor Pages，煩人的重連也解決了，現在訪問網站飛快，不知道是不是錯覺，個人感覺很好。（重連問題參考微軟文檔【ASP.NET Core BlazorSignalR 指南】和Token佬寫的文章 【如何取消Blazor Server煩人的重新連接？】。）

Razor Pages（MVC）與Blazor都使用的Razor語法，所以理論上切換是無縫的，核心代碼改動不大，項目代碼文件結構對比看下麵截圖，不再贅述，有興趣看源碼吧，兩個版本代碼都在。

Razor Pages版工程結構 Blazor Server版工程結構

4. Blazor的交互便利：帶來幾個線上工具

對於頁面的事件處理，使用Blazor就方便了，下麵是昨晚加的4個小工具：

有興趣的朋友可以點擊體驗：https://dotnet9.com/tools， 我們直接貼上4個小工具代碼，你可能會喜歡上Blazor的代碼風格。

4.1. JSON格式化

訪問地址：https://dotnet9.com/tools/jsonformatter

頁面代碼：

@page "/tools/jsonformatter"
@using System.Text.Json

<PageTitle>@_title</PageTitle>

<MApp>
   <h2 style="margin-bottom: 30px; margin-top: 10px; text-align: center;">@_title</h2>

   <div>
       <MTextarea BackgroundColor="grey lighten-2" Solo
                  Color="orange orange-darken-4" TValue="string" @bind-Value="_inputJson"
                  Label="輸入Json" Rows="8" style="font-size:12px;" RowHeight="15" AutoGrow/>
   </div>

   <div>
       <MButton Color="success" class="ma-2" OnClick="() => FormatJson(true)">格式化</MButton>
       <MButton Color="lime" OnClick="() => FormatJson(false)">壓縮</MButton>
   </div>

   <div>
       <MTextarea BackgroundColor="amber lighten-4" Solo
                  Color="orange orange-darken-4" TValue="string" @bind-Value="_formattedJson"
                  Label="格式化或壓縮後Json" Rows="8" style="font-size:12px;" RowHeight="15" AutoGrow/>
   </div>
</MApp>

@code
{
       private const string? _title = "工具箱-JSON格式化";
   private string? _inputJson;
   private string? _formattedJson;

   private void FormatJson(bool writeIndented)
   {
       try
       {
           var jsonObject = JsonDocument.Parse(_inputJson).RootElement;
           _formattedJson = JsonSerializer.Serialize(jsonObject, new JsonSerializerOptions { WriteIndented = writeIndented });
       }
       catch (JsonException)
       {
           _formattedJson = "無效的JSON格式";
       }
   }
}

4.2. 線上字元串編碼工具

訪問地址：https://dotnet9.com/tools/string-encoder

頁面代碼：

@page "/tools/string-encoder"

<PageTitle>@Title</PageTitle>

<MApp>
   <h2 style="margin-bottom: 30px; margin-top: 10px; text-align: center;">@Title</h2>

   <p>
       <MTextarea BackgroundColor="grey lighten-2"
                  Color="cyan" Solo TValue="string" @bind-Value="_inputString"
                  Label="輸入字元串"/>
   </p>

   <p>
       <MTextarea BackgroundColor="amber lighten-4" Solo
                  Color="orange orange-darken-4" TValue="string" @bind-Value="_encodedOrDecodeString"
                  Label="編/解碼結果"/>
   </p>

   <p>
       <MButton OnClick="@Encode">編碼</MButton>
       <MButton OnClick="@Decode">解碼</MButton>
       <MButton OnClick="@Clear">清空</MButton>
   </p>
</MApp>

@code {
   private const string Title = "工具箱-線上字元串編碼工具";
   private string? _inputString;
   private string? _encodedOrDecodeString;

   private void Encode()
   {
       _encodedOrDecodeString = System.Web.HttpUtility.UrlEncode(_inputString);
   }

   private void Decode()
   {
       _encodedOrDecodeString = System.Web.HttpUtility.UrlDecode(_inputString);
   }

   private void Clear()
   {
       _inputString = string.Empty;
       _encodedOrDecodeString = string.Empty;
   }

}

4.3. 倒計時

訪問地址：https://dotnet9.com/tools/countdown

頁面代碼：

@page "/tools/countdown"

<PageTitle>@Title</PageTitle>

<MApp>
   <h2 style="margin-bottom: 30px; margin-top: 10px; text-align: center;">@Title</h2>

   <p>
       <MTextField Label="持續時間（秒）" Type="number" TValue="int" @bind-Value="@_duration"/>
   </p>

   <p>
       <MButton Color="success" class="ma-2" OnClick="@StartCountdown" Disabled="@_isCountingDown">開始</MButton>
       <MButton Color="pink" class="ma-2 white--text" OnClick="@PauseCountdown" Disabled="!_isCountingDown">暫停</MButton>
       <MButton Color="deep-orange" class="ma-2 white--text" OnClick="@ResetCountdown" Disabled="!_isCountingDown">重置</MButton>
       剩餘時間（秒）：@_remainingTime
   </p>
   <div class="text-center">
       <MProgressCircular Value="@_remainingTimePercent" Size="100" Width="15" Rotate="360" Color="teal">@_remainingTime</MProgressCircular>
   </div>
</MApp>

@code {
   private const string Title = "工具箱-倒計時";
   private int _duration = 20;
   private int _remainingTime;
   private int _remainingTimePercent;
   private bool _isCountingDown;
   private bool _isPause;
   private CancellationTokenSource? _countdownTokenSource;

   private async Task StartCountdown()
   {
       if (_duration < 0)
       {
           _duration = 10;
       }
       if (_isCountingDown)
       {
           return;
       }
       _isCountingDown = true;
       if (!_isPause || _remainingTime <= 0)
       {
           _remainingTime = _duration;
           ChangeRemainingTimePercent();
       }
       _countdownTokenSource = new CancellationTokenSource();

       await Countdown(_countdownTokenSource.Token);
   }

   private void PauseCountdown()
   {
       if (!_isCountingDown)
       {
           return;
       }
       _isCountingDown = false;
       _isPause = true;
       _countdownTokenSource?.Cancel();
   }

   private async void ResetCountdown()
   {
       _isPause = false;
       if (_isCountingDown && _countdownTokenSource != null)
       {
           await _countdownTokenSource.CancelAsync();
       }

       _remainingTime = _duration;
       _isCountingDown = false;
       ChangeRemainingTimePercent();
   }

   private async Task Countdown(CancellationToken cancellationToken)
   {
       while (_remainingTime > 0)
       {
           await Task.Delay(1000, cancellationToken);
           _remainingTime--;
           ChangeRemainingTimePercent();

           if (cancellationToken.IsCancellationRequested)
           {
               return;
           }
       }

       _isCountingDown = false;
   }

   private async void ChangeRemainingTimePercent()
   {
       _remainingTimePercent = (int)(_remainingTime * 100.0 / _duration);
       await InvokeAsync(StateHasChanged);
   }

}

4.4. 時間戳轉換

訪問地址：https://dotnet9.com/tools/timestamp

站長原來寫過一篇，可以看這裡：使用Blazor做個簡單的時間戳線上轉換工具。

5. 總結

網站可能存在Bug，不，一定存在Bug，站長會一直重構迭代下去。

很高興將網站前臺重構後分享這個喜悅給大家，祝大家端午安康。

時間如流水，只能流去不流回。
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Python播放GIF圖片（ChatGPT代碼參考）
    在網上找了好幾個方法， 最後還是出現各種問題，解決不了播放GIF的功能。 最後，通過ChatGPT給出了簡單明瞭的方案（使用第三方庫imageio和matplotlib.animation來實現），調試直接通過。 但有小瑕疵，就是顯示gif時隱藏掉坐標軸的功能無效，於是再做了一下優化。 [最終代碼] ...
  • 解放計算力：使用並行處理提升python for迴圈速度
    > Python 是一門功能強大的編程語言，但在處理大規模數據或複雜計算任務時，性能可能成為一個瓶頸。幸運的是，Python 提供了多種方法來提升性能，其中之一是利用並行處理來加速迴圈操作。本文將介紹如何使用並行處理技術來優化 for 迴圈，從而提高 Python 程式的執行速度。我們將討論並行處理 ...
  • ChatGPT和AI會重燃中國的虛擬宇宙嗎？
    集合組織特性相同的數據；泛型可以定義任何抽象數據類型；生命周期限制所有權的作用域範圍；錯誤處理使程式更健壯。 ...
  • 頭一次見單例模式講的如此透徹
    ## 簡介 單例模式是一種常用的軟體設計模式，用於創建類型。通過單例模式的方法創建的類在當前進程中只有一個實例。單例模式的類只能允許一個實例存在。單例模式的作用是保證在整個應用程式的生命周期中，任何一個時刻，單例類的實例都只存在一個。 組成部分： 1. 私有化構造方法。 2. 私有化內部實例。 3. ...
  • 驅動開發：內核中進程與句柄互轉
    在內核開發中，經常需要進行進程和句柄之間的互相轉換。進程通常由一個唯一的進程標識符（PID）來標識，而句柄是指對內核對象的引用。在Windows內核中，`EProcess`結構表示一個進程，而HANDLE是一個句柄。為了實現進程與句柄之間的轉換，我們需要使用一些內核函數。對於進程PID和句柄的互相轉... ...
  • 一文瞭解函數設計的最佳實踐
    環境：CentOS 7.6_x64 Python版本 ：3.9.12 pjsip版本：2.13 之前寫過一篇CentOS7環境編譯python3.9版本pjsua的文章： https://www.cnblogs.com/MikeZhang/p/centos7py39pjsua20230608.htm ...
  • ASP.NET Core MVC 從入門到精通之緩存
    經過前幾篇文章的講解，初步瞭解ASP.NET Core MVC項目創建，啟動運行，以及命名約定，創建控制器，視圖，模型，接收參數，傳遞數據ViewData，ViewBag，路由，頁面佈局，wwwroot和客戶端庫，Razor語法，EnityFrameworkCore與資料庫，HttpContext，... ...
  • 記錄liunx伺服器和docker時區修改
    # 記錄伺服器和docker時區修改 ## 前言 我的博客是部署在docker裡面的，然後我發現評論和留言的時間和北京時間是有差別的，相差8個小時，然後發現是因為容器中的時區設置與伺服器是不一致的，所以需要設置一下。 ## 更改liunx伺服器時區 1. 查看當前時區設置 使用`date`命令查看當 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類