这篇博文也算是对最近工作的一个总结吧！

首先NEO4J是一个图形数据库，众所周知的图形，是所有表达语言中表达力最强的一个，声音，文字，肢体语言等都远远不如，所以这也是我认为为什么图形数据库的应用比较广泛，但是更加重要的应该就是他的强大的功能了吧。

大致介绍一下，图形数据库，数据库嘛：存放数据，表达关系的。最简单的图形数据库表示就是：两个节点，一条指向性关系的格式(附带的还有些小的属性，标记等)

NEO4J数据处理及显示功能_remove

首先我的做的工作就是：接收大数据接口中传递过来的数据，数据处理，页面展示。

大数据接口的服务调用：我的只需要在provide.xml配置文件中，配置相应的service服务即可，然后在Controller层进行相应的调用操作即可。

我先大致的展示一下我想要做的效果图及业务执行流程：

NEO4J数据处理及显示功能_empty_02

大致的执行流程是：访问页面，左边动态菜单，已加载完成，点击neo4j效果图展示，出现上面选择模型参数以及模型效果展示区域(但是并没有效果)，当点击菜单按钮的时候，下拉列表也已加载完成，然后选择下拉列表中的选项，下面的参数列表input组才会显示出来，并且显示的数据都是从后台数据库中获取的。


下面是我这次项目的开发流程：

①：首先左侧菜单不用我去写，只需要在数据库中配置好即可(因为已经有程序去查询数据库中的菜单选项，分别判断是否为父/子菜单，然后将数据返回给前台做展示)

②：第一版的时候，我先在下拉框中写死两个模型，然后点击切换下拉菜单，会显示不同数量的输入框效果，并且输入框中有值，这些都是通过ajax结果集拼接样式做出来的，当然参数也都是写死的，只不过不同的下拉选项，产生不同的值，这个就写个if判断就ok

③：做完这个之后，我就试着去连接neo4j的数据服务了，得到了想要的json串或者是其他格式的数据

④：在做neo4j的数据展示的时候，我甚是为难，因为没有玩过前台这种图数据显示，后来写完之后，发现基本的前台样式无非就是表单中的各种格式，还有什么表格什么的，如果其他的前台样式展示，那就是css，js，jquery的封装插件啦，然后就在网上找到了cytoscape.js插件

⑤：原本以为做的只是一个简单的小demo，后来要求需要部署的，后面就是一系列的调整工作了

⑥：第一个修改的就是nep4j的显示方式，通过网上的不太齐全的样板，终于做出来了自己的作品了，我们组长说，用自己的东西，具体的算法都是封装好的，直接调用就好了。

⑦：剩下的动态化调整，也就是ajax请求参数，异步加载下拉菜单中的数据

⑧：当选择不同的下拉选项的时候，动态的显示，不同数量，不同参数的参数组

⑨：将查询到的模型耗时动态化的展示出来

⑩：动态化的展示图数据基本工作已经完成，由于原来项目较为复杂，所以需要将模型数据展示抽取出来，独立形成一个项目

①①：通过idea创建maven工程，配置pom.xml，web.xml，spring.xml，mybatis.xml，springMVC.xml等配置文件，导入文件

①②：使用bootstrap对页面进行布局


下面将具体阐述具体功能实现遇到的一些问题：

②：按照上面的项目流程实现没有问题，主要的就在于对于具体功能实现过程中遇到的一些特点的问题。



1.  <select id="selects" οnchange="onChange(this)" style="width:100%">
2. <option value="0"checked>请选择</option>
3. <option value="1">选项一</option>
4. <option value="2">选项二</option>
5.  </select>

问题一：我写了一个function函数方法用来实现ajax请求，并使用结果集来拼接显示样式，这时候遇到了一个下拉框很普遍的类缓存问题


解决方案： 





1.  $("select > option:gt(0)").remove();

问题二：页面中显示或者隐藏某些组件



解决方案： 


1. (jquery)
2.  $("#select").hide();
3.  $("#select").show();

