几乎每个软件都能用得到!这里免费送了-夜雨聆风

几乎每个软件都能用得到!这里免费送了

“哥，帮帮我看一下这个配置文件，搞了一晚上还是报错！”

“我看看……嗯，你少写了一个逗号。”

“又少逗号？这破JSON也太难写了！”

相信很多程序员都经历过这种崩溃的时刻。JSON作为键值对的数据格式，几乎每个软件都在用，但手写起来太容易出错了。引号、逗号、大括号，一个不小心就报错。今天我来给大家介绍一个免费好用的工具，帮你彻底解决JSON编辑的痛点。

JSON是个什么鬼？

如果你没写过软件，总使用过软件吧！总见过软件里面各种配置项吧？以前Windows客户端软件喜欢用ini文件，但现在都是Web开发，几乎见不到ini的影子了。现在都使用JSON——一种轻量级的数据交换格式。

这玩意儿有多神奇？可以说几乎无处不在：

Web API交互：前后端数据交换都用JSON，打开浏览器的开发者工具，看看网络请求，清一色都是JSON格式。

配置文件：Visual Studio Code的settings.json，Node.js的package.json，几乎每个开发工具都用JSON做配置。

数据存储：MongoDB这些NoSQL数据库，用起来和JSON一模一样。

前端框架：React、Vue的状态管理，本质上都是在操作JSON数据。

微服务通信：服务之间消息传递，几乎都是JSON格式。

不管你用GitHub还是npm，都离不开JSON文件。但是有没有发现，这东西有太多问题了：

引号使用错误

缺少逗号或者多余逗号

字符串未加引号

数据类型错误

非法注释

混合数据类型

文件过大时可读性很差

空值或者缺少字段

总之，手写JSON就是一个字——烦！

我是怎么解决的

作为一个喜欢折腾的人，既然出现问题，那就造个工具解决它！

我开发了一个叫BlockCraft JSON的Vue3组件，通过类似Scratch积木块的方式，拖拖拽拽就能编辑JSON数据。先来看看效果：

像不像在玩拼图？每一个积木块代表一个字段，拖进去就有对应的输入框。不需要写任何JSON语法，只要拖进去，然后填上对应的值就行。

来看看怎么生成JSON数据：

是不是超级简单？拖积木块，实时生成JSON，所见即所得。

支持的类型也很丰富：

字符串、数字、日期、文本框、单选、多选、下拉框、数组、键值对，基本上覆盖了所有的常用数据类型。

还支持拖拽排序，调整字段位置变得轻而易举：

还能实时预览JSON内容：

积木块本身也是JSON格式，可以保存和加载配置：

除此以外还有好多功能，你可以在源代码中慢慢摸索。

快速上手

先把源代码中的components目录复制到你的Vue项目中，然后在你的界面里引用组件：

<template>  <BlockCraft    :block="blockConfig"    :theme="themeConfig"    :authority="authorityConfig"    v-model="formData"  /></template><script setup>import { BlockCraft } from 'blockcraftjson'const blockConfig = {  block: [    { key: 'name', name: '姓名', type: 'string' },    { key: 'age', name: '年龄', type: 'number' },    { key: 'sex', name: '性别', type: 'select', options: ['男', '女'] }  ]}const formData = ref({})</script>