前言

发现一个很有用的Vue插件：https://www.npmjs.com/package/vue-neo4j
这个能在前端直连neo4j服务器啦，下图就是测试效果绘制三国人物图谱关系

演示地址

版本说明

vue 3.0版本
vue-neo4j 0.4.8版本
neo4j服务端版本 4.3.6版本，可以直接去官网下载。
echarts 5.22版本

开发说明

一、windows服务器部署neo4j

1、部署jdk11, 因为neo4j 4.3.6使用的版本是jdk11以上，否则启动不了哦

2、下载neo4j，解压

3、到 .\conf目录修改 neo4j.conf文件修改default_listen_address为0.0.0.0，因为不改的话，会导致启动后只能本机访问

4、cmd到.\bin目录执行 noe4j console. 这样就完成启动了

5、浏览器打开网址 http://127.0.0.1:7474

默认密码为neo4j/neo4j 首次进入会提示修改密码

二、vue3.0 版本前端工程说明

1、引入依赖 `yarn add vue-neo4j`

2、由于vue-neo4j 0.4.8 该版本只适配vue2.0版本，所以要改下源码，把 `Vue.property.$neo4j` 改为 `Vue.config.globalProperties.$neo4j`

3、main.js引入

import VueNeo4j from 'vue-neo4j';
let app = createApp(App);
app.use(VueNeo4j );

4、逻辑编写

