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 清楚地說明了網頁的內容,它可以改善用戶的體驗。
本文也使用了别名字符串工具,截图如下:

步驟是:
- 在百度翻譯中翻譯文章標題“dotnet工具箱:開源、免費的純前端工具網站,帶你探索10大工具分類和73個實時在線小工具”;
- 将得到的英文标题“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”复制到别名字符串工具【需要转别名的字符串】输入框;
- 點擊【複製別名】將【別名】輸入框中轉換的別名字符串粘貼到本文markdown文件內,文件也以轉換的【[別名].md】命名;
- 使用别名访问本文: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工具箱的打包、部署简单说明:
- 克隆項目:https://github.com/dotnet9/Dotnet9
- 定位到Dotnet工具箱目录:
./src/Dotnetools - 安裝前端開發必要環境:node.js
- 终端安装依赖:
npm install - 终端打包:
npm run build - 複製發布目錄到伺服器即可。
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. 總結
這些工具站長每個都做了測試,請放心使用,不放心看源碼提pr,哈哈。
因為在家待業時間較多,但難免部分翻譯不正確,歡迎大家參與維護:
參與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
技術交流加群請添加站長微信號:codewf