vue使用neovis操作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.jshttps://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页面，里面一共四个地方需要修改，已宝哥软件园经标注。其他的直接复制就行

　　Cypherquery:50id="cypher">

　　submit"value="Submit"id="reload"@click="submit">

　　submit"value="Stabilize"id="stabilize"@click="stabilize">

　　exportdefault{

　　name:'',

　　components:{},

　　props:{},

　　data(){

　　return{

　　viz:{}//定义一个viz对象

　　}

　　},

　　mounted(){this.draw()},//渲染

　　methods:{

　　submit(){

　　varcypher=$("#cypher").val();

　　if(cypher.length>3){

　　this.viz.renderWithCypher(cypher);

　　}else{

　　console.log("reload");

　　this.viz.reloaiUWXJUd()iUWXJU;

　　}

　　},

　　stabilize(){

　　this.viz.stabilize();

　　draw(){

　　varconfig={

　　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)WHEREid(n)={id}MATCH(n)-[r]-()RETURNsum(r.weight)ASc"

　　}

　　},

　　relationships:{

　　"INTERACTS":{

　　"thickness":"weight",

　　"caption":false

　　//查询节点的语句，写成你们的

　　initial_cypher:"match(n)-[r]->(m)returnn,r,m;宝哥软件园"

　　};

　　this.viz=newNeoVis.default(config);

　　this.viz.render();

　　console.log(this.viz);

　　}

　　" data-word='script' class="" >script>

　　less"scoped>

　　.myDiv{

　　width:800px;

　　height:800px;

　　textarea{

　　border:1pxsolidlightgray;

　　margin:5px;

　　border-radius:5px;

　　#viz{

　　width:100%;

　　height:80%;

　　border:1pxsolid#f1f3f4;

　　fwww.cppcns.comont:22ptarial;

　　input{

　　border:1pxsolid#ccc;

　　" data-word='style' class="use" >style>

　　到此这篇关于vue使用neovis操作neo4j图形数据库的文章就介绍到这了,更多相关vueneo4j图形数据库内容请搜索我们以前的文章或继续浏览下面的相关文章。

　　以上内容希望能够给大家提供帮助。今后想要了解软件教程就关注宝哥软件园!