用cytoscape.js展示neo4j网络关系图 - 1. Flask

用可视化的方式来展示网络关系图是一件挺有趣的事情，在选定用cytoscape.js来显示neo4j图形数据库的数据后我做了一个原型，并用下面三篇博客来记录了做原型的过程。

• 用cytoscape.js展示neo4j网络关系图 - 1. Flask （这篇博客）
• 用cytoscape.js展示neo4j网络关系图 - 2. py2neo
• 用cytoscape.js展示neo4j网络关系图 - 3. cytoscape.js

要解决的问题

最近在找一种可视化方案来显示IT网络中的节点（PC，服务器，路由器，人）之间的关系。经过一系列的调研，初步选定如下方案。

使用的方案

• 后端
  
  • neo4j， 图形数据库用来存储网络节点及节点间的关系
  • Web框架Flask，一个基于Python的Web微框架
  • py2neo，neo4j的Python API包
• 前端
  
  • cytoscape.js，显示节点及节点间的关系
  • jQuery.js, AJAX必须用的库

• 开发平台

  • Windows 7, 64-bit

  整体的架构如下：
  

开发环境搭建

1. neo4j

   首先要去neo4j下载community免费版， 我用的是neo4j-community_windows-x64_2_2_1.exe 。

   安装后，为了简化开发，我们先把neo4j的用户鉴权关掉。这需要修改C:\neo4j-community-2.2.1\conf\neo4j-server.properties，把dbms.security.auth_enabled=true改成dbms.security.auth_enabled=false。修改后双击C:\neo4j-community-2.2.1\bin\Neo4j.bat启动neo4j server。

   在浏览器里访问“http://localhost:7474/”，如果看到下图就证明neo4j安装成功了。
   

   鉴于我们只是做一个prototyping，就不用真实的IT节点数据，直接用neo4j自带的Movie数据来做原型。照着下面的步骤做完，把Movie数据插入到neo4j库。

   1. 点击“Write Code”
      
   2. 点击“Create a graph”
      
   3. 按照指示做完第一步，你应该能看到网络图显示出来了
      
      

2. Flask, py2neo
   首先确认你已经安装了Python 2.7.x。然后还需安装Flask和py2neo。这两个Python包的安装可以用requirements.txt文件的方式安装。你可以写一个如下的文件