格式化 JSON 輸出 - Spectre Console 系列

開始使用：什麼是 Spectre Console JSON

在 0:00，Tim 介紹了 Spectre Console 這個用於建立視覺上吸引人的控制台應用程式的 .NET 程式庫。 他解釋說，在這堂課中，他將從 API 獲取 JSON 資料，並使用 Spectre Console JSON 顯示出來。 這意味着，您的原始 JSON 字串可以轉換為 Spectre 能渲染的豐富物件。

他提到，原始碼和專案網站連結位於描述中，您可以自行下載專案。

用輔助函式獲取 JSON 資料

在 0:35，Tim 展示了輔助程式碼。 在他的專案中，他有一個名為 Helpers 的類，具有一個叫做 FetchApiDataAsync 的函式。 這個函式會向一個 URL 發送請求，獲取 JSON，並以字串形式返回響應。

他注意到，您可以簡單地使用 AnsiConsole.WriteLine(jsonResponse) 將 JSON 輸出到控制台。 但正如他在 1:26 示範的那樣，那樣的原始輸出只是密集的文字集合，對於正在閱讀或處理的人並不友好。

安裝 Spectre Console JSON 套件

在 1:46，Tim 表示他希望正確格式化 JSON。 但首先，他需要 JSON 擴展套件。 他右鍵點擊專案，選擇"管理 NuGet 套件"，並安裝 Spectre.Console.Json。

他指出，您還可以使用 CLI 並執行：

dotnet add package Spectre.Console.Json

dotnet add package Spectre.Console.Json

這是用於 JSON 渲染的官方 NuGet 套件。 正如 Tim 在 2:14 解釋的那樣，您可以使用 Spectre 套件和 Spectre.Console.Json 套件來製作一個 AOT（提前編譯）應用程式，但目前不能使用 CLI。

建立 JsonText 實例

在 2:31，Tim 展示將您的 JSON 字串轉換為 Spectre 可渲染物件的語法。 他寫道：

using Spectre.Console.Json;

var json = new JsonText(jsonResponse);

using Spectre.Console.Json;

var json = new JsonText(jsonResponse);

這會從您的字串中建立一個新的 JsonText 實例。 現在您擁有一個可以由 Spectre 以風格渲染的物件了。 您不必自行解析陣列、空值或巢狀物件——程式庫會為您處理。

在面板中呈現 JSON

在 3:00，Tim 實際展示了將 JSON 寫入控制台。 他使用 Spectre 的面板功能來為資料加上框架：

AnsiConsole.Write(
    new Panel(json)
);

AnsiConsole.Write(
    new Panel(json)
);

在 3:39，當他運行程式碼時，JSON 以樣式化的框顯示出來。 鍵是藍色，數字和布林值是綠色，文字值是紅色。 即使是陣列資料和巢狀物件也能正確顯示。 Spectre 自動包裹長行，因此您不必自己建造縮排或間距。

他還注意到在 3:59，許多終端中的 JSON 中的 URL 變成可點擊的連結——這對於直接從控制台閱讀 JSON 的人來說是另一個優勢。

新增標題、邊框和樣式

在 4:09，Tim 開始處理樣式。 他在面板上鏈式調用方法來設置標題、縮減多餘空間和更改邊框顏色：

var panel = new Panel(json)
    .Header("API Response")
    .Collapse()
    .BorderColor(Color.White);

AnsiConsole.Write(panel);

var panel = new Panel(json)
    .Header("API Response")
    .Collapse()
    .BorderColor(Color.White);

AnsiConsole.Write(panel);

在 5:02，當他運行這個構建時，控制台顯示一個標有"API Response"的精緻框，就像您在 web 工具或 IDE 中看到的一樣。這使來自 API 的資訊更容易閱讀。

自訂 JSON 顏色

在 5:14，Tim 展示您可以單獨更改 JSON 部件的顏色。 他並不更改每個屬性，只是足以展示語法：

json.StringColor = Color.Yellow;
json.ColonColor = Color.Orange;

json.StringColor = Color.Yellow;
json.ColonColor = Color.Orange;

在 5:52，當他運行時，文字值是黃色，冒號是橙色。 您可以使用 Color.Red、Color.Green 或任何其他定義的 Spectre 顏色。 這讓您可以匹配公司的風格或在控制台中突顯特定值。

為什麼 Spectre Console JSON 很重要

在 6:04，Tim 總結了優勢。 使用 Spectre Console JSON，您可以：

• 安裝單一 NuGet 套件，獲得 JSON 格式"超能力"。

• 將普通的 JSON 字串自動呈現為著色物件。

• 無需編寫自己的格式化程式碼即可處理陣列、巢狀集合、空值和大型資料集。

• 輕鬆向面板新增標題、邊框和自訂顏色。

• 保持您的控制台應用程式專業且易於閱讀。

他強調您不必自行建造縮排、處理間距或手動定義顏色。 程式庫會為您處理這些操作。

結論

在 6:38，Tim 以感謝觀眾結束。 他展示了如何從 API 獲取 JSON，將其轉換為 JsonText 物件，並在具有自訂顏色設置的樣式面板中顯示出來。

只需一個額外的 NuGet 套件和幾行碼，您的控制台應用程式就能獲得"JSON 超能力"——美觀、易讀的資料輸出。

如果您想深入了解，請查看 Spectre Console 專案網站或 Tim 的頻道以獲取更詳細的說明。 如同 Tim 在影片中展示的，安裝套件並建立 JsonText 實例後，所有困難的工作已完成。 您的控制台應用程式成為閱讀、工作和共享 JSON 資訊時更有用的工具。