vue使用neovis操作neo4j圖形數據庫及優缺點

Posted on by

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圖形數據庫內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：