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

 更新时间:2024年04月26日 14:19:23   作者:K歌、之王  
这篇文章主要介绍了使用Vue-neo4j实现绘制三国人物图谱关系,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

前言

发现一个很有用的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 instance
      return this.$neo4j.getDriver()
    },
    testQuery() {
      // Get a session from the driver
      const 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中输入框事件的使用及数值校验方式

    vue中输入框事件的使用及数值校验方式

    这篇文章主要介绍了vue中输入框事件的使用及数值校验方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue引入高德地图实现流程分步讲解

    Vue引入高德地图实现流程分步讲解

    这篇文章主要介绍了Vue引入高德地图实现流程,实现步骤是通过vue的方法引入地图,初始化地图,设置宽和高,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vite+vue3+element-plus搭建项目的踩坑记录

    vite+vue3+element-plus搭建项目的踩坑记录

    这篇文章主要介绍了vite+vue3+element-plus搭建项目的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue axios 将传递的json数据转为form data的例子

    Vue axios 将传递的json数据转为form data的例子

    今天小编就为大家分享一篇Vue axios 将传递的json数据转为form data的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue3 身份证校验、识别性别/生日/年龄的操作代码

    vue3 身份证校验、识别性别/生日/年龄的操作代码

    这篇文章主要介绍了vue3 身份证校验、识别性别/生日/年龄的操作代码,本文通过实例代码给大家介绍的非常详细,表单项绑定 @change 事件, 定义身份验证规则规则,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • 你不可不知的Vue.js列表渲染详解

    你不可不知的Vue.js列表渲染详解

    这篇文章主要给大家介绍了关于你不可不知的Vue.js列表渲染的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue.js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-10-10
  • 解析如何自动化生成vue组件文档

    解析如何自动化生成vue组件文档

    在我们的印象使用中,vue除了写业务代码没有特别新奇的功能了,今天就来看看如何自动化生成vue组件文档
    2021-06-06
  • Vue.native如何将原生事件绑定到组件

    Vue.native如何将原生事件绑定到组件

    这篇文章主要介绍了Vue.native如何将原生事件绑定到组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue中destroyed方法及使用示例讲解

    vue中destroyed方法及使用示例讲解

    这篇文章主要为大家介绍了vue中destroyed方法及使用示例讲解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 使用Vue CLI创建typescript项目的方法

    使用Vue CLI创建typescript项目的方法

    这篇文章主要介绍了使用Vue CLI创建typescript项目的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08

最新评论