您的位置: 首页  >  文章  >  NEO4J数据处理及显示功能

NEO4J数据处理及显示功能

分类: 文章 • 2025-02-22 23:36:40

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

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

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

NEO4J数据处理及显示功能

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

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

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

NEO4J数据处理及显示功能

大致的执行流程是：访问页面，左边动态菜单，已加载完成，点击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对页面进行布局


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

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

[plain] view plain copy
  1. <select id="selects" onchange="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请求，并使用结果集来拼接显示样式，这时候遇到了一个下拉框很普遍的类缓存问题
解决方案：
plain] view plain copy
  1. $("select > option:gt(0)").remove();
问题二：页面中显示或者隐藏某些组件
解决方案：
plain] view plain copy
  1. 使用具体的选择器(jquery)
  2. $("#select").hide();
  3. $("#select").show();
问题三：如何根据ajax结果集拼接样式展示数据
Html代码  NEO4J数据处理及显示功能
  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
这里就不说遇到什么问题了，直接把书写的时候的注意点说出来
Html代码  NEO4J数据处理及显示功能
  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数据处理及显示功能


⑧：手动提交表单，并根据结果集动态的添加不同数量不同参数的输入框组
  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. $.param(params); /*组装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();
  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;
  1. }
问题六：如何解析后台传来的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);//赋值


相关推荐