使用 Cloudflare Pages 搭建在线 JSON 格式化工具
1. 简介
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，广泛用于 API 交互和数据存储。在线 JSON 格式化工具可以帮助开发者快速美化、验证和分析 JSON 数据。
本文将介绍如何使用 Cloudflare Pages 搭建一个免费的在线 JSON 格式化工具，涵盖前端代码、部署流程和优化方案。
2. 目录
- Cloudflare Pages 简介
- 项目初始化
- 编写 JSON 格式化工具
- 部署到 Cloudflare Pages
- 额外优化与最佳实践
- 总结与参考
3. Cloudflare Pages 简介
Cloudflare Pages 是一个免费的前端托管平台，支持静态网站和 JAMstack（JavaScript、API 和 Markup）架构。它的优势包括：
- 全球 CDN 加速，让网站访问更快
- 与 GitHub 集成，支持自动化部署
- 免费使用，适合个人和小型项目
JSON 格式化工具是纯前端应用，适合使用 Cloudflare Pages 进行托管。
4. 项目初始化
首先，我们使用 Vite 创建一个简单的前端项目：
# 安装 Vite（如果尚未安装）
npm create vite@latest json-formatter --template vanilla
# 进入项目目录
cd json-formatter
# 安装依赖
npm install
然后，在 index.html 添加基本的 HTML 结构：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON 格式化工具</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<h1>在线 JSON 格式化工具</h1>
<textarea id="jsonInput" placeholder="输入 JSON"></textarea>
<button id="formatButton">格式化</button>
<pre id="jsonOutput"></pre>
<script src="/script.js"></script>
</body>
</html>
在 style.css 里添加基本样式：
body {
font-family: Arial, sans-serif;
text-align: center;
}
textarea {
width: 80%;
height: 150px;
margin: 10px 0;
}
pre {
background: #f4f4f4;
padding: 10px;
text-align: left;
overflow: auto;
}
5. 编写 JSON 格式化功能
创建 script.js，实现 JSON 格式化逻辑：
document.getElementById("formatButton").addEventListener("click", () => {
const input = document.getElementById("jsonInput").value;
const output = document.getElementById("jsonOutput");
try {
const formattedJson = JSON.stringify(JSON.parse(input), null, 4);
output.textContent = formattedJson;
} catch (error) {
output.textContent = "无效的 JSON 数据";
}
});
功能解释：
- 监听按钮点击事件
- 解析输入的 JSON
- 使用
JSON.stringify格式化 JSON - 处理错误，提示用户 JSON 无效
6. 部署到 Cloudflare Pages
6.1 创建 GitHub 仓库
在 GitHub 上新建一个仓库，并推送代码：
git init
git add .
git commit -m "初始提交"
git branch -M main
git remote add origin https://github.com/your-username/json-formatter.git
git push -u origin main
6.2 在 Cloudflare Pages 配置部署
- 进入 Cloudflare Pages
- 点击 创建项目
- 选择 GitHub 仓库
- 选择
json-formatter项目 - 配置构建：
- 构建命令：
npm run build - 发布目录：
dist（如果使用 Vite）
- 构建命令：
- 点击 部署
Cloudflare Pages 会自动拉取 GitHub 代码并进行部署，几分钟后，你可以通过 Cloudflare 提供的 URL 访问你的 JSON 格式化工具。
7. 额外优化与最佳实践
7.1 增加 JSON 校验
可以在 script.js 里添加 JSON 语法高亮 和错误提示：
function highlightSyntax(json) {
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(\.\d+)?([eE][+-]?\d+)?)/g, match => {
let cls = 'number';
if (/^"/.test(match)) {
cls = /:$/.test(match) ? 'key' : 'string';
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return `<span class="${cls}">${match}</span>`;
});
}
document.getElementById("formatButton").addEventListener("click", () => {
const input = document.getElementById("jsonInput").value;
const output = document.getElementById("jsonOutput");
try {
const formattedJson = JSON.stringify(JSON.parse(input), null, 4);
output.innerHTML = highlightSyntax(formattedJson);
} catch (error) {
output.innerHTML = '<span class="error">无效的 JSON 数据</span>';
}
});
同时在 style.css 里添加语法高亮：
.string { color: green; }
.number { color: blue; }
.boolean { color: purple; }
.null { color: gray; }
.key { color: red; }
.error { color: red; font-weight: bold; }
7.2 添加 PWA 支持
如果希望让用户离线使用，可以使用 Service Worker 实现 PWA（渐进式 Web 应用）。
8. 总结与参考
8.1 总结
- 通过 Cloudflare Pages，轻松部署 JSON 格式化工具
- 使用 Vite 快速搭建前端项目
- 代码优化包括 语法高亮 和 错误处理
- 通过 GitHub + Cloudflare 实现 自动化部署
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