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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/936012.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

《宇宙机器人》提示错误弹窗“找不到d3dx9_43.dll”是什么原因?“d3dx9_43.dll缺失”怎么解决?

电脑游戏运行时常见问题解析&#xff1a;《宇宙机器人》提示“找不到d3dx9_43.dll”的解决之道 TGA2024落幕&#xff0c;年度最佳游戏——《宇宙机器人》&#xff0c;作为一名在软件开发领域深耕多年的从业者&#xff0c;我深知电脑游戏在运行过程中可能会遇到的各种挑战&…

Cesium 限制相机倾斜角(pitch)滑动范围

1.效果 2.思路 在项目开发的时候&#xff0c;有一个需求是限制相机倾斜角&#xff0c;也就是鼠标中键调整视图俯角时&#xff0c;不能过大&#xff0c;一般 pitch 角度范围在 0 至 -90之间&#xff0c;-90刚好为正俯视。 在网上查阅了很多资料&#xff0c;发现并没有一个合适的…

28. Three.js案例-创建圆角矩形并进行拉伸

28. Three.js案例-创建圆角矩形并进行拉伸 实现效果 知识点 WebGLRenderer (WebGL渲染器) WebGLRenderer 是 Three.js 中用于渲染 3D 场景的主要渲染器。 构造器 WebGLRenderer( parameters : Object ) 参数类型描述parametersObject渲染器的配置参数&#xff0c;可选。 …

transformer学习笔记-自注意力机制(2)

经过上一篇transformer学习笔记-自注意力机制&#xff08;1&#xff09;原理学习&#xff0c;这一篇对其中的几个关键知识点代码演示&#xff1a; 1、整体qkv注意力计算 先来个最简单未经变换的QKV处理&#xff1a; import torch Q torch.tensor([[3.0, 3.0,0.0],[0.5, 4…

基于米尔全志T527开发板的OpenCV进行手势识别方案

本文将介绍基于米尔电子MYD-LT527开发板&#xff08;米尔基于全志T527开发板&#xff09;的OpenCV手势识别方案测试。 摘自优秀创作者-小火苗 米尔基于全志T527开发板 一、软件环境安装 1.安装OpenCV sudo apt-get install libopencv-dev python3-opencv 2.安装pip sudo apt…

arXiv-2024 | VLM-GroNav: 基于物理对齐映射视觉语言模型的户外环境机器人导航

作者&#xff1a; Mohamed Elnoor, Kasun Weerakoon, Gershom Seneviratne, Ruiqi Xian, Tianrui Guan, Mohamed Khalid M Jaffar, Vignesh Rajagopal, and Dinesh Manocha单位&#xff1a;马里兰大学学院公园分校原文链接&#xff1a;VLM-GroNav: Robot Navigation Using Phys…

Typora 修改默认的高亮颜色

shift F12 参考 怎么给typora添加颜色&#xff1f;

基于阿里云Ubuntu22.04 64位服务器Java及MySql环境配置命令记录

基于阿里云Ubuntu22.04 64位服务器Java及MySql环境配置命令记录 Java 23 离线环境配置MySql 环境配置MySQL常用命令 Java 23 离线环境配置 下载 Ubuntu环境下 Java 23 离线包 链接: java Downloads. 在Linux环境下创建一个安装目录 mkdir -p /usr/local/java将下载好的jdk压缩…

【树莓派4B】MindSpore lite 部署demo

一个demo&#xff0c;mindspore lite 部署在树莓派4B ubuntu22.04中&#xff0c;为后续操作开个门&#xff01; 环境 开发环境&#xff1a;wsl-ubuntu22.04分发版部署环境&#xff1a;树莓派4B&#xff0c;操作系统为ubuntu22.04mindspore lite版本&#xff1a;mindspore-li…

RK3576 Android14,内存大于4G时UVC应用无法申请内存

最近有个项目需要将Linux虚拟成UVC摄像头&#xff0c;开发过程中遇到一个奇怪的事情&#xff0c;通过V4l2框架接口申请内存时&#xff0c;相同的板子&#xff0c;只是内存一个4G一个8G。4G的内存可以申请成功&#xff0c;8G就不行。提示“内存不足” 内存更大反而内存不足&…

HarmonyOS-高级(四)

文章目录 应用开发安全应用DFX能力介绍HiLog使用指导HiAppEvent &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;HarmonyOS专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年12月11日11点18分 应用开发安全 应用隐私保护 隐私声明弹窗的作…

函数与结构体(入门6)

【深基7.例1】距离函数 #include <iostream> #include <iomanip> #include <cmath> using namespace std; int main() {double x1, x2, x3, y1, y2, y3;cin >> x1 >> y1 >> x2 >> y2 >> x3 >> y3;double d1 pow(pow(…

质数的和与积

质数的和与积 C语言代码C 代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 两个质数的和是S&#xff0c;它们的积最大是多少&#xff1f; 输入 一个不大于10000的正整数S&#xff0c;为两个质数的和。 输出 一个整…

OpenCV图像处理实战:从边缘检测到透视变换,掌握七大核心函数

一、引言 图像处理是计算机视觉领域中的基础&#xff0c;而边缘检测和轮廓分析则是其核心任务之一。OpenCV作为一个强大的计算机视觉库&#xff0c;提供了众多功能强大的函数&#xff0c;帮助开发者实现高效的图像处理。在本文中&#xff0c;我们将深入探索OpenCV中的七个重要…

JavaWeb01

JavaWeb 1. BS 和 CS BS B/S结构(Browser/server&#xff0c;浏览器/服务器模式)&#xff0c;是WEB兴起后的一种网络结构模式&#xff0c;WEB浏览器是客户端最主要的应用软件。这种模式统一了客户端&#xff0c;将系统功能实现的核心部分集中到服务器上&#xff0c;简化了系统…

开发者工具的模块化与可扩展性设计

文章目录 前言模块化设计的重要性可扩展性设计的重要性设计模式与技术实现实战代码插件管理器类&#xff1a;PluginManager注册插件方法&#xff1a;register_plugin执行插件方法&#xff1a;execute_plugin 插件实现插件 1&#xff1a;代码格式化插件插件 2&#xff1a;代码行…

嵌入式现状、机遇、挑战与展望

在当今数字化浪潮中&#xff0c;嵌入式系统宛如一颗璀璨的明珠&#xff0c;熠熠生辉&#xff0c;深刻地渗透到了我们生活的方方面面&#xff0c;成为推动现代科技进步不可或缺的关键力量。从智能家居的便捷控制&#xff0c;到工业生产的精准运作&#xff0c;再到汽车的智能驾驶…

️️️ 避坑指南:如何修复国密gmssl 库填充问题并提炼优秀加密实践20241212

&#x1f6e1;️ 避坑指南&#xff1a;如何修复国密gmssl 库填充问题并提炼优秀加密实践 ✨ 引言 在当下的数据安全环境中&#xff0c;SM4作为中国国家密码算法的代表性选择&#xff0c;被广泛应用于金融、通信和政府领域。然而&#xff0c;在实际开发中&#xff0c;即便是开…

markdown入门

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

四、个人项目系统搭建

文章目录 一、python写的后端代码二、html代码三、index.css四、js代码 效果图&#xff1a; 一、python写的后端代码 后端代码使用Flask编写&#xff0c;如下所示&#xff1a; # app.py from flask import Flask, render_template, request, jsonify, g import sqlite3 import…