一个Neo4j的CURD简单可视化

608 阅读2分钟
仓库地址

starry-graph

概述

在记不得多久的之前的项目中接触到了知识图谱的需求,当时的知识图谱后端是以Neo4j存储数据,前端使用Antv G6可视化。虽然平时梳理一些业务和内容时更多的会使用ProcessOn、XMind这类脑图工具,但有些内容还是更适合以图的形式存储,因此就想做一个类似XMind这样的知识图谱软件,我原计划是打算用Electron实现客户端,服务用Python打包一个,数据库就用Neo4j就行,是不是很大胆?但是后来我还是放弃了。

要使用Neo4j管理数据的话,就得带上Neo4j、jdk,加上软件本身可能就一点也不方便了,毕竟起初本来就想简单做个CURD能用就行;要是用其他离线关系数据库,自己来设计表来管理数据的话,方便是方便了,就是丢弃了Neo4j本身所提供的长处,毕竟不是为了做成熟软件。

考虑到一开始只是为了方便,对我个人而言,自己的电脑环境也都有,所以最终就只做了一个静态网页,和Neo4j自身提供的静态页面最大的区别就是CURD从执行Cypher语句变成了表单式的点点点。

涉及环境、技术或库

Neo4j、jdk、Vue3、Vite、Pinia、neo4j-driver、element-plus、vueuse、cypher

成品
默认页

home.png

搜索图谱

search.png

增加、编辑节点 增加关系

opera.png

查看节点信息

float.png

查看、编辑、删除关系信息

relation.png

快捷操作(编辑节点、编辑关系、删除节点),查询关联节点

node.png

其他

如果没有使用过Neo4j的朋友也可以尝试一下,对应操作处具有提示信息说明,仓库的Readme文件提供了项目运行的完整步骤。

下面是一些原计划实现但放弃的功能
  • 配置节点,关系的颜色,宽度,大小等基本信息(信息同样使用Neo4j存储,前期已经在节点标签上做了区分)
  • 统一页面深浅色呈现(原计划不打算使用UI库,因为零碎时间不多想着先把功能做完再优化就先引入了element plus,做好了以后我觉得element plus挺好的,不打算再优化了)
  • 设计语言的优化(这一点更多的是操作模式,便捷性,极限情况等方面的设计,不用说我躺平了)
  • ......

上面这些未完成的步骤在起初都有考虑,如果有朋友打算二次开发或优化应该很容易就能在代码里看出来,所以,就这样。

(2023.10.12已经开放了仓库,同时也添加了可以快速体验的下载即用压缩包)