<template><div class="neo4jMain"><div class="addContent"><el-form :inline="true" :model="formInline" :rules="rules" ref="neo4jform"><el-form-item label="开始节点名称" prop="startNode"><el-input v-model="formInline.startNode" placeholder="请输入开始节点名称"></el-input></el-form-item><el-form-item label="关系名称" prop="relationName"><el-input v-model="formInline.relationName" placeholder="请输入关系名称"></el-input></el-form-item><el-form-item label="结束节点名称" prop="endNode"><el-input v-model="formInline.endNode" placeholder="请输入结束节点名称"></el-input></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">提交</el-button>
<!--          <el-button type="primary" @click="onDelete">清空表</el-button>--></el-form-item></el-form></div><div class="echarts" ref="echarts"></div></div>
</template><script>
import * as echarts from 'echarts'export default {name: "Main.vue",mounted() {this.query();},data() {return {formInline: {startNode: '',endNode: '',relationName: ''},rules: {startNode: [{required: true, trigger: 'blur'}],endNode: [{required: true, trigger: 'blur'}],relationName: [{required: true, trigger: 'blur'}]},protocol: 'bolt',host: '127.0.0.1',port: 7687,username: 'neo4j',password: '123456',echartsData: [],nodesRelation: []}},methods: {onDelete() {this.connect();const session = this.$neo4j.getSession();let cypher = `match p=(n:Person)-[]->(m:Person) delete p `;session.run(cypher);cypher = `MATCH (n:Person) delete n`;session.run(cypher).then(() => {session.close()});this.query();},initEcharts() {// 基于准备好的dom，初始化echarts实例let myChart = echarts.init(this.$refs.echarts)// 绘制图表myChart.setOption({title: {text: 'Neo4j 图谱关系'},tooltip: {},animationDurationUpdate: 1500,animationEasingUpdate: 'quinticInOut',series: [{type: 'graph',layout: 'force',force: {edgeLength: 40,repulsion: 50,gravity: 0.1},symbolSize: 50,roam: true,label: {show: true},edgeSymbol: ['circle', 'arrow'],edgeSymbolSize: [4, 10],edgeLabel: {fontSize: 20},data: this.echartsData,// links: [],links: this.nodesRelation,lineStyle: {opacity: 0.9,width: 2,curveness: 0}}]});},query() {this.connect();const session = this.$neo4j.getSession();let cypher = `match p=(n:Person)-[]->(m:Person) return p limit 1000`;session.run(cypher).then(res => {let records = res.records;let nodes = new Set();this.nodesRelation = [];for (let i = 0; i < records.length; i++) {nodes.add(records[i]._fields[0].segments[0].start.properties.name);nodes.add(records[i]._fields[0].segments[0].end.properties.name);this.nodesRelation.push({source: records[i]._fields[0].segments[0].start.properties.name,target: records[i]._fields[0].segments[0].end.properties.name,lineStyle: {curveness: 0},label: {show: true,formatter: function() {return records[i]._fields[0].segments[0].relationship.type}}});}let curveness = [0, 0.4, -0.4, 0.3, -0.3, 0.2, -0.2, 0.1, -0.1];for (let j = 0; j < this.nodesRelation.length; j++) {let repeatNumber = 0;for (let s = j+1; s < this.nodesRelation.length; s++) {let r1 = this.nodesRelation[j];let r2 = this.nodesRelation[s];if (r1.source === r2.source &&r1.target === r2.target) {repeatNumber =  repeatNumber + 1;}else if (r1.target === r2.source &&r1.source === r2.target) {repeatNumber =  repeatNumber + 1;}}this.nodesRelation[j].repeatNumber = repeatNumber;}for (let j = 0; j < this.nodesRelation.length; j++) {console.log(this.nodesRelation[j].repeatNumber);this.nodesRelation[j].lineStyle.curveness = curveness[this.nodesRelation[j].repeatNumber];}this.echartsData = [];nodes.forEach((e) => {let index = Math.ceil(Math.random()*10);let color = () => {if (index%4===0) {return '#228B22'} else if (index%4===1) {return '#FFFF00'} else if (index%4===2) {return '#20B2AA'} else if (index%4===3) {return '#FFB6C1'}return '#87CEFA';}this.echartsData.push({name: e,x: Math.random() * 100,y: Math.random() * 100,itemStyle: {color: color()}});})this.initEcharts();}).then(() => {session.close()});},onSubmit() {this.$refs.neo4jform.validate((valid) => {if (valid) {this.connect();const session = this.$neo4j.getSession();let cypher = `Merge (n:Person{name: '${this.formInline.startNode}'})Merge (m:Person{name: '${this.formInline.endNode}'}) Merge (n)-[r:${this.formInline.relationName}]->(m)`;session.run(cypher).then(() => {this.formInline = {startNode: '',endNode: '',relationName: ''};this.query();}).then(() => {session.close()});}})},connect() {return this.$neo4j.connect(this.protocol, this.host, this.port, this.username, this.password);},driver() {// Get a driver instancereturn this.$neo4j.getDriver()},testQuery() {// Get a session from the driverconst session = this.$neo4j.getSession()// Or you can just call this.$neo4j.run(cypher, params)session.run('MATCH (n) RETURN n').then(res => {console.log(res)// console.log(res.records[0].get('count'))}).then(() => {session.close()})}}
}
</script><style scoped lang="less">
.neo4jMain {height: 100%;display: flex;flex-direction: column;.addContent {padding: 15px;box-shadow: -10px 0 10px #D3D3D3, /*左边阴影*/ 10px 0 10px #D3D3D3, /*右边阴影*/0 -10px 10px #D3D3D3, /*顶部阴影*/ 0 10px 10px #D3D3D3;}.echarts {background-color: #333;flex: 1;flex-grow: 1;}
}
</style>

结束语

优点是前端可以直接操作数据库, 弊端是数据库配置暴露了。建议还是通过后端连接数据库操作数据。

使用Vue-neo4j绘制三国人物图谱关系相关推荐

mysql三国人物库_一文带你使用neo4j生成三国人物社交关系图
简介最近给孩子买了三国演义,可是三国人物关系太复杂,就想着把三国人物关系做成一张图,这样方便看,整好neo4j图数据库非常适合社交关系的处理,下面就一起来看看,如何使用neo4j生成三国人物社交关系 ...
python关系图谱_python 绘制三国人物关系图
author:weizhendong data:2019.12.19 func:绘制三国演义人物关系图 """ import codecs import jieba.po ...
python人像绘制_python 绘制三国人物关系图
author:weizhendong data:2019.12.19 func:绘制三国演义人物关系图 """ import codecs import jieba.po ...
亲手制作一个《哈利·波特》人物图谱，原来罗恩和赫敏的姻缘从第一部就已注定？...
大数据文摘出品作者:王烨文摘菌记得小时候看<哈利·波特>小说的时候,最难记住的就是那些音译的名字,又长又多,最后只能关注那几个主要人物,跟着主要剧情一路过去,当个爽文看完了. 这就导致 ...
创新教育实例之“三国人物关系模型”
最近与一位从事高校软件工程教育的同仁(挚友)聊天,谈到如何提高学生的创新性思维,两人不免大肆吐槽一番,有谈到过目前高校教育体制.学校的培养方案等等等等,但是这些东东无论是作为我们老师还是学生,只有微不 ...
python语言通过字典实现映射关系_利威平台Python编程语言：如何用字典类型来编程统计三国人物...
上一篇文章小编对Python编程语言的组合数据学习分享给大家了,这一篇文章小编分享一下如何用字典类型来编程统计三国人物! 小编今天分享给大家用Python编程来统计三国人物出场次数,三国中的人物很多, ...
如何快速理清并绘制复杂人物关系图
两个主要方法:分类法.代际法(两种方法经常会结合着使用),基本能够把每个故事里的复杂人物关系厘清. 01 分类法简单来说,就是把相同阵营/家庭/组织的人物归类到一起.这么说可能还是有点抽象,下面以题 ...
python爬微博超话图片_Python爬虫：《庆余年》人物图谱和微博传播路径
利用Python分析<庆余年>人物图谱和微博传播路径庆余年电视剧终于在前两天上了,这两天赶紧爬取微博数据看一下它的表现. 庆余年 <庆余年>是作家猫腻的小说.这部从2007年 ...
利用Python分析《庆余年》人物图谱和微博传播路径
利用Python分析<庆余年>人物图谱和微博传播路径庆余年电视剧终于在前两天上了,这两天赶紧爬取微博数据看一下它的表现. 庆余年 <庆余年>是作家猫腻的小说.这部从2007年 ...

使用Vue-neo4j绘制三国人物图谱关系

前言

版本说明

开发说明

一、windows服务器部署neo4j

1、部署jdk11, 因为neo4j 4.3.6使用的版本是jdk11以上，否则启动不了哦

2、下载neo4j，解压

3、到 .\conf目录修改 neo4j.conf文件修改default_listen_address为0.0.0.0，因为不改的话，会导致启动后只能本机访问

4、cmd到.\bin目录执行 noe4j console. 这样就完成启动了

5、浏览器打开网址 http://127.0.0.1:7474

二、vue3.0 版本前端工程说明

1、引入依赖 `yarn add vue-neo4j`

2、由于vue-neo4j 0.4.8 该版本只适配vue2.0版本，所以要改下源码，把 `Vue.property.$neo4j` 改为 `Vue.config.globalProperties.$neo4j`

3、main.js引入

4、逻辑编写

结束语

使用Vue-neo4j绘制三国人物图谱关系相关推荐

最新文章

热门文章

使用Vue-neo4j绘制三国人物图谱关系

前言

版本说明

开发说明

一、windows服务器部署neo4j

1、部署jdk11, 因为neo4j 4.3.6使用的版本是jdk11以上，否则启动不了哦

2、下载neo4j，解压

3、到 .\conf目录修改 neo4j.conf文件修改default_listen_address为0.0.0.0，因为不改的话，会导致启动后只能本机访问

4、cmd到.\bin目录执行 noe4j console. 这样就完成启动了

5、浏览器打开网址 http://127.0.0.1:7474

二、vue3.0 版本前端工程说明

1、引入依赖 yarn add vue-neo4j

2、由于vue-neo4j 0.4.8 该版本只适配vue2.0版本，所以要改下源码，把 Vue.property.$neo4j 改为 Vue.config.globalProperties.$neo4j

3、main.js引入

4、逻辑编写

结束语

使用Vue-neo4j绘制三国人物图谱关系相关推荐

最新文章

热门文章

1、引入依赖 `yarn add vue-neo4j`

2、由于vue-neo4j 0.4.8 该版本只适配vue2.0版本，所以要改下源码，把 `Vue.property.$neo4j` 改为 `Vue.config.globalProperties.$neo4j`