开发者社区> 贾顺名> 正文

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

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

准备工作

参考资料:

前言:

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

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

预期效果:

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

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

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

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

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

效果图:

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
vscode编辑器怎么用代码片段生成用户的文件模板?
vscode编辑器怎么用代码片段生成用户的文件模板?
555 0
常用的前端Js方法封装
常用的前端Js方法封装
73 0
【前端】js中数组对象根据内容查找符合的第一个对象
今天在写一个混合开发版的app,其中一个功能是扫描快递单号,客户要求不能扫描重复的快递单号!所有就验证查出。 首先实现思路就是:        1.定义一个全局数组变量:var nubList = [];        2.进入该扫描页面先查找已扫描的数据。
1143 0
纯前端JSON文件编辑器[0]
准备工作 参考资料: FileReader(用来获取上传文件的数据) (用来设置下载文件的名称) Blob(用来存储数据的一个容器) createObjectURL(用来将一个Blog对象转换为Base64格式资源的API) 前言:     因前段时间给老板做了个在线编辑lua文件的小工具,期间用到了上述几个新的API,感觉挺有意思,所以决定做一个在线编辑JSON文件的例子show出来,并重新捋一遍思路。
926 0
ajax处理前端 js 与后端 ModelAndView 数据绑定
ajax处理前端 js 与后端 ModelAndView 数据绑定
49 0
如何通过前端编辑Joomla模块
更新Joomla网站最困难的事情之一就是要确定要编辑的模块: 模块的名称是什么?该模块处于什么位置?现在可以轻松解决这个问题 - 只需访问站点的前端并单击它们即可编辑模块。 检查全局配置选项登录您的Joomla网站。
1046 0
vim下如何去掉windows编辑的文件中的^M
可以去掉^M, 例如: 在终端下敲命令: dos2unix a.c 直接转换成unix格式,这样就可以去掉^M    •$dos2unix filename •vim filename :%s/^M$//g ^M = Ctrl+v+m   著作权归作者所有。
860 0
C#解析json文件的方法
C# 解析 json   JSON(全称为JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript语法标准的一个子集。 JSON采用完全独立于语言的文本格式,可以很容易在各种网络、平台和程序之间传输。
1411 0
给微赞程序富文本编辑器加上传附件功能
微赞程序中,新闻编辑中,使用的ueditor,做了定制,去掉了一些按钮,但是一些情况下需要上传附件 如果给ueditor加上上传附件的图标,富文本编辑的调用是使用了以下函数的 function tpl_ueditor($id, $value = '', $options = array()) { 函数所在位置在/web/common/tpl.func.php这个文件中约985
2138 0
5款非常好用的前端在线编辑器推荐
使用在线编辑器的好处: I     提供各种在线JS或css框架 II    实时预览代码效果 III   线上保存代码 IIII  可分享   下面推荐几款很不错的在线前端编辑器 1.
970 0
+关注
贾顺名
JavaScript全沾开发一枚,喜欢研究各种好玩的东西,努力学习GO。 GitHub: https://github.com/jiasm
62
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载