前文概述
俗话说得好,工欲善其事,必先利其器!日常程序员们常常需要使用各种工具来辅助编程、学习和生活。本文将介绍一个收集了多种在线工具的工具箱,包括编解码、正则表达式、网络查询、在线编译运行、可视化/格式化、在线生成器等多个类别,涵盖了常用的工具。如果您是一位程序员或学习编程的大学生,这篇文章将会为您节省大量搜索工具的时间,提高工作和学习的效率。
当然,该工具箱还会不断更新和添加新的实用工具,我们也欢迎大家通过评论留言向我们推荐好用的工具,让它变得更加实用和便捷。
工具箱介绍

在线编解码工具
工具名称 | 描述 |
---|
在线URL编码解码 | 将URL进行编码或解码 |
MD5编码工具 | 将任意长度的输入转换成固定长度的输出 |
AES/DES加解密 | 对称加密算法 |
JWT解码工具 | 对JSON Web Token进行解码 |
ASCII编解码工具 | 将字符转换为 ASCII 码值或反转 |
Unicode编解码工具 | 将字符转换为 Unicode 码值或反转 |
UTF-8编解码工具 | 将字符转换为 UTF-8 编码或反转 |
字符串编解码工具 | 支持多种编解码格式的字符串转换 |

在线转换工具
工具名称 | 描述 |
---|
在线ASCII码对照表 | 显示 ASCII 码表中所有字符及其对应 ASCII 码值 |
通用进制转换工具 | 可以将各种进制的数字互相转换 |
在线浮点数十进制转换 | 将浮点数转换为十进制表示 |
RGB颜色转换 | 在不同的颜色表示法之间进行转换 |
时间戳转换工具 | 可以将 UNIX 时间戳转换为常见日期格式 |
计量单位换算工具 | 可以将各种计量单位互相转换 |
在线JSON解析 | 将 JSON 格式的字符串转换为 JavaScript 对象 |
在线JS代码格式化工具 | 将 JavaScript 代码格式化,使其易于阅读 |
SQL压缩/格式化工具 | 可以对 SQL 语句进行压缩或格式化 |
JSON和XML在线转换 | 可以将 JSON 格式的字符串转换为 XML 格式,或者将 XML 格式的字符串转换为 JSON 格式 |
JSON/YAML在线转换 | 可以将 JSON 格式的字符串转换为 YAML 格式,或者将 YAML 格式的字符串转换为 JSON 格式 |
人民币大小写转换工具 | 将人民币金额数字转换为中文大写 |

其他工具
工具名称 | 描述 |
---|
正则表达式可视化工具 | 可视化正则表达式的模式匹配过程,帮助用户理解和调试正则表达式。 |
正则表达式调试工具 | 通过可视化界面展示正则表达式模式匹配和替换过程,方便用户调试。 |
IP地址归属地查询 | 在线查询 IP 地址的归属地信息,方便了解网站、服务器等的位置信息。 |
IP地址查询 | 在线查询 IP 地址的详细信息,包括地理位置、运营商、主机名等。 |
HTTP在线接口测试工具 | 可以在线进行 HTTP 接口的测试,方便进行接口调试和测试。 |
在线编译工具套装 | 提供多种编程语言的在线编译环境,方便用户快速进行代码编译。 |
C#在线编译运行 | 提供在线的 C# 编译器和运行环境,方便用户进行 C# 代码编译和运行。 |
C/C++在线编译调试 | 提供在线的 C/C++ 编译器和调试器,方便用户进行 C/C++ 代码编译和调试。 |
在线前端编辑器 | 提供在线的前端代码编辑器,支持 HTML、CSS 和 JavaScript 编辑和调试。 |
在线数据可视化 | 提供多种数据可视化展示方式,支持折线图、柱状图、饼图等常用图表。 |
在线CSS代码可视化工具 | 将 CSS 代码转换为可视化的图形,方便用户理解和调试 CSS 样式。 |
XML格式化工具 | 可以在线格式化 XML 文件,方便用户查看和编辑。 |
UUID在线生成器 | 可以在线生成符合 UUID 规范的随机字符串,常用于数据标识和唯一标识。 |
随机数生成器 | 可以在线生成指定范围内的随机数,方便进行数据模拟和测试。 |
在线Nginx配置工具 | 提供在线的 Nginx 配置文件编辑器,方便用户进行 Nginx 配置和管理。 |
在线对比工具 | 可以在线比较两个文件的差异,并可视化展示差异,方便用户进行文件比较和合并。 |
在线Chrome浏览器插件 | 提供在线的 Chrome 浏览器插件开发环境,方便用户进行插件开发和测试。 |
在线接口文档管理工具 | 提供在线的接口文档编写和管理功能,方便团队进行接口开发和文 |

