JSONT v2.0 发布

2022-12-26 11:01:25 +08:00
 awesomes

大约一年前我在 v 站发布了 JSONT的第一个版本,后续收到了很多热心用户的反馈,工具也一直在迭代升级,直到最近,我感觉是时候做一个彻底的重构升级了,于是开启了“快速”的重构之旅,大约耗时 2 周。

1 、技术栈方面当然是选择了最新的 vue3+vite ,UI 选择了 Tailwind+Vuetify3 。个人很喜欢 Tailwind ,但是他本身是一个 CSS 框架,没有太好的交互组件库,于是搭配了 vuetify ,这也是个人认为做的最好(设计思想)的 vue 组件库了。

2 、网站布局从之前的左文本右树形结构改成了分开独立的视图,出发点是大多数场景下都是粘贴 JSON 到文本框中后就没有再动过文本了,所以完全可以在格式化后“去掉文本框” 目前的交互就是,用户进入网站,将 JSON 粘贴到为空的文本框中,就会自动触发格式化操作,或者手动输入完成按 Tab 键也可以触发。文本视图下也改成了 Vscode 同款在线编辑器,可以很方便地从头开始编写 JSON 。其次未来也会考虑加入类似 JSON Hero 这样更多的 JSON 视图模式。

3 、基本功能都保留且做了优化,部分功能(比如 MOCK 和函数)正在加入中

4 、由于看到之前某位仁兄的画图本域名的遭遇,而 JSONT 本身也有未登录的一键分享功能,不想牺牲这样一个方便的功能,于是决定把网站整体迁到境外,域名目前已经撤销备案正在转移中,前端和后端都部署在了境外服务中,有了 PWA 的加持目前国内速度还可以接受,除了首次可能会慢点,后续基本会比较快。

5 、如果之前访问过网站,由于 PWA 的原因,要想快速看到新版可能需要手动更新一下 worker ,具体方式就是 F12 -> Application ->Service workers -> Unresiter 然后刷新网站即可。

6 、目前和以后 JSONT 都不会放广告影响用户体验,当然这也是我个人对于一个工具型应用的原则,但是考虑到服务器成本,将来可能会加入一些额外的高级付费服务功能(类似保存服务端,但是不会影响之前已保存的文件)。

7 、由于 JSONT 的后端服务并不繁杂,之前还用了 Nest ,趁着本次重构之际加之不能再解析到阿里云 ECS ,索性将后端都放到了轻量级的 worker 中,目前来看效果还可以。

总之,很感谢有着类似需求和喜好的人使用 JSONT ,其实也是我自己经常会用的,我个人是做前端开发的,说一个我经常使用的场景,测试在线上发现了 BUG ,当然是因为数据问题,但是我们又不能连线上接口或者很麻烦,于是需要测试把线上接口的数据发给我,这个时候测试直接使用分享功能将数据以链接的形式发给我,我这边打开之后直接使用“生成接口”的功能将其变成一个可以跨域访问的接口,然后将代码里面的地址临时换成 mock 接口地址,于是便能快速复现问题了。

所以 JSONT 的很多功能都是我个人在实际开发中发现的一些场景,当然也欢迎有着类似需求的同学多多建议让 JSONT 更强大更好用。( https://jsont.run/)

3260 次点击
所在节点    分享创造
16 条回复
kongkongye
2022-12-26 11:14:14 +08:00
zzx0403
2022-12-26 13:50:56 +08:00
点赞
sherlockwhite
2022-12-26 14:58:50 +08:00
wcao
2022-12-26 15:54:48 +08:00
666 ,提个小建议,转换的时候能不能直接选择了就转换出结果啊,每次选择了语言,还要去点击一次那个箭头
awesomes
2022-12-26 15:58:24 +08:00
@wcao 是个好建议,不过之所以要加这个提示就是因为不知道怎么确定输入的源类型,后面我会思考一下这个逻辑
pkwenda
2022-12-26 18:10:00 +08:00
挺好,win 下字体像 mac ,比其他网站漂亮一些
subframe75361
2022-12-27 20:36:29 +08:00
很适合做成浏览器扩展,op 考虑一下?
subframe75361
2022-12-27 20:38:05 +08:00
做成后台请求格式化工具的那种
awesomes
2022-12-27 21:48:35 +08:00
@subframe75361 我之前其实打算做到 F12 的 Network 面板里面,直接针对某个请求进行格式化,不过 chrome 好像不支持,只能新增 F12 的自定义 tab
awesomes
2022-12-27 21:49:28 +08:00
@pkwenda 谢谢 UI 和交互是我们的首要关注点
lsymy
2022-12-29 09:14:13 +08:00
赞,收藏了。
biubiu001
2022-12-29 10:35:22 +08:00
subframe75361
2022-12-29 11:36:05 +08:00
@biubiu001 对的,就是这种丑了点,换成 op 的样式就好很多
awesomes
2022-12-29 11:48:53 +08:00
@biubiu001 明白了,这个跟 FeHelper 一样的,在新窗口中打开接口进行格式化,其实我很早之前有考虑过,但是最终没有做的原因是很多接口压根不是 get 请求,或者需要特殊认证的接口无法在新窗口打开,所以适用性不广。其实我还是偏向在 network 中的每个请求的 pannel 中加入格式化跳转,但是 chrome 不支持。
yuekcc
2023-01-10 22:56:21 +08:00
希望可以支持复制路径。比如 jq 之类的路径。
awesomes
2023-01-11 09:47:12 +08:00
@yuekcc 这个 1.0 版本原本就有,目前正在迁移中哈

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/904694

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX