vue使用neovis操作neo4j图形数据库及优缺点

 更新时间:2022年02月10日 09:50:52   作者:接着奏乐接着舞。  
这篇文章主要介绍了vue使用neovis操作neo4j图形数据库,本文给大家介绍了与常规做法的优缺点对比及使用技巧,对vue neo4j图形数据库相关知识感兴趣的朋友一起看看吧

1.前言:

由于项目需要在前端展示关系图,常规的做法是,后端操作数据库返回Json数据,前端使用d3或者echarts进行展示,奈何因为后端不给力(说是无法获取最核心的关系id),所以前端借助neovis.js插件直接操作数据库,进行展示。

2.优缺点

优点:

相比于常规做法,简单方便直接,而且neo4j数据库在处理复杂关系数据方面有优势。

缺点:

暴露账号密码,通过f12控制台直接就能看到数据的账号和密码。对此的解决方法是,使用企业版neo4j注册只读账号,或者后端直接限制数据库查询语言,既只让这个账号有读取而没有修改的权力。 (无奈啊,前端操作数据库就是不安全-.-)

3.如何使用

郑重提醒 

static文件夹放在public目录下,新建static目录

导入的时候可以直接/static

在做这个地方时,因为是想把他作为一个组件使用,可以吧vue文件注册全局组件,也可以使用iframe标签嵌入,各有优缺点。

如果是irfame嵌入的话,html文件一定放在public文件夹里面的static下,src为:/static/xxx.html

(1)首先,现在git上下载Neovis.js   https://github.com/neo4j-contrib/neovis.js

(2)将dist目录下的neovis.js以及neovis.js.map文件复制出来

 (3)粘贴到你的vue项目的static文件夹下 

 (4)然后在index.html目录下引入neovis.js,jquery没有引入的话,也需要引入,他会用到jquery

(5)然后就是neovis的vue页面,里面一共四个地方需要修改,已经标注。其他的直接复制就行 

<template>
    <div class="myDiv">
        <div id="viz"></div>
        Cypher query: <textarea rows="4" cols=50 id="cypher"></textarea><br>
        <input type="submit" value="Submit" id="reload" @click="submit">
        <input type="submit" value="Stabilize" id="stabilize" @click="stabilize">
    </div>
</template>
 
<script>
export default {
    name: '',
    components: {},
    props: {},
    data() {
        return {
            viz: {} //定义一个viz对象
        }
    },
    mounted() { this.draw() }, //渲染
    methods: {
        submit() { 
            var cypher = $("#cypher").val();
            if (cypher.length > 3) {
                this.viz.renderWithCypher(cypher);
            } else {
                console.log("reload");
                this.viz.reload();
            }
        },
        stabilize() {
            this.viz.stabilize();
        draw() {
            var config = {
                container_id: "viz",
                server_url: "后端neo4j的地址",
                server_user: "neo4j用户名,一般是neo4j",
                server_password: "neo4j密码",
                labels: {
                    //"Character": "name",
                    "Character": {
                        "caption": "name",
                        "size": "pagerank",
                        "community": "community"
                        //"sizeCypher": "MATCH (n) WHERE id(n) = {id} MATCH (n)-[r]-() RETURN sum(r.weight) AS c"
                    }
                },
                relationships: {
                    "INTERACTS": {
                        "thickness": "weight",
                        "caption": false
                //查询节点的语句,写成你们的
                initial_cypher: "match (n)-[r]->(m) return n,r,m;" 
            };
            this.viz = new NeoVis.default(config);
            this.viz.render();
            console.log(this.viz);
}
</script>
<style lang="less" scoped>
.myDiv {
    width: 800px;
    height: 800px;
textarea {
    border: 1px solid lightgray;
    margin: 5px;
    border-radius: 5px;
#viz {
    width: 100%;
    height: 80%;
    border: 1px solid #f1f3f4;
    font: 22pt arial;
input {
    border: 1px solid #ccc;
</style>

到此这篇关于vue使用neovis操作neo4j图形数据库的文章就介绍到这了,更多相关vue neo4j图形数据库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue iview实现分页功能

    vue iview实现分页功能

    这篇文章主要为大家详细介绍了vue iview实现分页功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • vue中datepicker的使用教程实例代码详解

    vue中datepicker的使用教程实例代码详解

    这篇文章主要介绍了vue-datepicker的使用,本文通过实例代码大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)

    vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘Combin

    这篇文章主要介绍了vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题)

    vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题)

    项目全线使用vue3的时候,自然使用的是配套更加契合的vite打包工具,于是自然而然会用到很多新的语法,本文给大家介绍了vue3+vite实现低版本浏览器兼容的解决方案(出现白屏问题),需要的朋友可以参考下
    2024-04-04
  • vue+highcharts实现3D饼图效果

    vue+highcharts实现3D饼图效果

    这篇文章主要为大家详细介绍了vue+highcharts实现3D饼图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue全局方法plugins/utils的实现示例

    vue全局方法plugins/utils的实现示例

    很多时候我们会在全局调用一些方法,本文主要介绍了vue全局方法plugins/utils的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2024-07-07
  • VUE中computed 、created 、mounted的先后顺序说明

    VUE中computed 、created 、mounted的先后顺序说明

    这篇文章主要介绍了VUE中computed 、created 、mounted的先后顺序说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue uniapp 防止按钮多次点击的三种实现方式

    vue uniapp 防止按钮多次点击的三种实现方式

    最近的项目完成后,在性能优化阶段需要做按钮的防止重复点击功能,本文主要介绍了vue uniapp 防止按钮多次点击的三种实现方式,具有一定的参考价值,感兴趣的可以了解一下
    2023-08-08
  • vue 在methods中调用mounted的实现操作

    vue 在methods中调用mounted的实现操作

    这篇文章主要介绍了vue 在methods中调用mounted的实现操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue时间格式化实例代码

    vue时间格式化实例代码

    本篇文章主要介绍了vue时间格式化实例代码,这里整理了详细的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论