V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
awesomes
V2EX  ›  分享创造

JSONT v2.0 发布

  •  
  •   awesomes · 2022-12-26 11:01:25 +08:00 · 3224 次点击
    这是一个创建于 690 天前的主题,其中的信息可能已经有所发展或是发生改变。

    大约一年前我在 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/)

    zx1gU0.png

    16 条回复    2023-01-11 09:47:12 +08:00
    kongkongye
        1
    kongkongye  
       2022-12-26 11:14:14 +08:00 via iPhone
    zzx0403
        2
    zzx0403  
       2022-12-26 13:50:56 +08:00
    点赞
    sherlockwhite
        3
    sherlockwhite  
       2022-12-26 14:58:50 +08:00
    wcao
        4
    wcao  
       2022-12-26 15:54:48 +08:00
    666 ,提个小建议,转换的时候能不能直接选择了就转换出结果啊,每次选择了语言,还要去点击一次那个箭头
    awesomes
        5
    awesomes  
    OP
       2022-12-26 15:58:24 +08:00
    @wcao 是个好建议,不过之所以要加这个提示就是因为不知道怎么确定输入的源类型,后面我会思考一下这个逻辑
    pkwenda
        6
    pkwenda  
       2022-12-26 18:10:00 +08:00
    挺好,win 下字体像 mac ,比其他网站漂亮一些
    subframe75361
        7
    subframe75361  
       2022-12-27 20:36:29 +08:00
    很适合做成浏览器扩展,op 考虑一下?
    subframe75361
        8
    subframe75361  
       2022-12-27 20:38:05 +08:00
    做成后台请求格式化工具的那种
    awesomes
        9
    awesomes  
    OP
       2022-12-27 21:48:35 +08:00   ❤️ 1
    @subframe75361 我之前其实打算做到 F12 的 Network 面板里面,直接针对某个请求进行格式化,不过 chrome 好像不支持,只能新增 F12 的自定义 tab
    awesomes
        10
    awesomes  
    OP
       2022-12-27 21:49:28 +08:00
    @pkwenda 谢谢 UI 和交互是我们的首要关注点
    lsymy
        11
    lsymy  
       2022-12-29 09:14:13 +08:00
    赞,收藏了。
    biubiu001
        12
    biubiu001  
       2022-12-29 10:35:22 +08:00
    subframe75361
        13
    subframe75361  
       2022-12-29 11:36:05 +08:00
    @biubiu001 对的,就是这种丑了点,换成 op 的样式就好很多
    awesomes
        14
    awesomes  
    OP
       2022-12-29 11:48:53 +08:00
    @biubiu001 明白了,这个跟 FeHelper 一样的,在新窗口中打开接口进行格式化,其实我很早之前有考虑过,但是最终没有做的原因是很多接口压根不是 get 请求,或者需要特殊认证的接口无法在新窗口打开,所以适用性不广。其实我还是偏向在 network 中的每个请求的 pannel 中加入格式化跳转,但是 chrome 不支持。
    yuekcc
        15
    yuekcc  
       2023-01-10 22:56:21 +08:00
    希望可以支持复制路径。比如 jq 之类的路径。
    awesomes
        16
    awesomes  
    OP
       2023-01-11 09:47:12 +08:00
    @yuekcc 这个 1.0 版本原本就有,目前正在迁移中哈
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2743 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 36ms · UTC 02:08 · PVG 10:08 · LAX 18:08 · JFK 21:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.