开发时间轴动态显示图谱展示功能技术收获

下面我来总结一下本次开发过程中的收获，（1）在前端向后端请求数据一般用的都是ajax进行请求，其中有关ajax的知识点我在这里简单的谈谈我现阶段比较粗浅的认识，首先ajax默认的是异步请求，如果想进行同步请求的话要把async设置成false,同步和异步请求的区别的地方是：用ajax进行同步请求时，如果ajax请求的过程没有完成的话是不允许进行其他程序得运行的，只有把ajax请求完成之后，才能运行其他的程序，这有个好处是对那些需要ajax请求后的数据的程序可以在ajax请求完成后进行运行，可以避免不必要的错误。ajax的异步请求和同步请求恰恰相反，它在运行的过程中是允许其他程序运行，不具有排他性，可以和其他程序并发执行，ajax的两种请求方式要根据实际需要进行合理的选择和运用。ajax请求后服务器所传到前端的数据类型dataType一般是json,ajax请求的类型type通常是post和get两种方式，目前我了解到就是这两个。ajax请求包括所要请求的url,传递到后台的数据data,以及数据获取成功后的success之后的后期处理，这需要进行if (data == undefined || data == null)验证，如果传到前端的data没有定义或者为空的话，就不能继续往下执行。

其次是后台的有关程序的处理问题，首先我get到的第一个知识点是：把从数据库中取到的值放入到实体类参数中加以保存然后在传到前端（这样理解不知道对不对，反正以我现阶段的水平理解就是这样，可能比较肤浅），起初在进行如何向后台查询数据的时候出现了思路上的错误，我最开始的想法是用javascript编写一个程序将一段时间内查询图谱时，将后台需要的查询时间在前端进行处理然后一个一个的进行后端的请求，这无疑是个错误。最后同事给它指点是应该在前端传输查询的起始和结束的日期到后端然后将在后端编写查询的时间范围在数据库中进行查询，或者直接在数据库中编写查询的条件进行查询，然后将数据查到前端。绕了一个弯路终于找到了一个正确的方向了，然后就直接在数据库中设置查询条件进行查询，结果还是失败，因为数据库表对应的实体类只定义了一个时间参数time，并没有定义startTime和endTime所以这条路显然走不通，最后实在service中的文件编写查询条件 

sqlmm = " and convertT(a.time,'yyyy-mm-dd hh') >= '" + startTime + "' and" + " convertT(a.time,'yyyy-mm-dd hh')<= '" + endTime + "' ";这条代码就可以实现所要求的目标。在实际的开发中才真正接触到springMVC框架的开发，以前学的都是一些理论知识，这次是实打实的开发，对这些知识的理解和运用很显然超过之前的纸上谈兵的阶段。所谓的困难其实就是自己进步的阶梯，是自己能力的孵化器，更是走上成功的垫脚石。

之后是实现openlayer中的图层的轮播效果，这部分知识自己之前是一片空白，所以刚开始入手的时候是非常的不知所措。但在前辈的指导下以及借鉴之前的代码经过一番挣扎才完成，附上代码：

var Num=0;
                timer = setInterval(function(){    //开启定时器
                    
                        if(Num ==timeArray.length-1){
                            Num = 0;
                        }else{
                            Num ++;
                        }
                      var str = timeArray[Num];
                      for (var s = 0, ss = layers.length; s < ss; ++s) {
                      if(layers[s].get("name").indexOf("ldsm") != -1 && layers[s].get("name").substring(4,14) == str) {
                        layers[s].setVisible(true);
                    }else{
                        layers[s].setVisible(false);
                    }
                    }
             
            },3000); 

通过这个轮播效果的完成我知道了能创建轮播效果的setInterval(function(){},speed)方法，以及去除轮播效果的方法clearInterval(function(){},speed)。以上所展现的代码看起来很简单，但当初自己可以费了九牛二虎之力才完成的，真的是朝思暮想，思而不得，内心抓狂。

 

接着就是添加时间轴插件，时间轴插件添加的时候遇到的第一个困难就是不知道如何动态的把起始时间添加到时间轴中，其中又挣扎了一番，然后前辈采用了js开发中的window.onload =function(){}的加载事件之后解决了我的问题，这就主要涉及到我的专业经验的缺乏了，遇到一些问题不知道如何去解决，没有经验去借鉴，所以在以后的开发实践中应该注重经验的积累。至于javascript开发中的函数调用，之前也看过相关的知识点但就是没有实际的开发过，所以等到自己上手开发做的时候就手足无措了。后来经过一番挫折后和前辈的指导下开始了一些低级的函数调用的开发，有了一种豁然开朗的感觉。之后的代码$("#timePlay").html("")开阔了我的思路，我知道如何用javascript进行html样式的修改，深受启发，于是就在增加标题中用到了这些知识，例如：$(".product_name").html("拼接图谱");  
                         $(".product_name").css("display","block")；
                         $(".backColor").css("display","block")；
                         $(".time").css("display", "block");之后又学习到了如何添加加载图标的知识，不废话附上代码：

                         loadinger = layer.load(1, {
                          shade: [0.1,'#393D49'] //0.1透明度的白色背景
                    });这些都是在做前端的时候所得。之后再修改插件，其中的逻辑的编写更是让自己头痛不已，自己掉进一个有一个的坑里，好在自己都爬了起来。最后想说的是：聪明处于勤奋，天才在与积累，伟大都是熬出来的，这段开发经历的总结就到这吧。