使用 Vue 实现 JSON 在线格式化

目录

• 简介
• 项目初始化
• 实现 JSON 格式化功能
• 添加代码高亮与美化
• 完善用户交互
• 完整示例代码
• 小结
• 参考资料

简介

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，在前端和后端开发中被广泛使用。然而，手写或调试 JSON 时，可能会遇到格式混乱或难以阅读的问题。因此，开发一个JSON 在线格式化工具能提高开发效率。

本文将使用 Vue 3 + Vue Composition API 来实现一个简单的 JSON 在线格式化工具，支持：

1. 输入 JSON 字符串，格式化并高亮显示。
2. 处理 JSON 解析错误，给出错误提示。
3. 复制格式化后的 JSON 方便使用。

---

项目初始化

首先，使用 Vite 创建一个 Vue 3 项目：

npm create vite@latest json-formatter --template vue
cd json-formatter
npm install
npm run dev

在 src/components/JsonFormatter.vue 创建组件，代码结构如下：

src/
 ├── components/
 │   ├── JsonFormatter.vue
 ├── App.vue
 ├── main.js

---

实现 JSON 格式化功能

在 JsonFormatter.vue 中，使用 Vue 处理 JSON 格式化逻辑。

<template>
  <div class="json-formatter">
    <h2>JSON 在线格式化工具</h2>
    <textarea v-model="jsonInput" placeholder="请输入 JSON 数据"></textarea>
    <button @click="formatJson">格式化</button>
    <button @click="clearJson">清空</button>
    <pre v-if="jsonOutput" class="json-output">{{ jsonOutput }}</pre>
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const jsonInput = ref('');
const jsonOutput = ref('');
const error = ref('');

const formatJson = () => {
  try {
    jsonOutput.value = JSON.stringify(JSON.parse(jsonInput.value), null, 2);
    error.value = '';
  } catch (err) {
    error.value = 'JSON 格式错误，请检查输入！';
  }
};

const clearJson = () => {
  jsonInput.value = '';
  jsonOutput.value = '';
  error.value = '';
};
</script>

<style scoped>
.json-formatter {
  max-width: 600px;
  margin: auto;
  text-align: center;
}
textarea {
  width: 100%;
  height: 150px;
  padding: 8px;
  font-size: 14px;
}
button {
  margin: 10px;
  padding: 8px 12px;
  cursor: pointer;
}
.json-output {
  background: #f4f4f4;
  padding: 10px;
  white-space: pre-wrap;
  text-align: left;
}
.error {
  color: red;
}
</style>

解析说明：

• jsonInput 绑定用户输入内容。
• formatJson 解析 JSON，并使用 JSON.stringify 格式化输出。
• clearJson 清空所有内容。
• 如果 JSON 解析失败，显示错误信息。

---

添加代码高亮与美化

使用 prismjs 为格式化后的 JSON 添加语法高亮。

安装 prismjs

npm install prismjs

引入 Prism.js 并应用样式

在 JsonFormatter.vue 组件中：

<script setup>
import { ref, watch } from 'vue';
import Prism from 'prismjs';
import 'prismjs/themes/prism-tomorrow.css';

const jsonInput = ref('');
const jsonOutput = ref('');
const error = ref('');

const formatJson = () => {
  try {
    jsonOutput.value = JSON.stringify(JSON.parse(jsonInput.value), null, 2);
    error.value = '';
    highlightJson();
  } catch (err) {
    error.value = 'JSON 格式错误，请检查输入！';
  }
};

const highlightJson = () => {
  setTimeout(() => {
    Prism.highlightAll();
  }, 0);
};
</script>

<template>
  <pre v-if="jsonOutput" class="json-output">
    <code class="language-json">{{ jsonOutput }}</code>
  </pre>
</template>

---

完善用户交互

添加复制功能

<button @click="copyJson" v-if="jsonOutput">复制</button>

<script setup>
const copyJson = () => {
  navigator.clipboard.writeText(jsonOutput.value).then(() => {
    alert('复制成功！');
  });
};
</script>

---

完整示例代码

<template>
  <div class="json-formatter">
    <h2>JSON 在线格式化工具</h2>
    <textarea v-model="jsonInput" placeholder="请输入 JSON 数据"></textarea>
    <button @click="formatJson">格式化</button>
    <button @click="clearJson">清空</button>
    <button @click="copyJson" v-if="jsonOutput">复制</button>
    <p v-if="error" class="error">{{ error }}</p>
    <pre v-if="jsonOutput" class="json-output">
      <code class="language-json">{{ jsonOutput }}</code>
    </pre>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import Prism from 'prismjs';
import 'prismjs/themes/prism-tomorrow.css';

const jsonInput = ref('');
const jsonOutput = ref('');
const error = ref('');

const formatJson = () => {
  try {
    jsonOutput.value = JSON.stringify(JSON.parse(jsonInput.value), null, 2);
    error.value = '';
    highlightJson();
  } catch (err) {
    error.value = 'JSON 格式错误，请检查输入！';
  }
};

const highlightJson = () => {
  setTimeout(() => {
    Prism.highlightAll();
  }, 0);
};

const clearJson = () => {
  jsonInput.value = '';
  jsonOutput.value = '';
  error.value = '';
};

const copyJson = () => {
  navigator.clipboard.writeText(jsonOutput.value).then(() => {
    alert('复制成功！');
  });
};
</script>

<style scoped>
.json-formatter {
  max-width: 600px;
  margin: auto;
  text-align: center;
}
textarea {
  width: 100%;
  height: 150px;
  padding: 8px;
  font-size: 14px;
}
button {
  margin: 10px;
  padding: 8px 12px;
  cursor: pointer;
}
.json-output {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 10px;
  white-space: pre-wrap;
  text-align: left;
  overflow-x: auto;
}
.error {
  color: red;
}
</style>

---

小结

本文介绍了如何使用 Vue 3 实现一个 JSON 在线格式化工具，主要实现：

1. 输入 JSON 并格式化，处理错误信息。
2. 高亮显示 JSON，使用 Prism.js。
3. 支持复制功能，便于快速使用。

这个小工具可用于 Web 应用中的 JSON 处理，或者作为 Chrome 扩展的基础。

---

参考资料

• Vue 官方文档
• Prism.js 代码高亮
• Clipboard API 复制功能
• JSON在线美化工具