kityminder-editor + MongoDB 思维导图数据自动实时保存方案

最新推荐文章于 2024-05-11 10:03:39 发布
最新推荐文章于 2024-05-11 10:03:39 发布
阅读量782 收藏 3
点赞数 1
文章标签： 数据库 json 前端 ViewUI
原文链接：http://www.cnblogs.com/star91/p/kitymindereditor--MongoDB-si-wei-dao-tu-shu-ju-zi-.html
版权
本文介绍了如何结合kityminder-editor和MongoDB实现思维导图数据的实时保存。通过JSON-Patch计算内容变化，将diffPatches转化为MongoDB操作符进行更新。在实践中遇到数组元素删除问题，通过过滤null值解决了渲染错误。
摘要由CSDN通过智能技术生成

最近开始做自己的第一个开源项目:一个基于思维导图的测试用例管理系统MinderCase,在做了一周的技术调研后，决定采用kityminder-editor作为思维导图编辑器，为了支持实时存储，当思维导图内容变化时使用JSON-Patch计算出内容变化产生的diffPatches,然后将diffPatches传给后台映射为对应的MongoDB操作符，执行更新操作

JSON-Patch是用来描述JSON数据变化的一种形式。使用它可以避免在JSON数据只发生部分修改时发送整个文档。与HTTP Patch方法是天造地设的一对，它允许以符合标准的方式对HTTP API进行部分更新。
kityminder-editor使用JSON结构来存储数据，每个节点包括一个data字段表示节点本身的属性，children数组包含该节点的子节点，依次递归嵌套。在编辑思维导图的时候，最多的动作就是对节点的增、删、改，对于这种树形结构，借鉴传统关系型数据库的设计思路，可以使用节点引用的存储方法，参考MongoDB树形结构建模，但是在很多情况下，节点的增删查改会会引起大量的数据库操作，因此可以充分发挥MongoDB的优势，把整个JSON数据存储在一个doc