在线教程和文档
工具名称 | 描述 |
---|
在线教程和文档 | 包含Git中文教程和Nginx中文文档的在线学习资源 |
…可补充… | …可补充… |

代码结构
代码是前端写的,不涉及后端代码哦,需要后端代码也可以补充进去哟!
代码结构:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Rucoding工具箱</title>
<link rel="stylesheet" href="./layui-icon-extend/network/iconfont.css" />
<link href="./images/favicon.ico" rel="icon">
<link href="./layui/css/layui.css" rel="stylesheet" />
<link href="./layui/css/admin.css" rel="stylesheet" />
<script src="./layui/js/jquery-2.1.4.min.js"></script>
<script src="./layui/layui.js"></script>
<script src="./layui/js/index.js" data-main="home"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header custom-header">
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item slide-sidebar" lay-unselect>
<a href="javascript:;" class="icon-font"><i class="ai ai-menufold"></i></a>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">管理员</a>
<dl class="layui-nav-child">
<dd><a th:href="@{/logout}">退出</a></dd>
</dl>
</li>
</ul>
</div>
<div class="layui-side custom-admin">
<div class="layui-side-scroll">
<div class="custom-logo">
<img alt="" src="./images/logo.jpg">
<h1>工具箱</h1>
</div>
<ul id="Nav" class="layui-nav layui-nav-tree">
<li class="layui-nav-item">
<a href="javascript:;">
<i class="layui-icon"></i>
<em>主页</em>
</a>
<dl class="layui-nav-child">
<dd><a href="./html/view.html">控制台</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<i class="layui-icon"></i>
<em>开发辅助工具</em>
</a>
<dl class="layui-nav-child">
<dd class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon"></i> 在线编解码工具</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" id="online-url-encoding-tool">在线URL编码解码</a></dd>
<dd><a href="javascript:;" id="online-md5-encoding-tool">MD5编码工具</a></dd>
<dd><a href="javascript:;" id="online-aes-des-tool">AES/DES加解密</a></dd>
<dd><a href="javascript:;" id="online-jwt-tool">JWT解码工具</a></dd>
<dd><a href="javascript:;" id="online-ascii-tool">ASCII编解码工具</a></dd>
<dd><a href="javascript:;" id="online-unicode-tool">Unicode编解码工具</a></dd>
<dd><a href="javascript:;" id="online-utf8-encoding-tool">UTF-8编解码工具</a></dd>
<dd><a href="javascript:;" id="online-string-encoding-tool">字符串编解码工具</a></dd>
</dl>
</dd>
<dd class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon"></i> 在线转换工具</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" id="online-ascii-table-tool">在线ASCII码对照表</a></dd>
<dd><a href="javascript:;" id="online-number-converter-tool">通用进制转换工具</a></dd>
<dd><a href="javascript:;" id="online-float-converter-tool">在线浮点数十进制转换</a></dd>
<dd><a href="javascript:;" id="online-color-converter-tool">RGB颜色转换</a></dd>
<dd><a href="javascript:;" id="online-timestamp-converter-tool">时间戳转换工具</a></dd>
<dd><a href="javascript:;" id="online-unit-converter-tool">计量单位换算工具</a></dd>
<dd><a href="javascript:;" id="online-json-parser-tool">在线JSON解析</a></dd>
<dd><a href="javascript:;" id="online-js-beautifier-tool">在线JS代码格式化工具</a></dd>
<dd><a href="javascript:;" id="online-sql-beautifier-tool">SQL压缩/格式化工具</a></dd>
<dd><a href="javascript:;" id="online-json-xml-tool">JSON和XML在线转换</a></dd>
<dd><a href="javascript:;" id="online-json-yaml-tool">JSON/YAML在线转换</a></dd>
<dd><a href="javascript:;" id="online-rmb-converter-tool">人民币大小写转换工具</a></dd>
</dl>
</dd>
<dd class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon"></i> 正则表达式工具</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" id="online-regular-expression-visualizer-tool">正则表达式可视化工具</a></dd>
<dd><a href="javascript:;" id="online-regular-expression-debugger-tool">正则表达式调试工具</a></dd>
</dl>
</dd>
<dd class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon"></i> 网络工具</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" id="online-ip-address-location-tool">IP地址归属地查询</a></dd>
<dd><a href="javascript:;" id="ip-address-query-tool">IP地址查询</a></dd>
<dd><a href="javascript:;" id="http-api-testing-tool">HTTP在线接口测试工具</a></dd>
</dl>
</dd>
<dd class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon"></i> 在线编译运行工具</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" id="online-compilation-toolkit">在线编译工具套装</a></dd>
<dd><a href="javascript:;" id="c-sharp-online-compilation-and-execution">C#在线编译运行</a></dd>
<dd><a href="javascript:;" id="c-cpp-online-compilation-and-debugging">C/C++在线编译调试</a></dd>
</dl>
</dd>
<dd class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon"></i> 可视化/格式化工具</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" id="online-frontend-editor-tool">在线前端编辑器</a></dd>
<dd><a href="javascript:;" id="online-data-visualization-tool">在线数据可视化</a></dd>
<dd><a href="javascript:;" id="online-css-code-visualization-tool">在线CSS代码可视化工具</a></dd>
<dd><a href="javascript:;" id="xml-formatting-tool">XML格式化工具</a></dd>
</dl>
</dd>
<dd class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon"></i> 在线生成器</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" id="online-uuid-generator-tool">UUID在线生成器</a></dd>
<dd><a href="javascript:;" id="online-random-number-generator-tool">随机数生成器</a></dd>
</dl>
</dd>
<dd class="layui-nav-item">
<a href="javascript:;"><i class="layui-icon"></i> 其他常用工具</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" id="online-nginx-configuration-tool">在线Nginx配置工具</a></dd>
<dd><a href="javascript:;" id="online-diff-tool">在线对比工具</a></dd>
<dd><a href="javascript:;" id="online-chrome-browser-plugin">在线Chrome浏览器插件</a></dd>
<dd><a href="javascript:;" id="online-api-documentation-management-tool">在线接口文档管理工具</a></dd>
</dl>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">
<i class="layui-icon"></i>
<em>在线教程和文档</em>
</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;" id="online-git-tool">Git中文教程</a></dd>
<dd><a href="javascript:;" id="online-nginx-doc-tool">Nginx中文文档</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="layui-body">
<div class="layui-tab app-container" lay-allowClose="true" lay-filter="tabs">
<ul id="appTabs" class="layui-tab-title custom-tab"></ul>
<div id="appTabPage" class="layui-tab-content"></div>
</div>
</div>
<div class="layui-footer">
<p>© 2023 - Rucoding Blog : <a href="https://blog.csdn.net/rucoding"
target="_blank">https://blog.csdn.net/rucoding</a></p>
</div>
<div class="mobile-mask"></div>
</div>
<script>
layui.use(['layer', 'element'], function() {
var layer = layui.layer;
var element = layui.element;
var linkElems = [
{ id: 'online-url-encoding-tool', url: 'https://www.bejson.com/enc/urlencode/', title: '在线URL编码解码' },
{ id: 'online-md5-encoding-tool', url: 'https://www.zxgj.cn/g/md5/', title: 'MD5编码工具' },
{ id: 'online-aes-des-tool', url: 'http://www.fly63.com/tool/cipher/', title: 'AES/DES加解密' },
{ id: 'online-jwt-tool', url: 'http://jwt.calebb.net/', title: 'JWT解码工具' },
{ id: 'online-ascii-tool', url: 'https://www.matools.com/code-convert-ascii/', title: 'ASCII编解码工具' },
{ id: 'online-unicode-tool', url: 'https://www.zxgj.cn/g/unicode/', title: 'Unicode编解码工具' },
{ id: 'online-utf8-encoding-tool', url: 'https://www.zxgj.cn/g/utf8/', title: 'UTF-8编解码工具' },
{ id: 'online-string-encoding-tool', url: 'https://www.zxgj.cn/g/enstring/', title: '字符串编解码工具' },
{ id: 'online-ascii-table-tool', url: 'https://www.fly63.com/tool/ascii/', title: '在线ASCII码对照表' },
{ id: 'online-number-converter-tool', url: 'https://www.zxgj.cn/g/jinzhi', title: '通用进制转换工具' },
{ id: 'online-float-converter-tool', url: 'http://www.binaryconvert.com/', title: '在线浮点数十进制转换' },
{ id: 'online-color-converter-tool', url: 'https://www.zxgj.cn/g/yansezhi', title: 'RGB颜色转换' },
{ id: 'online-timestamp-converter-tool', url: 'https://www.zxgj.cn/g/unix/', title: '时间戳转换工具' },
{ id: 'online-unit-converter-tool', url: 'http://www.fly63.com/tool/unitable/', title: '计量单位换算工具' },
{ id: 'online-json-parser-tool', url: 'https://www.json.cn/', title: '在线JSON解析' },
{ id: 'online-js-beautifier-tool', url: 'https://prettier.io/playground/', title: '在线JS代码格式化工具' },
{ id: 'online-sql-beautifier-tool', url: 'https://www.zxgj.cn/g/sqlformat', title: 'SQL压缩/格式化工具' },
{ id: 'online-json-xml-tool', url: 'https://www.zxgj.cn/g/jsonxml', title: 'JSON和XML在线转换' },
{ id: 'online-json-yaml-tool', url: 'http://www.fly63.com/tool/jsonyaml/', title: 'JSON/YAML在线转换' },
{ id: 'online-rmb-converter-tool', url: 'http://www.fly63.com/tool/renmingbi/', title: '人民币大小写转换工具' },
{ id: 'online-regular-expression-visualizer-tool', url: 'https://jex.im/regulex/#!flags=&re=%5E(a%7Cb)*%3F%24', title: '正则表达式可视化工具' },
{ id: 'online-regular-expression-debugger-tool', url: 'https://regexr.com/', title: '正则表达式调试工具' },
{ id: 'online-ip-address-location-tool', url: 'https://www.ip138.com/', title: 'IP地址归属地查询' },
{ id: 'ip-address-query-tool', url: 'https://www.ipip.net/ip.html', title: 'IP地址查询' },
{ id: 'http-api-testing-tool', url: 'http://www.fly63.com/php/http/', title: 'HTTP在线接口测试工具' },
{ id: 'online-compilation-toolkit', url: 'https://c.runoob.com/', title: '在线编译工具套装' },
{ id: 'c-sharp-online-compilation-and-execution', url: 'https://rextester.com/', title: 'C#在线编译运行' },
{ id: 'c-cpp-online-compilation-and-debugging', url: 'https://www.onlinegdb.com/', title: 'C/C++在线编译调试' },
{ id: 'online-frontend-editor-tool', url: 'https://codepen.io/', title: '在线前端编辑器' },
{ id: 'online-data-visualization-tool', url: 'https://flourish.studio/', title: '在线数据可视化' },
{ id: 'online-css-code-visualization-tool', url: 'https://enjoycss.com/', title: '在线CSS代码可视化工具' },
{ id: 'xml-formatting-tool', url: 'https://www.zxgj.cn/g/xmlformat', title: 'XML格式化工具' },
{ id: 'online-uuid-generator-tool', url: 'https://www.zxgj.cn/g/uuid', title: 'UUID在线生成器' },
{ id: 'online-random-number-generator-tool', url: 'https://www.zxgj.cn/g/suijishu', title: '随机数生成器' },
{ id: 'online-nginx-configuration-tool', url: 'https://www.digitalocean.com/community/tools/nginx#?', title: '在线Nginx配置工具' },
{ id: 'online-diff-tool', url: 'http://www.fly63.com/tool/textdiff/', title: '在线对比工具' },
{ id: 'online-chrome-browser-plugin', url: 'https://www.crx4chrome.com/', title: '在线Chrome浏览器插件' },
{ id: 'online-api-documentation-management-tool', url: 'http://www.docway.net/', title: '在线接口文档管理工具' },
{ id: 'online-git-tool', url: 'https://git-scm.com/book/zh/v2', title: 'Git中文教程' },
{ id: 'online-nginx-doc-tool', url: 'https://www.nginx.cn/doc/index.html', title: 'Nginx中文文档' },
];
linkElems.forEach(function(elem) {
$('#' + elem.id).on('click', function() {
openTab(elem);
});
});
function openTab(elem) {
var tabId = 'tab-' + elem.id;
var tabExist = checkTabExist(tabId);
if (!tabExist) {
var loadingIndex = layer.load();
element.tabAdd('tabs', {
title: elem.title,
content: '<iframe src="' + elem.url + '" frameborder="0" scrolling="yes" width="100%" height="500px"></iframe>',
id: tabId
});
layer.close(loadingIndex);
}
element.tabChange('tabs', tabId);
}
function checkTabExist(id) {
var tab = $('.layui-tab-title li[lay-id="' + id + '"]');
if (tab.length > 0) {
return true;
} else {
return false;
}
}
});
</script>
</body>
</html>
导入为书签
当然,上述也是咱们日常收藏的书签格式,直接导入谷歌浏览器也可以的。

感谢阅读 |
---|
Hi,我是Rucoding,码不停蹄!感谢阅读本文,欢迎一键三连哦。 |
如需对应的源码+书签文件,可以评论或者下方联系我,私信都可以哟~~~
下载"源码+书签文件"传送门