技術文章 » Dotnet工具箱：開源、免費的純前端工具網站，帶你探索10大工具分類和73個實時線上小工具

Dotnet工具箱：開源、免費的純前端工具網站，帶你探索10大工具分類和73個實時線上小工具

2023-10-16 18:02:14

1. 前言

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

Dotnet工具箱是一個純前端的、開源和免費的工具網站，週末我參考了開源專案it-tools，對網站介面文字進行了漢化，並重新部署了網站。該網站共有10大工具分類，提供了73個實時線上小工具。使用Vue3開發的Dotnet工具箱具有獨特的特色，本文詳細介紹了其中一些特色工具，並簡單分享瞭如何部署自己的工具網站。如果你對工具網站感興趣，不妨來了解一下Dotnet工具箱吧！

Dotnet工具箱已有工具如下：

關於Dotnet工具箱和it-tools專案

Dotnet工具箱倉庫（基於it-tools）：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnetools

it-tools倉庫：https://github.com/CorentinTh/it-tools

it-tools開源協定：GPL-3.0 license

it-tools線上工具：https://it-tools.tech/

截至本文編寫時，Dotnet工具箱只是對it-tools專案進行了介面文字漢化，後續打算如果自己有需求會根據該專案規範進行擴充套件開發，大家有興趣可以：

參與it-tools開發：https://github.com/CorentinTh/it-tools

參與Dotnet工具箱開發：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnetools

糾正Dotnet工具箱中文翻譯、提Issue、提PR都請存取：https://github.com/dotnet9/Dotnet9

2. 工具介紹

選擇10大工具分類部分介紹，每個大類介紹部分。

2.1. 加解密

加解密共有11個小工具。

2.1.1. Token、隨機密碼生成器

線上工具存取地址：https://dotnetools.com/token-generator

生成自定義長度，包含大寫或小寫字母、數位或符號的隨機字串。

2.1.2. 雜湊文字生成器

線上工具存取地址：https://dotnetools.com/hash-text

使用所需的函數對文字字串進行雜湊：MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3 或 RIPEMD160

2.1.3. 文字加密、解密

線上工具存取地址：https://dotnetools.com/encryption

使用AES、TripleDES、Rabbit或RC4等加密演演算法對文字明文進行加密和解密。

2.1.4. RSA金鑰對生成器

線上工具存取地址：https://dotnetools.com/rsa-key-pair-generator

生成新的隨機RSA私鑰和公鑰pem證書。

2.1.5. 密碼強度分析器

線上工具存取地址：https://dotnetools.com/password-strength-analyser

使用此僅限使用者端的密碼強度分析器和破解時間估計工具來發現您的密碼強度。

2.2. 換算器

換算器共有15個小工具。

2.2.1. 日期時間轉換器

線上工具存取地址：https://dotnetools.com/date-converter

將日期和時間轉換為各種不同的格式

2.2.2. 線上進位制換算

線上工具存取地址：https://dotnetools.com/base-converter

線上進位制換算，在常用的二進位制、六進位制、十進位制等進位制單位之間的轉換，還能自定義轉換其他進位制單位，比如50進位制、100進位制...。

2.2.3. Base64字串編碼/解碼

線上工具存取地址：https://dotnetools.com/base64-string-converter

簡單將字串編碼和解碼為base64表示。

2.2.4. Base64檔案轉換器

線上工具存取地址：https://dotnetools.com/base64-file-converter

將字串、檔案或影象轉換為它的base64表示形式。

  • 貼上對應的檔案base64字串轉換為檔案下載
  • 上傳檔案轉換為base64字串進行復制

2.2.5. 顏色轉換器

線上工具存取地址：https://dotnetools.com/color-converter

在不同格式之間轉換顏色 (hex, rgb, hsl and css name)，常用於前端開發（比如Web、桌面軟體、行動端）

2.2.6. JSON 轉 YAML

線上工具存取地址：https://dotnetools.com/json-to-yaml-converter

線上將JSON轉換為YAML的轉換器，類似的還有YAML轉JSON、YAML轉TOML、JSON轉TOML、列表資料轉換器、TOML轉JSON、TOML轉YAML。

2.3. 網站

網站分類有15個小工具。

2.3.1. URL字串編解碼

線上工具存取地址：https://dotnetools.com/url-encoder

編碼為url編碼格式（也稱為「百分比編碼」）或從中解碼。

2.3.2. html元素跳脫

線上工具存取地址：https://dotnetools.com/html-entities