最低0.47元/天 解锁文章
weixin_30414155
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
kity-minder-editor
04-23
kity-minder-editor本地化改造，是百度的一个开源项目，根据网上教程改造。
KityMinder-Editor
05-29
Kity Minder 简介 KityMinder 是百度 FEX 团队的 f-cube 小组（原 UEditor 小组）的又一力作。作为一款在线的脑图编辑工具，它有着不亚于 native 脑图工具的交互体验。同时，它充分发挥了 Web 云存储的优势，可以直接将编辑中的脑图同步到云端。此外，借由独创的 “云盘分享”功能，用户可以一键将当前编辑的脑图直接生成在线链接共享给其他用户，实现无缝沟通。 KityMinder 基于 SVG 技术实现，支持绝大多数的主流浏览器，包括： Chrome Firefox Safari Internet Explorer 10 或以上 线上版本 产品地址： 依赖说明 KityMinder 依赖 Kity、FIO、FUI 库。需要二次开发 KityMinder，需要先从 Github 上拉代码下来： git clone https://github.com/fe
推荐开源项目：KityMinder Editor —— 强大的脑图编辑神器
gitblog_00028的博客
05-11 407
推荐开源项目：KityMinder Editor —— 强大的脑图编辑神器 项目地址:https://gitcode.com/fex-team/kityminder-editor 项目介绍 KityMinder Editor 是一款高效、轻巧、用户体验卓越的在线脑图编辑工具，专为编辑树状、图形和网状结构数据设计。源于百度 FEX 团队，它在百度脑图项目中得以实际应用，将复杂的编辑功能与直观的用户界...
KityMinder Editor ========== ## 简介 KityMinder Editor 是一款强大、简洁、体验优秀的脑图编辑工具，适合用于编辑树/图/网等结构的数据。
sunnywei_yiyi的专栏
08-01 2772
KityMinder Editor ========== ## 简介 KityMinder Editor 是一款强大、简洁、体验优秀的脑图编辑工具，适合用于编辑树/图/网等结构的数据。 编辑器由百度 [FEX](https://github.com/fex-team) 基于 [kityminder-core](https://github.com/fex-team/
kityminder-editor:强大的思维导图编辑工具
05-02
KityMinder Editor 简介 KityMinder Editor 是一款强大、简洁、体验优秀的脑图编辑工具，适合用于编辑树/图/网等结构的数据。 编辑器由百度 基于 搭建，并且在中使用。 他们的区别与联系如下： 是 kityminder 的核心部分，基于百度 开发的矢量图形库 。包含了脑图数据的可视化展现，简单编辑功能等所有底层支持。 基于 kityminder-core 搭建，依赖于 AngularJS，包含 UI 和热盒 等方便用户输入的功能，简单来说，就是一款编辑器。 基于 kityminder-editor，加入了第三方格式导入导出 (FreeMind, XMind, MindManager) 、文件储存、用户认证、文件分享、历史版本等业务逻辑。 功能 基本操作：文本编辑，节点折叠、插入、删除、排序、归纳、复制、剪切、粘贴等 样式控制：字体、加粗、斜体、颜
kityminder-editor 百度脑图与my-mind 使用体验
小生测试的博客
08-31 3412
1. kityminder 脑图 安装参考以下文档 https://www.cnblogs.com/pellime/p/9795075.html 操作 2. my-mind 脑图 linux安装： 新建一个文件目录 mymind git clone https://github.com/ondras/my-mind.git 安装apache 服务 yum -y install httpd ...
MongoDB思维导图
12-10
- **复制集**：提供数据冗余和故障转移，由多个节点组成，数据自动同步。 - **分片集群**：用于水平扩展，将数据分散到多个节点上，以处理大量数据和高并发读写。 8. **MongoDB Shell**： - 它是MongoDB的交互式...
Python-Flask-MongoDB:python-flask+mongodb实现的简单的restful api
05-12
在本项目"Python-Flask-MongoDB"中，我们将探讨如何使用Python的Flask框架与MongoDB数据库来构建一个RESTful API。RESTful API是一种遵循REST（Representational State Transfer）架构约束的Web服务设计风格，它使得...
MongoDB思维导图，常用命令及安装使用等
最新发布
06-05
- **数据存储目录创建**：MongoDB默认将数据存储在`db`目录下，但这个目录不会自动创建，安装完成后需手动创建该目录，建议放置于根目录（如：C:\ 或 D:\）。 - **运行MongoDB服务器**：通过命令行运行`C:\mongodb...
go-mysql-mongodb:将MySQL数据同步到MongoDB
05-23
go-mysql-mongodb是一项将MySQL数据自动同步到MongoDB的服务。 它首先使用mysqldump来获取原始数据，然后与binlog增量同步数据。 安装 安装Go（ ）并设置您的 go get github.com/WangXiangUSTC/go-mysql-mongodb ...
flask-mongo-boilerplate:python Web应用程序模板-Flask + MongoDB
05-15
python Web应用程序模板-Flask + MongoDB 这是一个高度可配置的python Web应用程序样板。 它使用Flask，MongoDB，自定义日志记录和环境配置来进行轻松，强大的开发。 脚步： 在项目中搜索“ TODO”以填充配置。 ...
KityMinder百度脑图一款在线的脑图编辑工具
08-08
KityMinder 是百度FEX团队的f-cube小组（原UEditor小组）的又一力作。作为一款在线的脑图编辑工具，它有着很多Native编辑工具的交互体验。KM与UE有着一样的宗旨，就是注重最终用户的使用体验。
kityminder-js
03-23
类似XMind的js图形插件，自己做了显示位置代码优化。 KityMinder 是一款强大的脑图可视化/编辑工具，由百度 FEX 团队开发并维护。 其中 KityMinder-Core 是它的核心实现部分： 包括脑图数据的可视化展示（Json 格式） 包括简单的编辑功能（节点创建、编辑、删除）。需要丰富编辑功能的请移步 KityMinder 编辑器。 不包含第三方格式（FreeMind、XMind、MindManager、纯文本、Markdown 等）的支持，可以加载 kityminder-protocol 来扩展第三方格式支持。 不包含文件存储的支持，需要自行实现存储。可参照百度脑图中的开源的 fio + 百度网盘方案进行实现。
用ASP.NET二次开发百度脑图KityMinder
12-13
使用开源项目百度脑图开发自己的脑图,实现导入导出,后台采用ASP.net,项目可正常运行.
kityminder-core:强大的脑图可视化工具
04-01
KityMinder核心 简介 KityMinder是一款强大的脑图可视化/编辑工具，由百度FEX团队开发并维护。 本仓库是KityMinder的核心实现部分： 包括脑图数据的可视化展示（Json格式） 包括强大的编辑功能的KityMinder编辑器请移步 不包含第三方格式（FreeMind，XMind，MindManager）的支持，可以加载来扩展第三方格式支持。 不包含文件存储的支持，需要自行实现存储。参照柯林斯中的开源的FIO +百度网盘方案进行实现。 使用 可以参考进行使用。 < div xss=removed> < / div > < script type = "text/javascript" src = "kityminder.core.min.js" > < / script > < script type = "text/javascript
syslog收集：eventlog+syslog-ng+mongodb
04-14
`mongodb.txt`可能是syslog-ng配置中关于如何连接到MongoDB的详细说明，或者包含了一些示例命令，展示了如何在MongoDB中处理syslog数据。 集成eventlog、syslog-ng和MongoDB的过程大致如下： 1. 配置syslog-ng在...
使用百度脑图kityminder-editor进行数据可视化二次开发
热门推荐
u011468619的博客
04-26 1万+
KityMinder Editor 是一款强大、简洁、体验优秀的脑图编辑工具，适合用于编辑树/图/网等结构的数据。 编辑器由百度 FEX 基于 kityminder-core 搭建，并且在百度脑图中使用。 根目录下的 index.html 为开发环境，dist 目录下的 index.html 使用打包好的代码，适用于线上环境。 1、安装 nodejs 和 npm 2、初始化：切到 ki
(十)、kityminder支持富文本的编辑
saii的专栏
02-24 893
前段时间，去试用了下processon 上的脑图功能，发现人家这块确实已经做的好强大了。而且他的节点竟然还可以支持单独某个文本的颜色字体的设置，这个可是连xmind，本身都没有实现的功能的。所以想着学习下人家的实现看看是否能够借鉴到我们的平台上来。
flume数据采集_基于nginx+flume+kafka+mongodb实现埋点数据采集
05-17
flume是一个分布式、可靠、高可用的数据采集、聚合和传输系统。在数据采集方面，flume可以很好地与nginx、kafka、mongodb等常见的数据处理工具和数据库进行集成。下面介绍一下基于nginx+flume+kafka+mongodb实现埋点数据采集的步骤： 1. 配置nginx服务器，将所有的http请求都转发到flume服务器上。可以使用nginx的proxy_pass指令来实现。 2. 在flume服务器上，配置flume agent来接收nginx服务器转发过来的http请求，并将请求数据转发给kafka服务器。flume的配置文件中需要设置source、channel和sink三个部分，具体配置可以参考flume官方文档。 3. 在kafka服务器上，创建一个topic来存储flume发送过来的http请求数据。可以使用kafka的命令行工具kafka-topics来创建topic。 4. 在flume服务器上，配置一个kafka sink来将http请求数据发送到kafka服务器上的指定topic中。 5. 在mongodb数据库中创建一个collection来存储http请求数据。可以使用mongodb的命令行工具mongo来创建collection。 6. 在flume服务器上，配置一个mongodb sink来将http请求数据从kafka服务器中消费，并将其存储到mongodb数据库中的指定collection中。 7. 启动nginx、flume、kafka和mongodb服务，并进行测试。可以使用curl等工具模拟http请求，并查看数据是否能够被成功采集、存储到mongodb中。 以上就是基于nginx+flume+kafka+mongodb实现埋点数据采集的基本步骤。需要注意的是，具体的配置和实现过程可能会因为不同的业务需求而有所差异。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值