摘要：實現了搜索這一功能，接下來就是要把這一部分嵌入到一個平臺，因此我開始接觸編程以及前端。之前我對前端幾乎沒有什么了解，因此這一周除了體檢被檢查出來早搏參加入學典禮之外，就是在琢磨，，了，并結合需求開發了網站的一部分。

今年暑假大部分時間是在要學校，前一階段一直在學習Scala和理解Spark，但是苦于沒有實際上手的項目，盡管看了不少論文和書，但不敢說自己理解的有多深刻，所以我打算暫時擱置這一部分的內容。后一階段是出于導師的需要要解決針對海量數據進行頻繁的模糊搜索帶來的性能問題，其實一些關系型數據庫比如MySQL有自帶的Full Index，但是它們并不能很好的支持中文，于是我開始嘗試使用Elasticsearch來解決問題。當然如果我使用Elasticsearch就意味著引人了第三方的工具，因此數據同步的問題就凸顯出來。關于數據同步，elasticsearch-jdbc可以將MySQL中的數據同步到Elasticsearch，但是使用后我發現elasticsearch-jdbc存在兩個嚴重的問題：一是elasticsearch-jdbc只適合數據庫中的數據只增不減、不修改的情況，這顯然是不合理的；二是當我同步的數據量很大時，elasticsearch-jdbc并不能很完整的導入數據，因此我只能自己實現數據同步，整個過程走了一些彎路，直到后來利用bulk index來批量建立索引和批量刪除，同步的效率提高了20+倍，基本滿足了性能要求。

實現了搜索這一功能，接下來就是要把這一部分嵌入到一個平臺，因此我開始接觸Web編程以及前端。之前我對前端幾乎沒有什么了解，因此這一周除了體檢(被檢查出來早搏)、參加入學典禮之外，就是在琢磨css，JavaScript，jQuery了，并結合需求開發了網站的一部分。

整個過程中，比較有意思的是實現彈出層的效果，彈出層在我們日常瀏覽網頁的時候十分普遍，它具有更好的交互效果。如下是實現的效果圖。

實現彈出層效果的css代碼如下。

#mask {
    background: #000;
    opacity: 0.75;
    filter: alpha(opacity = 75);
    height: 1000px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000; /* 層級  */
}

有兩點需要注意：

opacity: 0.75;為設置遮罩層的透明度，但是IE不認opacity，所以還需要跟IE做下兼容：filter: alpha(opacity = 75);這里的0.75和75都代表透明度為75%。

對于一層，它不僅只有X軸和Y軸，還有Z軸，也就是層級，z-index就是用來描述層級，它的數字越大，說明層級越高，所處的位置越上。

接下來就是實現彈出界面，Elasticsearch的模糊搜索功能將用在此處，彈出界面的html以及css代碼如下(存在命名不規范的情況)。

    

        

            查詢標桿清單項
        
        

        

            

                
                系統標桿
                 
                用戶標桿
                 圖集名稱
                
                 項目名稱
                
                
            
            

                

                    

                        
序號
清單編碼
清單名稱
                        
項目特征描述
單位
工程名稱
                        
標桿類型
圖集名稱
圖集代碼
                        
選擇
                    
                
            
            

                

                     
                     
                      
                
            
        
    
 

實際上，上面的html并不是預先就已經存在的(css是預先寫好的)，而是當我觸發相應的事件后動態生成的，也就是在原有的頁面后追加遮罩層和彈出層。利用JavaScript來實現動態效果，代碼如下：

function queryItems() {
    var oMask = document.createElement("div");
    oMask.id = "mask";
    // 獲取頁面的高度和寬度
    var sHeight = document.documentElement.scrollHeight;
    var sWidth = document.documentElement.scrollWidth;
    // 獲取頁面的可視高度和寬度
    // 如果頁面是豎向的頁面，那么可視寬度和頁面寬度是相等的
    var wHeight = document.documentElement.clientHeight;
    oMask.style.height = 768 + "px";
    oMask.style.width = sWidth + "px";
    document.body.appendChild(oMask);
    var queryItems = document.createElement("div");
    queryItems.id = "queryItems";
    queryItems.innerHTML = "
"
            + "查詢標桿清單項"
            + "
"
            + "
"
            + "
"
            + "
"
            + ""
            + "系統標桿"
            + " "
            + "用戶標桿"
            + " 圖集名稱"
            + ""
            + " 項目名稱"
            + ""
            + " "
            + "
"
            + "
"
            + ""
            + ""
            + ""
            + ""
            + ""
            + "" + "" + "
序號
清單編碼
清單名稱
項目特征描述
單位
工程名稱
標桿類型
圖集名稱
圖集代碼
選擇
" + "
"
            + "
" + "
"
            + " "
            + " "
            + "  "
            + "
" + "
" + "
";
    document.body.appendChild(queryItems);
    var dHeight = queryItems.offsetHeight;
    var dWidth = queryItems.offsetWidth;
    queryItems.style.left = (sWidth - dWidth) / 2 + "px";
    queryItems.style.top = (wHeight - dHeight) / 2 + "px";
    var oClose = document.getElementById("queryItemsClose");
    oMask.onclick = oClose.onclick = function() { // 關閉彈出框
        document.body.removeChild(oMask);
        document.body.removeChild(queryItems);
    }
}

需要注意的有如下幾點：

在頁面中創建元素結點：

    var oMask = document.createElement("div");

遮罩層需要多大？因此需要獲取頁面的高度和寬度，要注意的是這是網頁的高度和寬度，而不是屏幕的高度和寬度。然后就是把獲取到的高度和寬度賦給遮罩層(oMask)，因為我的實際頁面高度小于屏幕高度，為了讓遮罩層鋪滿全屏于是將sHeight的值定義為768px，不要忘了加上單位px。

    var sHeight = document.documentElement.scrollHeight;
    var sWidth = document.documentElement.scrollWidth;
    oMask.style.height = 768 + "px";
    oMask.style.width = sWidth + "px";

如果僅僅是這樣新創建的結點還只是停留在JS里面，要把結點插入到文檔中，需要執行：

    document.body.appendChild(oMask);

可視區域是真用戶正看到的區域的大小，其中可視區域的寬度和頁面的寬度相同(大部分網頁都是豎著瀏覽的)，獲取可視區域高度的代碼如下：

    var wHeight = document.documentElement.clientHeight;

在插入遮罩層之后，我們采用相同的方法插入彈出層，如何讓彈出層出在屏幕的正中央？我們需要獲取彈出層的高度和寬度,利用可視區域的高度和寬度，以及彈出層的高度和寬度，最終確定彈出層的定位。

    var dHeight = queryItems.offsetHeight;
    var dWidth = queryItems.offsetWidth;
    queryItems.style.left = (sWidth - dWidth) / 2 + "px";
    queryItems.style.top = (wHeight - dHeight) / 2 + "px";

設置彈出層關閉：可以點擊彈出層的右上角，或者是點擊遮罩層，設置onclick事件即可：

    var oClose = document.getElementById("queryItemsClose");
    oMask.onclick = oClose.onclick = function() { // 關閉彈出框
        document.body.removeChild(oMask);
        document.body.removeChild(queryItems);
    }