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

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

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

一、安装Neo4j

二、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: "显示的节点属性",
? ? ?......
?  }
?}