问题三：如何根据ajax结果集拼接样式展示数据 



1. 使用具体的选择器(jquery) 
2. $("select").append("<option value="ret[i].mid+">"+ret[i].modelName+"</option>") 
3. $("select").after("<option value="ret[i].mid+">"+ret[i].modelName+"</option>")


③：程序猿的单元测试模型junit 

1. @RunWith(SpringJUnit4ClassRunner.class) 
2. @ContextConfiguration("classpath:spring-context.xml") 
3. public class JunitTest{ 
4. @Autowird 
5. private DemoMapper demoMapper; 
6. @Test 
7. public void methodTest(){ 
8. System.out.println("This is the junit test example"); 
9. } 
10. //需要注意的是：junit测试类的名字不能是Test，环境是spring

这里就不说遇到什么问题了，直接把书写的时候的注意点说出来



1. 首先引入的文件 
2. <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.0.3.min.js"></script> 
3. <script src="${pageContext.request.contextPath}/js/graph/cytoscape.js"></script> 
4. 下面是定式样版(写死了的模板) 
5. <script>         
6. $(function(){             
7. cytoscape({ 
8. //选择div               
9. container: document.getElementById('cy'), 
10. //给两个节点和一条关系增加样式  
11. style: [       
12. { selector: 'node[label = "Person"]',        
13. css: {'background-color': '#6FB1FC', 'content': 'data(name)'}},
14. { selector: 'node[label = "Movie"]',          
15. css: {'background-color': '#F5A45D', 'content': 'data(title)'}},       
16. { selector: 'edge',          
17. css: {'content': 'data(relationship)', 'target-arrow-shape': 'triangle'}        }           
18. ], 
19. //显示节点和关系的数据源  
20. elements: {       
21. nodes: [         
22. {data: {id: '172', name: 'Tom Cruise', label: 'Person'}},          
23. {data: {id: '183', title: 'Top Gun', label: 'Movie'}}        
24. ],          
25. edges: [
26. {data: {source: '172', target: '183', relationship: 'Acted_In'}}]   
27. }, 
28. //图数据显示的布局排版               
29. layout: { name: 'grid'}              
30. });         
31. }); 
32. </script> 
33. <body> 
34. <div id="cy">
35. </div> 
36. </body> 
37. //需要注意的是：动态获取数据源的时候，需要对返回的json格式进行调整，总的来说返回来的是一个整体的对象就可以 
38. 不能是这样： nodes：[ {data:{id:'172'},name:'Tom Cruise',label:'Person'} ] 
39. 必须这样： nodes:[ {data:{id:'172',name:'Tom Cruise',label:'Person'}} ] 
40. 具体的cytoscape.js的动态使用方法，我会在我博文中的neo4j的文章分类中详细介绍


NEO4J数据处理及显示功能_json_03







⑧：手动提交表单，并根据结果集动态的添加不同数量不同参数的输入框组 

1.  function subOnclick(){

2. /*组装params对象参数*/
3. var params =$("#fromData").serializeArray();
4. $.param(params);
5. $.ajax({

6. url:"${pageContext.request.contextPath}/*/*",
7. type:"get",
8. data:params,
9. dataType:"json",
10. success:function(ret,status){

11. $("table td").remove();
12. for(var i=0;i<ret.length;i++){

13. $("#tbody").after("<tr>");
14. $("#tbody").after("<td>"+ret[i].text+"</td>");
15. $("#tbody").after("<td>"+ret[i].from+"</td>");
16. $("#tbody").after("<td>"+ret[i].to+"</td>");
17. $("#tbody").after("<tr>")
18. }
19. })

⑨：问题四：如何提交form表单  


1.  var params =$("#fromData").serializeArray();
2.  /*组装params对象参数*/copy/*组装params对象参数*/

copy /*组装params对象参数*/



遍历寻找from表单中的value //遍历查询form表单参数



1. var data = {mid:$("#selects").val()};
2. $("#formData").find("input[type='text'].each(function(){

3. var paraValue = $(this).val().trim();
4. var paraName = $(this).attr("name");
5. var paraText = $(this).attr("placeholder");
6. data[paraName] = paraValue;
7. })")


⑩：如何清空下拉菜单切换显示数据造成的类冗余   cop



  1. 在哪一个选择器后面append/after，就选择谁清空
  2. $("#tbody").empty();


问题五：jsp向controller发送一个对象，controller使用什么参数接受，不适用实体类对象的情况下（request，我竟然把作用域给忘记了）   copy


1.  @ResponseBody
2.  @RequestMapping("/testGraph")
3.  public Map<String,List<Map>> testGraph (HttpServletRequest request){

4. Enumeration enu = request.getParameterNames();
5. HashMap map = new HashMap();
6. 
7. while(enu.hasMoreElements()){

8. String paraName = (String)enu.nextElement();
9. map.put(paraName,request.getParameter(paraName));
10. }
11. Map<String,List<Map>> listMap = null;
12. try{

13. listMao = Neo4jService.RunModel(map);
14. }catch(Exception e){

15. e.printStackTrace();
16. }
17. return listMap;
18.  }

问题六：如何解析后台传来的String数据 


1.  后台传递过来的值：
2. modelInfo:{

3. modelName:"",
4.  modelParam:[{paraName:"QD",paraText:"起点"，paraValue:""},{paraName:"ID",paraText:"ID"，paraValue:""}],
5. parentName:""
6. }
7.  具体的解析操作：
8.  @ResponseBody
9.  @RequestMapping("/queryModelParams")
10.  public JSONArray queryModelParams(Integer mid){

11. List<ModelParams> lists = demoService.queryMenuParams(mid);
12. //现将结果转为jsonArray的形式
13. JSONArray jsonArray = JSONArray.fromObjrct(lists);
14. JSONArray params = null;
15. for(int i=0;i<jsonArray.size();i++){

16. //获得jsonObject对象
17. JSONObject jsonObject = (JSONObject)jsonArray.get(i);
18. //获得modelpara数组
19. Object o = jsonObject.get("modelpara");
20. //获得modelpara
21. params = JSONArray.fromObject(o);
22. }
23. return params;
24.  }

①②：问题七：使用bootstrap进行简单布局


主要使用的就是一个封装好的div


<div class="row">
 
<div class="col-xs-2">
 
<div class="col-xs-10">
 
</div>


首先class=“row”是一个整体的类比于body


然后bootstrap是12网栅格，所以上面的和不能大于12


①③问题八：对select/option下拉框进行样式调整，我当时直接查询bootstrap按照上面的写，就不会写改变事件了，后来在网上看到一个方法，顿时惊醒梦中人，在此做下记录


  1. 在select中添加class="form-control"  
  2. 如果学过easyui或者其他框架的话，都会知道，这些框架的总结就是大致是根据class=“*”来调用框架封装的div样式即可，
  3. 看到这个我才想起来。在这里分享给大家吧问题



①④：问题九：上面bootstra类的区分？


  1. .col-xs- 超小屏幕 手机 (<768px)  
  2. .col-sm- 小屏幕 平板 (≥768px)  
  3. .col-md- 中等屏幕 桌面显示器 (≥992px)  
  4. .col-lg- 大屏幕 大桌面显示器 (≥1200px)

①⑤：问题十：选中下拉框中的下拉选项/选中div后面的input-group，并赋值



    1.  选中下拉框中的下拉选项
2.  $("select>option:gt(0)").hide();
3.  <select>中<option>选项中第一个元素以后的option进行显示/异常。。。其他操作
4.  选中div中的input-group
5.  $("#formData>.input-group:gt(2)").show();
6.  在formData这个div中的input-group组中的第三个input框以后的显示
7.  对输入框进行赋值
8.  $("input[name='id']").valueOf().attr("value")//获取值
9.  $("input[name='id']").valueOf().attr("value",3);//赋值
10.