加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 大数据 > 正文

NEO4J数据处理及显示功能

发布时间：2020-12-14 03:12:19 所属栏目：大数据 来源：网络整理
导读：这篇博文也算是对最近工作的一个总结吧！ 首先NEO4J是一个图形数据库，众所周知的图形，是所有表达语言中表达力最强的一个，声音，文字，肢体语言等都远远不如，所以这也是我认为为什么图形数据库的应用比较广泛，但是更加重要的应该就是他的强大的功能了吧

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

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

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

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

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

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

大致的执行流程是：访问页面，左边动态菜单，已加载完成，点击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
    $("select > option:gt(0)").remove();
问题二：页面中显示或者隐藏某些组件
解决方案：
plain]? view plain? copy
    使用具体的选择器(jquery)
  1. $("#select").hide();
  2. $("#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. <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.0.3.min.js"></script>?
  2. <script src="${pageContext.request.contextPath}/js/graph/cytoscape.js"></script>?
  3. 下面是定式样版(写死了的模板)?
  4. <script> ? ? ? ??
  5. $(function(){ ? ? ? ? ? ??
  6. cytoscape({?
  7. //选择div ? ? ? ? ? ? ??
  8. container: document.getElementById('cy'),?
  9. //给两个节点和一条关系增加样式 ?
  10. style: [ ? ? ??
  11. { selector: 'node[label = "Person"]',? ? ? ?
  12. css:?{'background-color': '#6FB1FC','content': 'data(name)'}},
  13. { selector: 'node[label = "Movie"]',? ? ? ? ?
  14. css: {'background-color': '#F5A45D','content': 'data(title)'}},? ? ??
  15. { selector: 'edge',250)"> css: {'content': 'data(relationship)','target-arrow-shape': 'triangle'} ? ? ? ?} ? ? ? ? ??
  16. ],250)"> //显示节点和关系的数据源 ?
  17. elements: { ? ? ??
  18. nodes: [ ? ? ? ??
  19. {data: {id: '172',name: 'Tom Cruise',label: 'Person'}},250)"> {data: {id: '183',title: 'Top Gun',label: 'Movie'}} ? ? ? ?
  20. edges: [
  21. {data: {source: '172',target: '183',relationship: 'Acted_In'}}] ??
  22. },250)"> //图数据显示的布局排版 ? ? ? ? ? ? ??
  23. layout: { name: 'grid'} ? ? ? ? ? ? ?
  24. }); ? ? ? ??
  25. });?
  26. </script>?
  27. <body>?
  28. <div id="cy">
  29. </div>?
  30. </body>?
  31. //需要注意的是：动态获取数据源的时候，需要对返回的json格式进行调整，总的来说返回来的是一个整体的对象就可以?
  32. 不能是这样： nodes：[ {data:{id:'172'},name:'Tom Cruise',label:'Person'} ]?
  33. 必须这样： nodes:[ {data:{id:'172',label:'Person'}} ]?
  34. 具体的cytoscape.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",108); list-style:decimal-leading-zero outside; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> data:params,108); list-style:decimal-leading-zero outside; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> dataType:"json",108); list-style:decimal-leading-zero outside; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> success:function(ret,status){
  8. $("table td").remove();
  9. for(var i=0;i<ret.length;i++){
  10. $("#tbody").after("<tr>");
  11. $("#tbody").after("<td>"+ret[i].text+"</td>");
  12. $("#tbody").after("<td>"+ret[i].from+"</td>");
  13. $("#tbody").after("<td>"+ret[i].to+"</td>");
  14. $("#tbody").after("<tr>")
  15. }
  16. })
⑨：问题四：如何提交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
    在哪一个选择器后面append/after，就选择谁清空
  1. $("#tbody").empty();
问题五：jsp向controller发送一个对象，controller使用什么参数接受，不适用实体类对象的情况下（request，我竟然把作用域给忘记了） copy
    @ResponseBody
  1. @RequestMapping("/testGraph")
  2. public Map<String,List<Map>> testGraph (HttpServletRequest request){
  3. Enumeration enu = request.getParameterNames();
  4. 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. return listMap;
    }
问题六：如何解析后台传来的String数据
    后台传递过来的值：
  1. modelInfo:{
  2. modelName:"",
  3. modelParam:[{paraName:"QD",paraText:"起点"，paraValue:""},{paraName:"ID",paraText:"ID"，paraValue:""}],108); list-style:decimal-leading-zero outside; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> parentName:""
  4. }
  5. 具体的解析操作：
  6. @ResponseBody
  7. @RequestMapping("/queryModelParams")
  8. public JSONArray queryModelParams(Integer mid){
  9. List<ModelParams> lists = demoService.queryMenuParams(mid);
  10. //现将结果转为jsonArray的形式
  11. JSONArray jsonArray = JSONArray.fromObjrct(lists);
  12. JSONArray params = null;
  13. for(int i=0;i<jsonArray.size();i++){
  14. //获得jsonObject对象
  15. JSONObject jsonObject = (JSONObject)jsonArray.get(i);
  16. //获得modelpara数组
  17. Object o = jsonObject.get("modelpara");
  18. //获得modelpara
  19. params = JSONArray.fromObject(o);
  20. return params;
  21. }
①②：问题七：使用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按照上面的写，就不会写改变事件了，后来在网上看到一个方法，顿时惊醒梦中人，在此做下记录
    在select中添加class="form-control" ?
  1. 如果学过easyui或者其他框架的话，都会知道，这些框架的总结就是大致是根据class=“*”来调用框架封装的div样式即可，
  2. 看到这个我才想起来。在这里分享给大家吧问题

①④：问题九：上面bootstra类的区分？
    .col-xs- 超小屏幕 手机 (<768px) ?
  1. .col-sm- 小屏幕 平板 (≥768px) ?
  2. .col-md- 中等屏幕 桌面显示器 (≥992px) ?
  3. .col-lg- 大屏幕 大桌面显示器 (≥1200px)
①⑤：问题十：选中下拉框中的下拉选项/选中div后面的input-group，并赋值
    选中下拉框中的下拉选项
  1. $("select>option:gt(0)").hide();
  2. <select>中<option>选项中第一个元素以后的option进行显示/异常。。。其他操作
  3. 选中div中的input-group
  4. $("#formData>.input-group:gt(2)").show();
  5. 在formData这个div中的input-group组中的第三个input框以后的显示
  6. 对输入框进行赋值
  7. $("input[name='id']").valueOf().attr("value")//获取值
  8. $("input[name='id']").valueOf().attr("value",3);//赋值

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同