纯前端JSON文件编辑器[0]

简介: 准备工作 参考资料: FileReader(用来获取上传文件的数据) (用来设置下载文件的名称) Blob(用来存储数据的一个容器) createObjectURL(用来将一个Blog对象转换为Base64格式资源的API) 前言:     因前段时间给老板做了个在线编辑lua文件的小工具,期间用到了上述几个新的API,感觉挺有意思,所以决定做一个在线编辑JSON文件的例子show出来,并重新捋一遍思路。

准备工作

参考资料:

前言:

    因前段时间给老板做了个在线编辑lua文件的小工具,期间用到了上述几个新的API,感觉挺有意思,所以决定做一个在线编辑JSON文件的例子show出来,并重新捋一遍思路。

    代码会在 这里 更新,不出意外应该会使用ES6的语法进行编码。

预期效果:

    上传一个json文件,在页面中生成一个对应的树形结构;

    单击某个节点,会在右侧显示该节点的属性(值类型的子节点);

    在节点上点击展开,会展开该节点,显示出该节点下的子节点;

    关于数据的一套完整的CRUD操作;

    点击下载,获取修改后的json文件;

效果图:

    这个Demo的周期应该会很长。。。但是希望能够写Blog把这个过程记录下来,之前实现的那版过于随意,这次会出一个更精致的。

目录
相关文章
|
2月前
|
前端开发 JavaScript Java
前端限制打包文件数量
前端限制打包文件数量
175 65
|
2月前
|
前端开发
前端引入字体文件
文章介绍了如何在前端项目中引入字体文件,并展示了具体的HTML和CSS代码示例,包括如何使用`@font-face`规则来定义字体和在页面中应用自定义字体。
62 1
前端引入字体文件
|
3月前
|
XML JSON 前端开发
【Web前端揭秘】XML与JSON:数据界的双雄对决,你的选择将如何改写Web世界的未来?
【8月更文挑战第26天】本文深入探讨了XML和JSON这两种广泛使用的数据交换格式在Web前端开发中的应用。XML采用自定义标签描述数据结构,适用于复杂层次数据的表示,而JSON则以键值对形式呈现数据,更为轻量且易解析。通过对两种格式的示例代码、结构特点及应用场景的分析,本文旨在帮助读者更好地理解它们的差异,并根据实际需求选择最合适的数据交换格式。
57 1
|
1月前
|
SQL 关系型数据库 MySQL
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
62 2
前端JS读取文件内容并展示到页面上
|
20天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
103 0
|
20天前
|
前端开发 JavaScript API
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
前端基于XLSX实现数据导出到Excel表格,以及提示“文件已经被损坏,无法打开”的解决方法
88 0
|
2月前
|
前端开发
前端diff文件对比使用worker进行优化
如何使用Web Worker在React项目中优化文件对比差异功能的实现。
42 5
|
3月前
|
资源调度 前端开发 JavaScript
前端 nodejs 命令行自动调用编译 inno setup 的.iss文件
前端 nodejs 命令行自动调用编译 inno setup 的.iss文件
|
3月前
|
Java Spring 容器
彻底改变你的编程人生!揭秘 Spring 框架依赖注入的神奇魔力,让你的代码瞬间焕然一新!
【8月更文挑战第31天】本文介绍 Spring 框架中的依赖注入(DI),一种降低代码耦合度的设计模式。通过 Spring 的 DI 容器,开发者可专注业务逻辑而非依赖管理。文中详细解释了 DI 的基本概念及其实现方式,如构造器注入、字段注入与 setter 方法注入,并提供示例说明如何在实际项目中应用这些技术。通过 Spring 的 @Configuration 和 @Bean 注解,可轻松定义与管理应用中的组件及其依赖关系,实现更简洁、易维护的代码结构。
50 0