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

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

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

整個過程中，比較有意思的是實現(xiàn)彈出層的效果，彈出層在我們?nèi)粘g覽網(wǎng)頁的時候十分普遍，它具有更好的交互效果。如下是實現(xiàn)的效果圖。

實現(xiàn)彈出層效果的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;為設(shè)置遮罩層的透明度，但是IE不認opacity，所以還需要跟IE做下兼容：filter: alpha(opacity = 75);這里的0.75和75都代表透明度為75%。

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

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

    

        

            查詢標桿清單項
        
        

        

            

                
                系統(tǒng)標桿
                 
                用戶標桿
                 圖集名稱
                
                 項目名稱
                
                
            
            

                

                    

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

                

                     
                     
                      
                
            
        
    
 

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

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 = "
"
            + "查詢標桿清單項"
            + "
"
            + "
"
            + "
"
            + "
"
            + ""
            + "系統(tǒng)標桿"
            + " "
            + "用戶標桿"
            + " 圖集名稱"
            + ""
            + " 項目名稱"
            + ""
            + " "
            + "
"
            + "
"
            + ""
            + ""
            + ""
            + ""
            + ""
            + "" + "" + "
序號
清單編碼
清單名稱
項目特征描述
單位
工程名稱
標桿類型
圖集名稱
圖集代碼
選擇
" + "
"
            + "
" + "
"
            + " "
            + " "
            + "  "
            + "
" + "
" + "
";
    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() { // 關(guān)閉彈出框
        document.body.removeChild(oMask);
        document.body.removeChild(queryItems);
    }
}

需要注意的有如下幾點：

在頁面中創(chuàng)建元素結(jié)點：

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

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

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

如果僅僅是這樣新創(chuàng)建的結(jié)點還只是停留在JS里面，要把結(jié)點插入到文檔中，需要執(zhí)行：

    document.body.appendChild(oMask);

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

    var wHeight = document.documentElement.clientHeight;

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

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

設(shè)置彈出層關(guān)閉：可以點擊彈出層的右上角，或者是點擊遮罩層，設(shè)置onclick事件即可：

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