【JS】NEO4J数据处理及显示功能

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

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

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

【JS】NEO4J数据处理及显示功能

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

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

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

【JS】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)">

  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代码  

  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代码  

  1. 首先引入的文件 

  2. <script type="text/javascript" src="https://www.pianshen.com/article/71391879709/${pageContext.request.contextPath}/js/jquery-2.0.3.min.js"></script> 

  3. <script src="https://www.pianshen.com/article/71391879709/${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的文章分类中详细介绍

【JS】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();

  6. while(enu.hasMoreElements()){

  7. String paraName = (String)enu.nextElement();

  8. map.put(paraName,request.getParameter(paraName));

  9. }

  10. Map<String,List<Map>> listMap = null;

  11. try{

  12. listMao = Neo4jService.RunModel(map);

  13. }catch(Exception e){

  14. e.printStackTrace();

  15. }

  16. 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);//赋值



以上是 【JS】NEO4J数据处理及显示功能 的全部内容， 来源链接： utcz.com/a/68156.html

回到顶部