1. 程式人生 > >開發時間軸動態顯示圖譜展示功能技術收穫

開發時間軸動態顯示圖譜展示功能技術收穫

下面我來總結一下本次開發過程中的收穫,(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透明度的白色背景
                    });這些都是在做前端的時候所得。之後再修改外掛,其中的邏輯的編寫更是讓自己頭痛不已,自己掉進一個有一個的坑裡,好在自己都爬了起來。最後想說的是:聰明處於勤奮,天才在與積累,偉大都是熬出來的,這段開發經歷的總結就到這吧。