Neo4j+Neovis+Vue3：前端连接数据库渲染

Neovis（github）：https://github.com/neo4j-contrib/neovis.js

Neovis配置文档：neovis.js (neo4j-contrib.github.io)

一、安装Neo4j

参考文章：neo4j下载安装配置步骤-CSDN博客

二、Neovis使用

1.npm引入

 npm install --save neovis.js

2.挂载节点及配置

 <template>
   <div class="title">可视化知识图谱</div>
   <div class="neo-box">
     <div ref="viz" id="viz" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 ​
 <script setup>
 import NeoVis from "neovis.js/dist/neovis.js";
 import { onMounted, ref } from "vue";
 const config = ref({
   containerId: "viz",
   neo4j: {
     serverUrl: "bolt://localhost:7687",
     serverUser: "neo4j",
     serverPassword: "12345679",
   },
   labels: {
     Author: {label: "name",},
     Dynasty: { label: "name" },
     Poem: { label: "name" },
   },
   relationships: {},
   initialCypher: "MATCH (n)-[r]->(m) RETURN n, r, m", //查询语句
 });
 ​
 onMounted(() => {
   const vis = new NeoVis(config.value);
   vis.render();
 });
 </script>

最终效果图：鼠标滚动放大，节点可拖拽

三、踩坑经历

1.查询节点

查询语句MATCH (n) return n返回的只有节点，不显示关系

 initialCypher: "MATCH (n) return n"

使用以下语句查询关系

 initialCypher: "MATCH (n)-[r]->(m) RETURN n, r, m"

2.配置项不需要打引号“”

参考有些文章对labels的配置里的字段加了双引号“”，配置不需要双引号，而且prettier会报错。。。

错误配置：

 labels: {
   "节点标签": {
     "label": "显示的节点属性",
     ......
   }
 }

正确配置：

 labels: {
   节点标签: {
     label: "显示的节点属性",
     ......
   }
 }