html元素跳脫或取消跳脫(替換 <,>, &, " and ' 為對應的html版本)，這可能主要用於後端給前端的網頁內容時使用，特殊符號需要跳脫後才能正常使用

2.3.3. Url分析器

線上工具存取地址：https://dotnetools.com/url-parser

解析url字串以獲得所有不同的部分（協定、來源、引數、埠、使用者名稱密碼…）

2.3.4. 裝置資訊

線上工具存取地址：https://dotnetools.com/device-information

獲取有關當前裝置的資訊（螢幕大小、畫素比例、使用者代理等）

2.3.5. 別名字串

工具介紹：使字串 URL、檔名和 id 安全。

這是一篇關於別名的介紹什麼是URL slug 及其對 SEO 的重要性：

slug 對於關鍵字 SEO 來說非常強大。如果使用者要在 Google 搜尋「什麼是 slug」，則內容 URL 結構中的關鍵字有助於向 Google 發出訊號，表明內容應該包含在 SERP 中。如果一個好的
slug 清楚地說明了網頁的內容，它可以改善使用者的體驗。

本文也使用了別名字串工具，截圖如下：

步驟是：

  1. 在百度翻譯中翻譯文章標題「Dotnet工具箱：開源、免費的純前端工具網站，帶你探索10大工具分類和73個實時線上小工具」；
  2. 將得到的英文標題「Dotnet Toolbox: Open source, free pure front-end tool website that takes you to explore 10 major tool categories and 73 real-time online small tools」複製到別名字串工具【需要轉別名的字串】輸入框；
  3. 點選【複製別名】將【別名】輸入框中轉換的別名字串貼上到本文Markdown檔案內，檔案也以轉換的【[別名].md】命名；
  4. 使用別名存取本文：https://dotnet9.com/2023/10/dotnet-toolbox-open-source-free-pure-front-end-tool-website-that-takes-you-to-explore-10-major-tool-categories-and-73-real-time-online-small-tools9

2.3.6. HTTP 狀態程式碼

線上工具存取地址：https://dotnetools.com/http-status-codes

所有 HTTP 狀態程式碼的列表，其名稱和含義。

2.3.7. JSON對比

線上工具存取地址：https://dotnetools.com/json-diff

比較兩個 JSON 物件並獲取它們之間的差異。

2.4. 圖片和視訊

有4個小工具。

2.4.1. 二維條碼生成器

線上工具存取地址：https://dotnetools.com/qrcode-generator

生成並下載 url 或僅文字的二維條碼，並自定義背景和前景色。

下面是上面的操作生成的二維條碼，微信掃碼可開啟Dotnet工具箱網站：

2.4.2. SVG 預留位置生成器

線上工具存取地址：https://dotnetools.com/svg-placeholder-generator

生成 svg 影象以用作應用程式中的預留位置，主要用於網站圖片未載入完成時的佔點陣圖片。

2.4.3. 攝像機錄影機

線上工具存取地址：https://dotnetools.com/camera-recorder

從網路攝像頭或相機拍照或錄製視訊。

2.5. 開發

開發分類共有10個小工具。

2.5.1. Crontab生成器

線上工具存取地址：https://dotnetools.com/crontab-generator

驗證並生成 crontab，並獲取 cron 計劃的人類可讀描述。

2.5.2. JSON 美化和格式化

線上工具存取地址：https://dotnetools.com/json-prettify

將 JSON 字串美化為人類友好的可讀格式，對應的就有JSON壓縮工具。

2.5.3. SQL 美化和格式化

線上工具存取地址：https://dotnetools.com/sql-prettify

線上格式化和美化您的 SQL 查詢語句（它支援各種 SQL 變種）。

2.5.4. Docker compose轉換器

線上工具存取地址：https://dotnetools.com/docker-run-to-docker-compose-converter

將docker執行命令轉換為docker-compose檔案!

2.5.5. XML 格式化

線上工具存取地址：https://dotnetools.com/xml-formatter

將 XML 字串美化為人類友好的可讀格式。

2.x. 其他分類

小工具太多，逐一介紹太佔篇幅，有興趣可存取Dotnet工具箱-為開發人員提供方便的線上工具 (dotnetools.com)探索使用。

3. 開發部署自己的工具站

it-tools是一個開源專案，站長基於它開發部署了自己的Dotnet工具站，當然您也可以基於it-tools或Dotnet工具站開發部署自己的工具網站，讓我們動起手來試試吧。

3.1. 簡單部署

it-tools專案readme說明有比較詳細的專案相關說明、Docker網站部署步驟，下面是站長Dotnet工具箱的打包、部署簡單說明：

  1. 克隆專案：https://github.com/dotnet9/Dotnet9
  2. 定位到Dotnet工具箱目錄：./src/Dotnetools
  3. 安裝前端開發必要環境：Node.js
  4. 終端安裝依賴：npm install
  5. 終端打包：npm run build
  6. 複製釋出目錄到伺服器即可。

3.2. 修改或擴充套件自己的工具

每個小工具原始碼在./src/Dotnetools/src/tools/下：

在tools目錄下增加或刪除小工具目錄後，需要改src\tools\index.ts檔案，這裡組織工具目錄列表：

3.3. 關於翻譯

部分小工具支援多語言在地化，可在下圖中src\tools\token-generator新增或維護語言：

src\plugins\i18n.plugin.ts設定在地化使用的語言：

但大部分工具是未支援多語言的，可直接在xx.vue或xxx.ts中直接修改語言(比如：src\tools\http-status-codes\http-status-codes.vue)：

Dotnet工具站部分檢視翻譯肯定是存在問題的，歡迎大家提PR糾正。

4. 總結

這些工具站長每個都做了測試，其中JSON 轉 CSV工具有點小問題，沒有正常轉換，得空研究下原因。

因為在家待業時間較多，但難免部分翻譯不正確，歡迎大家參與維護：

參與it-tools開發：https://github.com/CorentinTh/it-tools

參與Dotnet工具箱開發：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnetools

糾正Dotnet工具箱中文翻譯、提Issue、提PR都請存取：https://github.com/dotnet9/Dotnet9

技術交流加群請新增站長微訊號：dotnet9com

謝謝您閱讀到這，可以關注【Dotnet9】微信公眾號，一起技術交流、共同進步：