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

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

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

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

實(shí)現(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; /* 層級(jí)  */
}

有兩點(diǎn)需要注意：

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

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

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

    

        

            查詢標(biāo)桿清單項(xiàng)
        
        

        

            

                
                系統(tǒng)標(biāo)桿
                 
                用戶標(biāo)桿
                 圖集名稱
                
                 項(xiàng)目名稱
                
                
            
            

                

                    

                        
序號(hào)
清單編碼
清單名稱
                        
項(xiàng)目特征描述
單位
工程名稱
                        
標(biāo)桿類型
圖集名稱
圖集代碼
                        
選擇
                    
                
            
            

                

                     
                     
                      
                
            
        
    
 

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

function queryItems() {
    var oMask = document.createElement("div");
    oMask.id = "mask";
    // 獲取頁(yè)面的高度和寬度
    var sHeight = document.documentElement.scrollHeight;
    var sWidth = document.documentElement.scrollWidth;
    // 獲取頁(yè)面的可視高度和寬度
    // 如果頁(yè)面是豎向的頁(yè)面，那么可視寬度和頁(yè)面寬度是相等的
    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 = "
"
            + "查詢標(biāo)桿清單項(xiàng)"
            + "
"
            + "
"
            + "
"
            + "
"
            + ""
            + "系統(tǒng)標(biāo)桿"
            + " "
            + "用戶標(biāo)桿"
            + " 圖集名稱"
            + ""
            + " 項(xiàng)目名稱"
            + ""
            + " "
            + "
"
            + "
"
            + ""
            + ""
            + ""
            + ""
            + ""
            + "" + "" + "
序號(hào)
清單編碼
清單名稱
項(xiàng)目特征描述
單位
工程名稱
標(biāo)桿類型
圖集名稱
圖集代碼
選擇
" + "
"
            + "
" + "
"
            + " "
            + " "
            + "  "
            + "
" + "
" + "
";
    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);
    }
}

需要注意的有如下幾點(diǎn)：

在頁(yè)面中創(chuàng)建元素結(jié)點(diǎn)：

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

遮罩層需要多大？因此需要獲取頁(yè)面的高度和寬度，要注意的是這是網(wǎng)頁(yè)的高度和寬度，而不是屏幕的高度和寬度。然后就是把獲取到的高度和寬度賦給遮罩層(oMask)，因?yàn)槲业膶?shí)際頁(yè)面高度小于屏幕高度，為了讓遮罩層鋪滿全屏于是將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é)點(diǎn)還只是停留在JS里面，要把結(jié)點(diǎn)插入到文檔中，需要執(zhí)行：

    document.body.appendChild(oMask);

可視區(qū)域是真用戶正看到的區(qū)域的大小，其中可視區(qū)域的寬度和頁(yè)面的寬度相同(大部分網(wǎng)頁(yè)都是豎著瀏覽的)，獲取可視區(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)閉：可以點(diǎn)擊彈出層的右上角，或者是點(diǎn)擊遮罩層，設(shè)置onclick事件即可：

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